混合开发笔记2——h5与ios交互（WebViewJavascriptBridge）

╰+哭是因爲堅強的太久メ 2022-12-02 00:42 338阅读 0赞

## h5与移动交互（WebViewJavascriptBridge） ##

**（WebViewJavascriptBridge+vue）**

### 1.固定代码bridge.js ###

//判断机型
    let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    let isAndroid =
      navigator.userAgent.indexOf("Android") > -1 ||
      navigator.userAgent.indexOf("Adr") > -1;
    
    function connectWebViewJavaScriptBridge(callback) { 
      //IOS声明
      if (isiOS) { 
        if (window.WebViewJavascriptBridge) { 
          return callback(window.WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) { 
          return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        let WVJBIframe = document.createElement("iframe");
        WVJBIframe.style.display = "none";
        WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__";
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(() => { 
          document.documentElement.removeChild(WVJBIframe);
        }, 0);
      }
      //Android声明
      if (isAndroid) { 
        if (window.WebViewJavascriptBridge) { 
          callback(window.WebViewJavascriptBridge);
        } else { 
          document.addEventListener(
            "WebViewJavascriptBridgeReady",
            function() { 
              callback(window.WebViewJavascriptBridge);
            },
            false
          );
        }
      }
    }
    
    //注册回调
    connectWebViewJavaScriptBridge(bridge => { 
      //安卓需要初始化函数
      if (isAndroid) { 
        bridge.init((message, responseCallback) => { 
          let data = { 
            "Javascript Responds": "Wee!"
          };
          responseCallback(data);
        });
      }
    });
    
    //抛出调用
    export default { 
      //h5调native
      callHandler(name, data, callback) { 
        connectWebViewJavaScriptBridge(bridge => { 
          bridge.callHandler(name, data, callback);
        });
      },
      //native 调H5(返给移动的方法)
      registerHandler(name, callback) { 
        connectWebViewJavaScriptBridge(bridge => { 
          bridge.registerHandler(name, (data, responseCallback) => { 
            callback(data, responseCallback);
          });
        });
      }
    };

### **2.挂载到main.js全局** ###

//bridge.js
    import Bridge from "./util/bridge";
    Vue.prototype.$bridge = Bridge;

### 3.页面使用 ###

**（1）点击调用或唤醒移动端，并传递字符串参数（ios要求）**  
`typeid:1`是传递的参数，但是传递参数必须是**json格式**，我们要转成字符串`JSON.stringify(data)`，可以像我这样写，也可以直接在方法里把data直接写成`{typeid:1}`，点击事件中data就不用写了

<div @click="getData({typeid:1})"></div>
    methods: { 
        getData(data) { 
          data = JSON.stringify(data)
          this.$bridge.callHandler("toActivity", data, (res) => { 
            console.log("获取app响应数据：" + res)
          })
        },
      },

**（2）传递方法给移动端**

this.$bridge.registerHandler("toActivity", (res) => { 
          console.log("获取app响应数据：" + res)
      })