Vue.js和iOS和Android安卓的交互

一、Android和JS的交互

1.安卓调用JS

对于Android调用JS代码的方法有2种：

1. 通过WebView的loadUrl（）
2. 通过WebView的evaluateJavascript（）

二者区别：
（1）loadUrl() 会刷新页面，evaluateJavascript() 则不会使页面刷新，所以 evaluateJavascript() 的效率更高
（2）loadUrl() 得不到 js 的返回值，evaluateJavascript() 可以获取返回值
（3）evaluateJavascript() 在 Android 4.4 之后才可以使用

步骤1：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

步骤2：在Android里通过WebView设置调用JS代码

vue代码

mounted() {
	//在 methods 中定义方法
    //将要给安卓调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
},

methods: {
	//js通过$App调用安卓里面的方法
    openCamera(num) {
      $App.onOpenCamera(num);
    },
    //安卓调JS方法
    callJsFunction(path) {
    //path是安卓传递过来的参数
        this.userAvatar = path
}

2. JS调用安卓

methods: {
    // 调用安卓的微信分享
    // 参数：1是标题，2是内容，3是头像
    shareWechat() {
      $App.shareWechat(this.userNickName, this.userAutograph, this.userAvatar);
    },
 }

二、IOS与JS的交互

vue调用IOS的方法

// 传string
function scanClick() {
	//window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
    window.webkit.messageHandlers.ScanAction.postMessage('hello');
}
// 传字典              
function shareClick() {
    window.webkit.messageHandlers.Share.postMessage({title:'测试分享的标题',content:'测试分享的内容',url:'http://www.baidu.com'});

2.ios调用vue

mounted () {
     //在 methods 中定义方法
    //将要给ios调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
        }
methods: {
    //iOS调JS方法
    callJsFunction(path) {
    //path是iOS传递过来的参数
    this.userAvatar = path
}

三、判断是安卓还是iOS设备

	if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.webkit.messageHandlers.jsToOcNoPrams.postMessage({});
      } else if (/(Android)/i.test(navigator.userAgent)) {
        $App.onFinishActivity();//调用安卓关闭web页面
      }

四、补充功能

调用原生关闭函数

let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
            jsObj.webClose(); // 调用原生app的函数
          }
      if (isIOS) {
         window.webkit.messageHandlers.webClose.postMessage();
          }

调用原生打电话

let u = navigator.userAgent
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let phone = app._data.detail.driver_mobile
            if (isAndroid) {
                jsObj.callPhone(JSON.stringify(phone));
            }
            if (isIOS) {
                window.webkit.messageHandlers.callPhone.postMessage(JSON.stringify(phone));
            }

调用原生跳转

let u = navigator.userAgent
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
        jsObj.jump(JSON.stringify(obj)); // 调用原生app的函数
    }
    if (isIOS) {
        window.webkit.messageHandlers.jump.postMessage(JSON.stringify(obj));
    }

调用原生微信分享

    sharesClick() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.webkit.messageHandlers.showShareBtn.postMessage({
          link: this.link,
          userNickName: this.userNickName,
          userAvatar: this.userAvatar,
        });
      } else if (/(Android)/i.test(navigator.userAgent)) {
        $App.enterInto(this.userNickName, this.userAvatar, this.link);
      }
    },

原文链接
https://blog.csdn.net/weixin_44490109/article/details/107547144
https://www.jianshu.com/p/c35b12ffc0f1