vue和app之间的通信

1、判断终端环境

//判断是IOS 还是 android终端
const u = navigator.userAgent;
const  isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

2、IOS架桥通信

function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
  var WVJBIframe = document.createElement("iframe"); // 创建一个 iframe 元素
  WVJBIframe.style.display = "none"; // 不显示
  WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__"; // 设置 iframe 的 src 属性
  document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
  setTimeout(function () {
    document.documentElement.removeChild(WVJBIframe);
  }, 0);
}

3、调用app方法传参

//  appFunName   调用APP的方法名  (和app开发人员协商定义)；

if (isiOS) {
      setupWebViewJavascriptBridge(function (bridge) {
        // 声明 OC 需要调用的 JS 方法。
        // bridge.registerHandler('appShareFriend', function (data, responseCallback) {
        //   // data 是 OC 传递过来的数据.
        //   // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
        //   alert('JS 被 OC 调用了.')
        //   responseCallback({ data: 'js 的数据', from: 'JS' })
        // })
        bridge.callHandler("appFunName   ", function (res) {
          console.log('app返回的参数',res)
          store.dispatch("ayncChangeAppInfo", res);
        });
      });
    }
if (isAndroid) {
    const res = window.android.appFunName();
    const data = JSON.parse(res);
    console.log('app返回的参数',res)
    store.dispatch("ayncChangeAppInfo", data);
}