与h5的交互

与h5的交互

2018, Jul 01    

JSBridge 原理

  1. 设置具备与js交互的能力，通过mWebView.addJavascriptInterface的方式将JavaScriptinterface对象交给页面（WebView.addJavascriptInterface接口向Web页面注入Java对象，页面Javascript脚本可直接引用该对象并调用该对象的方法。） ——> 页面可以调用JavaScriptinterface的方法
  2. JavaScriptinterface实现所有接口的执行方式。
  3. JavaScriptinterface中持有一个handler，通过handler来处理调用app的一些方法。
  4. 传入参数：所有的方法的调用参数都有一个json串，在方法中解析这个json串按照约定的格式解析出对应的需要参数。
  5. 回调：在页面传入的json数据中会有callback_id，app在接收到数据后会解析出里面的callback（方法名）和callback_id（回调的id），再加上结果拼成调用javascript的url：“javascript:callback(‘callbackid’,result);然后通过webview的loadurl来发送这个方法。
  6. 调用js，就是通过loadurl
public void setJSBridge(Activity activity, WebView webView, Handler handler, View root) {
    this.mWebView = webView;
    JavaScriptinterface obj = new JavaScriptinterface(activity, mWebView, root);
    obj.setHandler(handler);
    mWebView.addJavascriptInterface(obj, "LetvJSBridge_For_Android");//JavaScriptinterface <---> android
    // 可能重入，防止引起的内存泄露
    if (mJavaScriptinterface != null) {
        mJavaScriptinterface.destory();
    }
    setJavaScriptinterface(obj);
}

调试：

  1. 在webviewChromeClient中的onConsoleMessage方法中可以打印JS的debug日志，（参数：message, lineNumber, sourceID）
  2. onJsPrompt():在js中执行alert、confirm和prompt这三个方法时，会进入Android的onJsAlert、onJsConfirm和onJsPrompt回调。 由于prompt的使用频率较低，因此通常采用prompt实现js和Native的通信。

另一种与h5交互的方式是定义scheme协议，然后再shouldOverrideUrlLoading的时候去解析url，解析出uri然后设置intent去调用对应的activity

Twitter Facebook Google+
# android