vue H5与（Android、iOS）原生APP交互

一：JS调用APP

1、封装公共方法：

/**
 *js调用APP
 * @params {*} Obj  传给app参数
 */
export function JSToNativeAPP(params) {
    let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
    let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
        window.android.JSToNative(JSON.stringify(params))
    } else {
        // window.webkit.messageHandlers.JSToNative.postMessage(params)
        JSToNative(JSON.stringify(params))
    }
}

2、使用（组件内引入）：

import { JSToNativeAPP } from "@/utils";

 

二：APP调用JS

在mounted() 生命周期中接收  NativeToJS挂载在window上（和原生协议好所有调用h5均是次方法，通过接收到的code值来区分不同含义）

//APP调js
window.NativeToJS = function (e) {
  console.log(e)
}

例：

mounted () {
    let that = this;
    window.NativeToJS = function (res) {//res 原生APP给的数据
      // console.log(JSON.parse(res));
      let data = JSON.parse(res)
      if(data.code == 3){//获取cookie  code 为H5与app协商自定义，代表不同含义
        if(data.data.cookie){
          that.$cookies.set('SESSION',data.data.cookie,0);
        }else{
          JSToNativeAPP({
            "code": 401,
            "msg": '登录失效',
            "data": null
          })
        }
      }
    }
  },

****：以上是在维护的项目中正使用的，如果有什么问题或有更好的方法，求告知