Hybird框架搭建

二者区别：

1. loadUrl() 会刷新页面， evaluateJavascript() 则不会使页面刷新，所以 evaluateJavascript() 的效率更高

2. loadUrl() 得不到 js 的返回值， evaluateJavascript() 可以获取返回值

3. evaluateJavascript() 在 Android 4.4 之后才可以使用

   在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str ，然后改变页面中的文字。

   如果只是在 methods 中定义方法，原生调用会找不到这个方法。所以要在页面加载的时候将方法挂载在 window 上，这样 WebView 就可以拿到此方法了。注意，这步很重要一定要写！

   loadUrl() 实现：tbsWebView.loadUrl("javascript:callJsFunction('soloname')");

   evaluateJavascript() 实现：

   tbsWebView.loadUrl("javascript:callJsFunction('soloname')");

对于JS调用Android代码的方法有3种：

1. 通过 WebView 的 addJavascriptInterface() 进行对象映射
2. 通过 WebViewClient 的 shouldOverrideUrlLoading() 方法回调拦截 url
3. 通过 WebChromeClient 的 onJsAlert() 、 onJsConfirm() 、 onJsPrompt() 方法回调拦截JS对话框 alert() 、 confirm() 、 prompt() 消息

4. 新建类 JsJavaBridge

   public class JsJavaBridge {
   
       private Activity activity;
       private WebView webView;
   
       public JsJavaBridge(Activity activity, WebView webView) {
           this.activity = activity;
           this.webView = webView;
       }
   
       @JavascriptInterface
       public void onFinishActivity() {
           activity.finish();
       }
   
       @JavascriptInterface
       public void showToast(String msg) {
           ToastUtils.show(msg);
       }
   }
   复制代码

   然后通过 WebView 设置 Android 类与 JS 代码的映射

   tbsWebView.addJavascriptInterface(new JsJavaBridge(this, tbsWebView), "$App");
   复制代码

   这里将类 JsJavaBridge 在 JS 中映射为了 $App ，所以在 Vue 中可以这样调用 $App.showToast("哈哈，我是js调用的") 。

对JS消息体进行改造，增加用于处理回调相关的数据字段 callbackId 与 callbackFunction

• callbackId：对每一次消息需要发起回调都会生成一个唯一ID，用来当回调发生时，找到最初的发起调用的 JS Callback
• callbackFunction：客户端主动 Call JS 的唯一函数入口，客户端会用这个字符串来拼接回调注入的 JS 头，一般设计下，每个消息这个值都应该不变，不过也可以灵活处理（本来这个值可以不需要传递，写死在客户端，只要前端客户端约定好，但如果这个值不写死，而由前端可控操作，那么灵活性会更大，不必担心前端大规模修改 Call JS 唯一入口的时候，还得等客户端发版）

• Params：就是客户端要回调的数据体，可以为空

对 callbackId 与 callbackFunction 进行赋值，callbackId 是一个保证每次通信都唯一的一个id值 getNextCallbackID ，大概思路可以是用时间戳+一定程度的随机小数来进行生成，思路不深入展开了。 callbackFunction 这里我们先写 window.callbackDispatcher 后面会提到这个入口是怎么操作的。

这里有一步最最重要的操作就是， this.msgCallbackMap[callbackid] = callback; 会把 JS 业务的回调函数，保存在一个全局可处理的回调字典之中，而 Key 就是这个唯一ID callbackId，这样当 客户端发起回调的时候，你才能找到对应的 JS Function

我们会按着下面这种方式去拼接 JS 然后用 evaluateJavaScript: 来注入调用JS，在客户端拼接出一段 JS 代码，但如果 params 这个数据中存在一定特殊字符比如 \r \n \f 等等，这些特殊字符会破坏 JS 的代码结构，打破原本的 JS 语法，这块要非常小心，尤其是你要传递大型嵌套字典数据的时候，简单的测试数据这个问题是无法暴露出来的，如果 JS 代码结构被破坏，那么所有通信 JS 的方法就失效了。Native会把 callbackId callbackFuction ResultString 拼接成如下 JS 代码，注入回 WebView

window.callbackDispatcher('12345callbackid','{\'result\':\'result\'}');复制代码

那么前端要做的就是准备好对应的函数，在window的对象上，挂上 callbackDispatcher 这个函数，这就是为啥我一开始说 callbackFunction 写死 window.callbackDispatcher 的原因，客户端用这个字符串，拼出了 JS 代码，这个 JS 代码执行的时候，就刚好window下有这么一个函数接着

window.callbackDispatcher: function (callbackId, resultjson) {    
var handler = this.msgCallbackMap[callbackId];    
if (handler && typeof (handler) === 'function') {          
    console.log(resultjson);        
    var resultObj = resultjson ? JSON.parse(resultjson) : {};        
    handler(resultObj);    
}}复制代码

当Native已经成功回调到 JS 了，那么就用 callbackId 在刚才保存的回调字典里找到要回调的方法，然后把传过来的 resultjson 用 JS 的 JSON.parse 反序列化成字典，然后用找到的回调方法把数据传递进去。@