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

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

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页