H5与原生APP交互方式 (IOS及安卓)

运用场景描述：在H5端点击页面的发送按钮通知APP打开微信分享功能，交互写在发送事件函数中，调起微信分享功能由app端操作

//给到app的json参数
let jsonData = {
    reload: this.$route.query.no_reload ? false : true, //true需要重新加载返回列表页，false不需要（根据需求定）
    title: '上门试驾邀请', // 分享标题
    desc: '邀请您试驾体验xxxx', // 分享描述
    link: 'https://xxxxx', // 分享链接
    imgUrl:  '', // 分享图标
}

多记录一点，因为app那边使用的是友盟的分享，分享的图片链接如果是http的，在IOS中图片会显示错误！！！如果链接错误不存在可能导致调不起分享。

//

判断设备

device() {
  let u = window.navigator.userAgent;
  //android终端
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
  //ios终端
  let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  return {android: isAndroid, ios: isiOS}
},

JS与IOS交互方式一：WKScriptMessageHandler

WKWebView有一个内容交互控制器，该对象提供了通过JS向WKWebView发送消息的途径。需要设置MessageHandler，大家把这个功能简称为MessageHandler。

IOS具体实现参考：链接

这里只说js调用

// window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
// 这个name就是设置MessageHandler的第一个参数，与IOS约定的方法名
// messageBody 必须是json格式，为空时传null
window.webkit.messageHandlers.ShareContract.postMessage(jsonData);

JS与IOS交互方式二：WebViewJavascriptBridge交互 拦截url做事件处理，如果要传参数，不建议用这种

//模拟 h5页面在app端的跳转 
let data = '{"type": "basisTongji", "url":"' + "https://xxxx/basisTongji.html" + "}";
window.WebViewJavascriptBridge.javaScrpitRresponseJson(data);

Android端交互

image.png

冒号前面区分是什么功能，冒号后面是接收的参数

window.location.href = "ShareContract:" + JSON.stringify(jsonData);

运用场景二：登录失效的情况下，通知APP端，需要跳转到登录页面

• exit:true是和安卓约定的功能名及参数
• logout 是和IOS约定的方法名，注意当值为空的时候，需要传null，不能什么都不写，不然会走代理。。。(ios说的)

let deviceP = device()
if (deviceP.android) {
  window.location.href = "exit:true"
}
if (deviceP.ios) {
  //ios 交互
  window.webkit.messageHandlers.logout.postMessage(null);
}