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调jswindow.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          })        }      }    }  },

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

更多相关文章

随机推荐