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

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)
  })