[Android] Initialize every page with JsBridge and WebView

Posted by JMair on Sat, 05 Oct 2019 01:54:45 +0200

Now there's a requirement: initialize the toolbar in the android interface based on the json passed from the page.

So use JsBridge

Implementation'com.github.lzyzsd: jsbridge: 1.0.4'//js and android interaction framework

Import the JsBridge project, add a webview to the layout, and then come to the code:

        bridgeWebView= activity.findViewById(R.id.webView);
        bridgeWebView.setWebChromeClient(chromeClient);        //    Configuration on demand                    
        BridgeWebViewClient webViewClient = new BridgeWebViewClient(bridgeWebView){
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);

                bridgeWebView.send("Send to js Request initialization", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        Bean_WebInit bean_webInit = new Gson().fromJson(data.toString(), new TypeToken<Bean_WebInit>(){}.getType());
//
                        Message message = Message.obtain();
                        message.what = UPDATE_TOOLBAR;
                        message.obj = bean_webInit;
                        handler.sendMessage(message);
                    }
                });
            }
        };
        bridgeWebView.setWebViewClient(webViewClient);
        bridgeWebView.loadUrl(url);

The main point is the setting of BridgeWebViewClient. The onPage Finished for WebView is usually set with WebViewClient class, but the BridgeWebView control may be overwritten by WebViewClient, so it can only override BridgeWebViewClient to implement onPage Finished to achieve callbacks after page loading.

The send method has two parameters, the first parameter is sent to JS for processing, and the second parameter is the data that JS calls back to android, in which the parameter data is returned by js.

Forget to mention that in js, we need to cooperate with android to write initialization configuration:

        //Register the callback function and call the initialization function on the first connection
       connectWebViewJavascriptBridge(function(bridge) {
            //Initialization
           bridge.init(function(message, responseCallback) {
               var data = {
                   'btn_type': 'link',
                   'url': 'https://www.baidu.com',
                   'is_right_btn_show': true
               };
               responseCallback(data);
           });
       })


       //JS Registered Event Monitor
       function connectWebViewJavascriptBridge(callback) {
           if (window.WebViewJavascriptBridge) {
               callback(WebViewJavascriptBridge)
           } else {
               document.addEventListener(
                   'WebViewJavascriptBridgeReady'
                   , function() {
                       callback(WebViewJavascriptBridge)
                   },
                   false
               );
           }
       }

And on the js side, I basically can't read it, anyway, I want to write the key value to data parameter.

ok, that's it. I don't understand much more. All of these are written by a new programming experience for 1 years. Please point out if there are any questions.

Topics: Android JSON github Programming