ਫਲਟਰ ਵੈਬਵਿਊ ਵਿੱਚ ਡਾਰਟ ਸੰਚਾਰ ਲਈ JavaScript ਨੂੰ ਹੈਂਡਲ ਕਰਨਾ
ਇੱਕ ਹਾਈਬ੍ਰਿਡ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਅਸੈਂਬਲ ਕਰਨ ਲਈ ਇੱਕ WebView ਦੁਆਰਾ JavaScript ਅਤੇ ਫਲਟਰ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। JavaScript ਤੋਂ Dart ਤੱਕ ਡੇਟਾ ਸੰਚਾਰਿਤ ਕਰਨਾ ਇੱਕ ਆਮ ਕੰਮ ਹੈ ਜੋ ਦੋ ਵਾਤਾਵਰਣਾਂ ਵਿਚਕਾਰ ਸੁਚਾਰੂ ਸੰਚਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
ਇਹ ਪੋਸਟ ਇਹ ਦੱਸੇਗੀ ਕਿ JavaScript ਤੋਂ ਡਾਰਟ ਵਿੱਚ ਕਈ ਮਾਪਦੰਡਾਂ ਨੂੰ ਟ੍ਰਾਂਸਫਰ ਕਰਨ ਲਈ ਫਲਟਰ ਵੈਬਵਿਊ ਪਲੱਗਇਨ ਦੇ JavaScript ਚੈਨਲ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਅਸੀਂ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਅਜਿਹੀ ਸਥਿਤੀ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਤ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਦੋ ਦਲੀਲਾਂ, ਕਹੋ x ਅਤੇ y, ਦੀ ਵਰਤੋਂ ਕਰਕੇ JavaScript ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਡਾਰਟ ਨੂੰ ਭੇਜੇ ਜਾਂਦੇ ਹਨ ਸੈੱਟ ਸਥਿਤੀ ਚੈਨਲ।
ਹਾਲਾਂਕਿ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਾਟਾ ਭੇਜਿਆ ਜਾ ਸਕਦਾ ਹੈ ਪੋਸਟ-ਮੈਸੇਜ(), ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਡਾਰਟ ਵਿੱਚ ਇਹਨਾਂ ਸੁਨੇਹਿਆਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲਣਾ ਲਾਜ਼ਮੀ ਹੈ ਕਿ ਸੰਚਾਰ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ। ਪ੍ਰਭਾਵੀ ਡੇਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ ਇਹ ਜਾਣਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਕਿ ਡਾਰਟ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ onMessageReceived ਅਜਿਹਾ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ.
ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ ਜੇਕਰ ਤੁਸੀਂ ਜਵਾਬਾਂ ਲਈ ਇੰਟਰਨੈੱਟ 'ਤੇ ਖੋਜ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਹੈ ਪਰ ਬਹੁਤ ਕੁਝ ਨਹੀਂ ਮਿਲਿਆ ਹੈ। ਅਸੀਂ ਇਸ ਲੇਖ ਵਿੱਚ ਬਹੁਤ ਵਿਸਥਾਰ ਵਿੱਚ ਜਾਵਾਂਗੇ ਅਤੇ ਤੁਹਾਨੂੰ ਇਸ ਸੰਚਾਰ ਪਾਈਪਲਾਈਨ ਨੂੰ ਬਣਾਉਣ ਲਈ ਇੱਕ ਕਦਮ-ਦਰ-ਕਦਮ ਵਿਧੀ ਦੇਵਾਂਗੇ।
ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
---|---|
postMessage() | ਇਸ JavaScript ਵਿਧੀ ਦਾ ਉਦੇਸ਼ ਕਈ ਸੰਦਰਭਾਂ ਵਿਚਕਾਰ ਸੰਦੇਸ਼ਾਂ ਨੂੰ ਟ੍ਰਾਂਸਫਰ ਕਰਨਾ ਹੈ। ਇੱਥੇ, ਇਸਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਡੇਟਾ ਟ੍ਰਾਂਸਪੋਰਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ JavaScript ਚੈਨਲ ਵੈੱਬ ਸਮੱਗਰੀ ਤੋਂ ਫਲਟਰ ਵੈਬਵਿਊ ਦੇ ਡਾਰਟ ਸਾਈਡ ਤੱਕ (ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, JavaScript)। |
jsonDecode() | ਇੱਕ ਡਾਰਟ ਫੰਕਸ਼ਨ ਜੋ JSON ਨਾਲ ਏਨਕੋਡ ਕੀਤੀ ਇੱਕ ਸਟ੍ਰਿੰਗ ਨੂੰ ਪਾਰਸ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਡਾਰਟ ਮੈਪ ਜਾਂ ਸੂਚੀ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, dart:convert ਪੈਕੇਜ ਵਿੱਚ ਪਾਇਆ ਜਾਂਦਾ ਹੈ। ਵਰਗੇ ਡੇਟਾ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ x ਅਤੇ y, ਇਹ ਡੀਕੋਡਿੰਗ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ JSON ਸੁਨੇਹਾ JavaScript ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤਾ। |
JavascriptChannel | ਇਹ ਇੱਕ ਫਲਟਰ ਕਲਾਸ ਹੈ ਜੋ ਡਾਰਟ ਕੋਡ ਅਤੇ JavaScript ਵਿਚਕਾਰ ਸੰਚਾਰ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ ਜੋ ਇੱਕ WebView ਦੇ ਅੰਦਰ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਜਦੋਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਾਲੇ ਪਾਸੇ ਤੋਂ ਸੁਨੇਹੇ ਆਉਂਦੇ ਹਨ, ਤਾਂ Javascript ਚੈਨਲ ਉਹਨਾਂ ਲਈ ਸੁਣਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਡਾਰਟ ਵਿੱਚ ਸੰਭਾਲਦਾ ਹੈ। |
onMessageReceived | ਇੱਕ ਕਾਲਬੈਕ ਜੋ ਵਿੱਚ ਚਾਲੂ ਹੁੰਦਾ ਹੈ Javascript ਚੈਨਲ JavaScript ਤੋਂ ਸੁਨੇਹਾ ਪ੍ਰਾਪਤ ਕਰਨ 'ਤੇ. ਇਹ ਆਉਣ ਵਾਲੇ ਸੁਨੇਹੇ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ ਅਤੇ ਡੇਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਓਪਰੇਸ਼ਨ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ JSON ਨੂੰ ਪਾਰਸ ਕਰਨਾ ਜਾਂ ਦਿੱਤੇ ਗਏ ਆਰਗੂਮੈਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। |
navigationDelegate | ਇੱਕ ਡਾਰਟ ਸੰਪੱਤੀ ਜੋ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ WebView ਨੈਵੀਗੇਸ਼ਨ ਨਾਲ ਸਬੰਧਤ ਘਟਨਾਵਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਅਤੇ ਰੋਕਣ ਲਈ ਵਿਜੇਟ। ਇਹ ਤੁਹਾਨੂੰ URL ਤਬਦੀਲੀਆਂ ਨੂੰ ਰਿਕਾਰਡ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਕਸਟਮ URL ਸਕੀਮਾਂ ਦੇ ਨਾਲ ਪੈਰਾਮੀਟਰ ਭੇਜਣ ਵੇਲੇ)। |
Uri.queryParameters | ਡਾਰਟ ਵਿੱਚ, ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ URL ਤੋਂ ਪੁੱਛਗਿੱਛ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ। ਤੁਸੀਂ URL ਵਿੱਚ ਪੈਰਾਮੀਟਰਾਂ ਦੇ ਤੌਰ ਤੇ ਸਪਲਾਈ ਕੀਤੇ ਡੇਟਾ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ x ਅਤੇ y, ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ URL ਸਕੀਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। |
NavigationDecision.prevent | ਇੱਕ ਵਾਪਸੀ ਮੁੱਲ ਜੋ ਕਿ ਨੈਵੀਗੇਸ਼ਨ ਡੈਲੀਗੇਟ WebView ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਤੋਂ ਰੋਕਣ ਲਈ ਵਰਤਦਾ ਹੈ। ਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਛੱਡੇ ਬਿਨਾਂ ਆਰਗੂਮੈਂਟਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਅਤੇ URL ਤਬਦੀਲੀ ਨੂੰ ਰੋਕਣ ਵੇਲੇ, ਇਹ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ। |
JavascriptMessage | ਇੱਕ ਡਾਰਟ ਕਲਾਸ ਜੋ ਉੱਪਰ ਭੇਜੇ ਗਏ ਸੁਨੇਹੇ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ Javascript ਚੈਨਲ JavaScript ਤੋਂ ਡਾਰਟ ਤੱਕ। ਸੁਨੇਹਾ ਸਤਰ ਉੱਥੇ ਮੌਜੂਦ ਹੈ, ਲੋੜ ਅਨੁਸਾਰ ਪ੍ਰੋਸੈਸਿੰਗ ਜਾਂ ਡੀਕੋਡਿੰਗ ਲਈ ਤਿਆਰ ਹੈ। |
WebView | ਦ WebView ਫਲਟਰ ਐਪਸ ਵਿੱਚ ਵਿਜੇਟ ਦੀ ਵਰਤੋਂ ਵੈੱਬ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ JavaScript ਚੈਨਲਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦਾ ਹੈ, ਨੇਟਿਵ ਅਤੇ ਵੈਬ ਕੋਡ ਵਿਚਕਾਰ ਦੋ-ਦਿਸ਼ਾ ਸੰਚਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। |
ਫਲਟਰ ਵੈਬਵਿਊ ਵਿੱਚ JavaScript ਅਤੇ ਡਾਰਟ ਸੰਚਾਰ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨਾ
ਸਾਡਾ ਵਿਕਸਤ ਹੱਲ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਏ JavaScript ਚੈਨਲ ਤੋਂ ਬਹੁਤ ਸਾਰੀਆਂ ਦਲੀਲਾਂ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਲਈ JavaScript ਫਲਟਰ ਦੇ ਵੈਬਵਿਊ ਰਾਹੀਂ ਡਾਰਟ ਵੱਲ। ਪ੍ਰਾਇਮਰੀ ਟੀਚਾ ਡਾਰਟ ਕੋਡ ਅਤੇ JavaScript ਵਿਚਕਾਰ ਸੰਚਾਰ ਲਈ ਇੱਕ ਭਰੋਸੇਯੋਗ ਪਾਈਪਲਾਈਨ ਬਣਾਉਣਾ ਹੈ ਜੋ WebView ਵਿੱਚ ਚੱਲਦਾ ਹੈ। ਦ ਪੋਸਟ-ਮੈਸੇਜ() ਵਿਧੀ ਦੀ ਵਰਤੋਂ JavaScript ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਦੋ ਪੈਰਾਮੀਟਰਾਂ (x ਅਤੇ y) ਨੂੰ ਸੰਚਾਰਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਬਾਅਦ ਵਿੱਚ onMessageReceived ਕਾਲਬੈਕ ਦੁਆਰਾ ਡਾਰਟ ਦੁਆਰਾ ਪ੍ਰਾਪਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਸ ਸੰਰਚਨਾ ਦੇ ਨਾਲ, ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਨੂੰ ਵੈੱਬ ਸਮੱਗਰੀ ਤੋਂ ਮੂਲ ਡਾਰਟ ਕੋਡ ਤੱਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸੰਚਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ jsonDecode() ਫੰਕਸ਼ਨ, ਅਸੀਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਸੰਦੇਸ਼ ਨੂੰ ਡਾਰਟ ਸਾਈਡ 'ਤੇ ਡੀਕੋਡ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਾਂ ਕਿ JavaScript ਤੋਂ JSON ਡੇਟਾ ਨੂੰ ਟ੍ਰਾਂਸਫਰ ਕਰਕੇ ਬਹੁਤ ਸਾਰੇ ਮਾਪਦੰਡ ਇੱਕ ਸੰਗਠਿਤ ਤਰੀਕੇ ਨਾਲ ਭੇਜੇ ਜਾ ਸਕਦੇ ਹਨ। ਡੀਕੋਡਿੰਗ ਤੋਂ ਬਾਅਦ, ਡਾਰਟ ਵਿਅਕਤੀਗਤ ਮੁੱਲਾਂ (x ਅਤੇ y) ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਉਦੇਸ਼ ਲਈ ਵਰਤਣ ਦੇ ਯੋਗ ਹੁੰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਜਾਣਕਾਰੀ ਨੂੰ ਰਿਕਾਰਡ ਕਰਨਾ, ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਤੱਤਾਂ ਨੂੰ ਬਦਲਣਾ, ਅਤੇ ਹੋਰ ਕਾਰਜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ ਜੋ ਪ੍ਰਾਪਤ ਕੀਤੇ ਮੁੱਲਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਧੀ JavaScript ਤੋਂ Dart ਨੂੰ ਗੁੰਝਲਦਾਰ ਡਾਟਾ ਢਾਂਚੇ ਭੇਜਣ ਵੇਲੇ ਘੱਟ ਓਵਰਹੈੱਡ ਦੀ ਗਾਰੰਟੀ ਦਿੰਦੀ ਹੈ।
ਸਿੱਧੇ ਸੁਨੇਹਿਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ ਇੱਕ ਵੱਖਰੀ ਪਹੁੰਚ ਨੂੰ ਵੀ ਦੇਖਿਆ ਜਿਸ ਵਿੱਚ ਵਿਲੱਖਣ URL ਸਕੀਮਾਂ ਦੀ ਵਰਤੋਂ ਸ਼ਾਮਲ ਸੀ। ਅਸੀਂ URL ਨੂੰ ਬਦਲ ਕੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਪ੍ਰਸਾਰਿਤ ਕਰ ਸਕਦੇ ਹਾਂ window.location.href JavaScript ਵਿੱਚ. ਡਾਰਟ ਫਿਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਡੇਟਾ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ ਨੈਵੀਗੇਸ਼ਨ ਡੈਲੀਗੇਟ. ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ JavaScript ਚੈਨਲ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਵਿਵਹਾਰਕ ਨਾ ਹੋਵੇ ਜਾਂ ਜਦੋਂ URL-ਅਧਾਰਿਤ ਸੰਚਾਰ ਪ੍ਰੋਗਰਾਮ ਦੇ ਡਿਜ਼ਾਈਨ ਨੂੰ ਦੇਖਦੇ ਹੋਏ ਵਧੇਰੇ ਅਰਥ ਰੱਖਦਾ ਹੈ, ਤਾਂ ਇਹ ਪਹੁੰਚ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੀ ਹੈ। ਉਸ ਤੋਂ ਬਾਅਦ, ਡਾਰਟ URL ਨੂੰ ਪਾਰਸ ਕਰਦਾ ਹੈ ਅਤੇ ਵਰਤਦਾ ਹੈ Uri.queryParameters x ਅਤੇ y ਵਰਗੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਐਕਸਟਰੈਕਟ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ। ਇਹ ਗਾਰੰਟੀ ਦਿੰਦਾ ਹੈ ਕਿ ਡਾਰਟ ਅਤੇ ਵੈੱਬ ਸਮੱਗਰੀ ਵਿਚਕਾਰ ਕਈ ਸੰਚਾਰ ਵਿਧੀਆਂ ਸੰਭਵ ਹਨ।
ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਸੁਰੱਖਿਆ ਨੂੰ ਸਾਰੀਆਂ ਪਹੁੰਚਾਂ ਵਿੱਚ ਪ੍ਰਮੁੱਖ ਤਰਜੀਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਆਉਣ ਵਾਲੇ ਸੰਚਾਰ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ। ਅਸੀਂ ਸੰਦੇਸ਼ ਪਾਸ ਕਰਨ ਲਈ JSON ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪ੍ਰਕਿਰਿਆ ਦੀ ਸੁਰੱਖਿਆ ਅਤੇ ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਵਧਾਉਂਦੇ ਹਾਂ, ਜੋ ਡੇਟਾ ਹੇਰਾਫੇਰੀ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਯੂਨਿਟ ਟੈਸਟ ਇਹ ਵੀ ਗਾਰੰਟੀ ਦਿੰਦੇ ਹਨ ਕਿ ਕਾਰਜਕੁਸ਼ਲਤਾ ਵੱਖ-ਵੱਖ ਸੈਟਿੰਗਾਂ ਵਿੱਚ ਉਦੇਸ਼ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੀ ਹੈ। ਨਿਰਵਿਘਨ ਅਤੇ ਭਰੋਸੇਮੰਦ, WebView ਏਕੀਕਰਣ ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਅਤੇ ਫਲਟਰ ਦੇ ਮੂਲ ਵਾਤਾਵਰਣ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਮਜ਼ਬੂਤ ਲਿੰਕ ਬਣਾਉਂਦਾ ਹੈ।
ਫਲਟਰ ਵੈਬਵਿਊ ਰਾਹੀਂ JavaScript ਤੋਂ ਡਾਰਟ ਤੱਕ ਕਈ ਮਾਪਦੰਡਾਂ ਨੂੰ ਪਾਸ ਕਰਨਾ
ਇਹ ਹੱਲ ਬਹੁਤ ਸਾਰੇ ਆਰਗੂਮੈਂਟਾਂ (x, y) ਨੂੰ JavaScript ਤੋਂ ਡਾਰਟ ਤੱਕ ਪਾਸ ਕਰਦਾ ਹੈ ਜਦੋਂ ਕਿ ਉਹਨਾਂ ਦਾ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੇ ਅਨੁਸਾਰ ਇਲਾਜ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਫਲਟਰ ਵੈਬਵਿਊ ਪਲੱਗਇਨ ਅਤੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਚੈਨਲ ਦਾ ਲਾਭ ਲੈ ਕੇ ਅਜਿਹਾ ਕਰਦਾ ਹੈ।
// JavaScript code to send two parameters to Dart
function sendPosition(x, y) {
setPosition.postMessage(JSON.stringify({ x: x, y: y }));
}
// Example of calling the function
sendPosition(100, 200);
WebView ਦੇ JavaScript ਚੈਨਲ ਰਾਹੀਂ ਡਾਰਟ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕੀਤੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸੰਭਾਲਣਾ
ਇਸ ਡਾਰਟ ਹੱਲ ਦਾ ਮੁੱਖ ਟੀਚਾ ਵੈਬਵਿਊ ਦੇ JavaScript ਚੈਨਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਸੰਦੇਸ਼ ਨੂੰ JSON ਫਾਰਮੈਟ ਵਿੱਚ ਡੀਕੋਡ ਕਰਕੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲਣਾ ਹੈ।
// Dart code: Set up WebView and JavaScript channel
WebView(
initialUrl: 'https://your-webpage.com',
javascriptChannels: {
JavascriptChannel(
name: 'setPosition',
onMessageReceived: (JavascriptMessage message) {
// Decode the JSON message
final data = jsonDecode(message.message);
final x = data['x'];
final y = data['y'];
// Handle the x and y values
print('Position received: x=$x, y=$y');
// Add your logic here
},
),
},
);
ਡਾਰਟ ਲਈ ਯੂਨਿਟ ਟੈਸਟ: JavaScript ਚੈਨਲ ਦੀ ਜਾਂਚ ਕਰਨਾ
ਹੱਲ ਦੀ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦਾ ਡਾਰਟ ਸਾਈਡ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ JavaScript ਸੁਨੇਹੇ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕੀਤੀ ਗਈ ਹੈ ਅਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਪਾਰਸ ਕੀਤਾ ਗਿਆ ਹੈ।
import 'package:flutter_test/flutter_test.dart';
import 'dart:convert';
void main() {
test('Test JavaScript message parsing', () {
const message = '{"x": 100, "y": 200}';
final data = jsonDecode(message);
expect(data['x'], 100);
expect(data['y'], 200);
});
}
ਵਿਕਲਪਕ ਪਹੁੰਚ: ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨ ਲਈ URL ਸਕੀਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਇਹ ਵਿਧੀ ਦਰਸਾਉਂਦੀ ਹੈ ਕਿ JavaScript ਵਿੱਚ ਇੱਕ ਕਸਟਮ URL ਸਕੀਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਰਗੂਮੈਂਟਾਂ ਨੂੰ ਕਿਵੇਂ ਪਾਸ ਕਰਨਾ ਹੈ ਜੋ WebView ਦੇ URL ਪਰਿਵਰਤਨ ਘਟਨਾ 'ਤੇ ਡਾਰਟ ਵਿੱਚ ਡੀਕੋਡ ਕੀਤਾ ਗਿਆ ਹੈ।
// JavaScript code: Send parameters via custom URL scheme
function sendPositionViaUrl(x, y) {
window.location.href = 'flutter-webview://setPosition?x=' + x + '&y=' + y;
}
// Example of calling the function
sendPositionViaUrl(100, 200);
ਡਾਰਟ: WebView ਵਿੱਚ URL ਤਬਦੀਲੀਆਂ ਨੂੰ ਸੰਭਾਲਣਾ
URL ਪ੍ਰੋਟੋਕੋਲ ਉੱਤੇ ਦਿੱਤੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਕੈਪਚਰ ਕਰਨ ਅਤੇ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਲਈ, ਇਹ ਡਾਰਟ ਹੱਲ WebView ਵਿੱਚ URL ਤਬਦੀਲੀਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।
WebView(
initialUrl: 'https://your-webpage.com',
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('flutter-webview://setPosition')) {
final uri = Uri.parse(request.url);
final x = uri.queryParameters['x'];
final y = uri.queryParameters['y'];
print('Position received via URL: x=$x, y=$y');
// Add your logic here
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
);
ਫਲਟਰ ਵੈਬਵਿਊ ਵਿੱਚ ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨ ਦੀਆਂ ਤਕਨੀਕਾਂ ਦੀ ਪੜਚੋਲ ਕਰਨਾ
ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਡਾਟਾ ਢਾਂਚਿਆਂ ਨੂੰ ਸੰਭਾਲਣਾ JavaScript ਅਤੇ ਡਾਰਟ ਦੇ ਵਿਚਕਾਰ ਫਲਟਰ ਵੈਬਵਿਊ ਰਾਹੀਂ ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹੈ। ਹਾਲਾਂਕਿ ਸਾਡਾ ਧਿਆਨ ਬੇਸਿਕ ਪਾਸ ਕਰਨ 'ਤੇ ਰਿਹਾ ਹੈ x ਅਤੇ y ਆਰਗੂਮੈਂਟਸ, ਅਜਿਹੀਆਂ ਸਥਿਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜਿਸ ਵਿੱਚ ਤੁਹਾਨੂੰ ਇੱਕ ਵਸਤੂ, ਐਰੇ, ਜਾਂ ਇੱਥੋਂ ਤੱਕ ਕਿ ਕਈ ਨੇਸਟਡ ਆਬਜੈਕਟ ਵੀ ਪਾਸ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਗੁੰਝਲਦਾਰ ਡਾਟਾ ਢਾਂਚੇ ਨੂੰ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਟ੍ਰਿੰਗ ਫਾਰਮੈਟ ਵਿੱਚ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ JSON.stringify() ਵਿਧੀ, ਜਿਸ ਨੂੰ ਫਿਰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਵਰਤ ਕੇ ਤਬਦੀਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ postMessage() ਢੰਗ. ਉਸ ਤੋਂ ਬਾਅਦ, ਡਾਰਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ jsonDecode() ਸ਼ੁਰੂਆਤੀ ਢਾਂਚੇ ਨੂੰ ਦੁਬਾਰਾ ਜੋੜਨ ਲਈ ਤਾਂ ਜੋ ਇਸ 'ਤੇ ਕਾਰਵਾਈ ਕੀਤੀ ਜਾ ਸਕੇ।
ਸੁਨੇਹਾ ਫਾਰਵਰਡਿੰਗ ਗਲਤੀ ਪ੍ਰਬੰਧਨ ਇੱਕ ਹੋਰ ਵਿਹਾਰਕ ਤਰੀਕਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਡੇਟਾ ਨੂੰ JavaScript ਅਤੇ Dart ਵਾਤਾਵਰਣ ਦੋਵਾਂ ਵਿੱਚ ਪ੍ਰਮਾਣਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜਦੋਂ ਦੋ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਡੇਟਾ ਨੂੰ ਹਿਲਾਉਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਬੁਲਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਚੈੱਕ ਲਗਾ ਕੇ ਖਰਾਬ ਡੇਟਾ ਨੂੰ ਡਿਲੀਵਰ ਹੋਣ ਤੋਂ ਬਚਾਇਆ ਜਾ ਸਕਦਾ ਹੈ postMessage() JavaScript ਪਾਸੇ 'ਤੇ. ਤੁਸੀਂ ਪੁਸ਼ਟੀ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਏਨਕੋਡ ਕੀਤੇ ਡੇਟਾ ਵਿੱਚ ਡਾਰਟ ਸਾਈਡ 'ਤੇ ਅਨੁਮਾਨਿਤ ਕੁੰਜੀਆਂ ਅਤੇ ਮੁੱਲ ਹਨ। ਪ੍ਰਭਾਵੀ ਸੰਚਾਰ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਤੋਂ ਇਲਾਵਾ, ਇਹ ਗਲਤੀਆਂ ਜਾਂ ਖਰਾਬ ਡੇਟਾ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, WebView in Flutter ਇੱਕ ਵਾਧੂ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਵੈਬਪੇਜ 'ਤੇ ਕਸਟਮ JavaScript ਲਾਗੂ ਕਰਨ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਡਾਰਟ ਸਾਈਡ ਤੋਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਰੁਟੀਨ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਟਰਿੱਗਰ ਕਰ ਸਕਦੇ ਹੋ evaluateJavascript ਤਕਨੀਕ. ਇਹ ਤੁਹਾਡੀ ਫਲਟਰ ਐਪ ਤੋਂ ਵੈੱਬ ਸਮੱਗਰੀ 'ਤੇ ਭੇਜੇ ਜਾਣ ਵਾਲੇ ਕਮਾਂਡਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾ ਕੇ ਬਹੁਪੱਖੀਤਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਦੋ-ਪੱਖੀ ਸੰਚਾਰ ਚੈਨਲ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਦੋ ਲੇਅਰਾਂ ਦੇ ਵਿਚਕਾਰ ਲਗਾਤਾਰ ਡੇਟਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਇਹ ਰਣਨੀਤੀ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ।
ਫਲਟਰ ਵੈਬਵਿਊ ਵਿੱਚ ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨ ਬਾਰੇ ਆਮ ਸਵਾਲ
- ਮੈਂ JavaScript ਤੋਂ ਡਾਰਟ ਨੂੰ ਗੁੰਝਲਦਾਰ ਵਸਤੂਆਂ ਕਿਵੇਂ ਭੇਜਾਂ?
- ਡਾਰਟ ਸਾਈਡ 'ਤੇ ਗੁੰਝਲਦਾਰ ਵਸਤੂਆਂ ਨੂੰ ਡੀਕੋਡ ਕਰਨ ਲਈ, ਵਰਤੋਂ jsonDecode() ਨਾਲ ਇੱਕ ਸਤਰ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨ ਤੋਂ ਬਾਅਦ JSON.stringify() ਅਤੇ postMessage().
- ਡੇਟਾ ਨੂੰ ਟ੍ਰਾਂਸਫਰ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਪ੍ਰਮਾਣਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ?
- ਨਾਲ ਡਾਟਾ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ postMessage(), ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ ਸਹੀ ਢੰਗ ਨਾਲ ਬਣਤਰ ਹੈ ਅਤੇ JavaScript ਵਾਲੇ ਪਾਸੇ ਸਾਰੇ ਲੋੜੀਂਦੇ ਖੇਤਰ ਹਨ। ਸੰਚਾਰ ਨੂੰ ਡੀਕੋਡ ਕੀਤੇ ਜਾਣ ਤੋਂ ਬਾਅਦ, ਡਾਰਟ ਸਾਈਡ 'ਤੇ ਕੁੰਜੀਆਂ ਅਤੇ ਮੁੱਲਾਂ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ।
- ਕੀ JavaScript ਤੋਂ ਡਾਰਟ ਨੂੰ ਦੋ ਤੋਂ ਵੱਧ ਪੈਰਾਮੀਟਰ ਭੇਜਣਾ ਸੰਭਵ ਹੈ?
- ਹਾਂ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ JSON.stringify() ਕਈ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ JSON ਵਸਤੂ ਦੇ ਤੌਰ 'ਤੇ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਲਈ, ਅਤੇ jsonDecode() ਡਾਰਟ ਵਿੱਚ ਉਹਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ।
- ਜੇਕਰ WebView JavaScript ਚੈਨਲ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
- ਜੇਕਰ JavaScript ਚੈਨਲ ਉਪਲਬਧ ਨਹੀਂ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ URL ਸਕੀਮ ਅਤੇ ਵਰਤੋਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ navigationDelegate URL ਨੂੰ ਰੋਕਣ ਲਈ ਡਾਰਟ ਵਿੱਚ.
- ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨ ਦੌਰਾਨ ਮੈਂ ਗਲਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਾਂ?
- ਡਾਰਟ ਅਤੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣ ਨੂੰ ਅਭਿਆਸ ਵਿੱਚ ਰੱਖੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਰਾ ਡਾਟਾ ਨਾਲ ਭੇਜਿਆ ਗਿਆ ਹੈ postMessage() ਦੀ ਜਾਂਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਵਰਤੋਂ try-catch ਡੀਕੋਡਿੰਗ ਮੁੱਦਿਆਂ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ ਡਾਰਟ ਵਿੱਚ ਬਲਾਕ.
ਫਲਟਰ ਵੈਬਵਿਊ ਕਮਿਊਨੀਕੇਸ਼ਨ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ
JavaScript ਅਤੇ Dart ਵਿਚਕਾਰ ਆਰਗੂਮੈਂਟ ਭੇਜਣ ਦੀ ਸਮਰੱਥਾ ਔਨਲਾਈਨ ਸਮੱਗਰੀ ਅਤੇ ਫਲਟਰ ਐਪਸ ਦੇ ਇੰਟਰੈਕਟ ਕਰਨ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ। ਡੇਟਾ ਦੀ ਇਕਸਾਰਤਾ ਅਤੇ ਉਪਯੋਗਤਾ ਦੀ ਗਾਰੰਟੀ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਪੋਸਟ-ਮੈਸੇਜ() ਡਾਰਟ ਦੇ ਨਾਲ ਜੋੜ ਕੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ jsonDecode() ਫੰਕਸ਼ਨ.
ਡਿਵੈਲਪਰ ਕਈ ਰਣਨੀਤੀਆਂ, ਜਿਵੇਂ ਕਿ URL ਸਕੀਮਾਂ ਅਤੇ ਡਾਇਰੈਕਟ ਮੈਸੇਜ ਹੈਂਡਲਿੰਗ ਦੀ ਜਾਂਚ ਕਰਕੇ ਉਸ ਪਹੁੰਚ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹਨ ਜੋ ਉਹਨਾਂ ਦੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ। ਉਚਿਤ ਪ੍ਰਮਾਣਿਕਤਾ ਅਤੇ ਗਲਤੀ ਪ੍ਰਬੰਧਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ ਇਹਨਾਂ ਸੰਚਾਰ ਪ੍ਰਣਾਲੀਆਂ ਦੀ ਭਰੋਸੇਯੋਗਤਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।
ਫਲਟਰ ਵੈਬਵਿਊ ਵਿੱਚ ਡਾਰਟ ਸੰਚਾਰ ਲਈ JavaScript ਲਈ ਹਵਾਲੇ ਅਤੇ ਸਰੋਤ
- ਸਥਾਪਤ ਕਰਨ ਬਾਰੇ ਵਿਸਥਾਰ ਨਾਲ ਦੱਸਿਆ JavaScript ਚੈਨਲ ਅਤੇ ਉਹ ਕਿਵੇਂ ਏਕੀਕ੍ਰਿਤ ਹੁੰਦੇ ਹਨ ਫਲਟਰ WebView ਐਪਲੀਕੇਸ਼ਨਾਂ। ਫਲਟਰ WebView ਦਸਤਾਵੇਜ਼ੀ
- ਵਿੱਚ ਸਮਝ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਪੋਸਟ-ਮੈਸੇਜ() ਵਿਧੀ ਅਤੇ ਕਰਾਸ-ਫ੍ਰੇਮ ਮੈਸੇਜਿੰਗ ਲਈ JavaScript ਵਿੱਚ ਇਸਦੀ ਵਰਤੋਂ। MDN ਵੈੱਬ ਡੌਕਸ - postMessage()
- ਦੱਸਦਾ ਹੈ ਕਿ JavaScript ਤੋਂ ਕੁਸ਼ਲ ਡੇਟਾ ਹੈਂਡਲਿੰਗ ਲਈ ਡਾਰਟ JSON ਡੀਕੋਡਿੰਗ ਅਤੇ ਪਾਰਸਿੰਗ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਦਾ ਹੈ। ਡਾਰਟ jsonDecode() ਦਸਤਾਵੇਜ਼
- ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਵਰ ਕਰਦਾ ਹੈ ਨੈਵੀਗੇਸ਼ਨ ਡੈਲੀਗੇਟ ਇੱਕ WebView ਦੇ ਅੰਦਰ URL ਇੰਟਰਸੈਪਸ਼ਨ ਲਈ। ਫਲਟਰ WebView ਨੈਵੀਗੇਸ਼ਨ ਡੈਲੀਗੇਟ