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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！