運(yùn)用場(chǎng)景描述：在H5端點(diǎn)擊頁(yè)面的發(fā)送按鈕通知APP打開(kāi)微信分享功能，交互寫在發(fā)送事件函數(shù)中，調(diào)起微信分享功能由app端操作

//給到app的json參數(shù)
let jsonData = {
    reload: this.$route.query.no_reload ? false : true, //true需要重新加載返回列表頁(yè)，false不需要（根據(jù)需求定）
    title: '上門試駕邀請(qǐng)', // 分享標(biāo)題
    desc: '邀請(qǐng)您試駕體驗(yàn)xxxx', // 分享描述
    link: 'https://xxxxx', // 分享鏈接
    imgUrl:  '', // 分享圖標(biāo)
}

多記錄一點(diǎn)，因?yàn)閍pp那邊使用的是友盟的分享，分享的圖片鏈接如果是http的，在IOS中圖片會(huì)顯示錯(cuò)誤！?。∪绻溄渝e(cuò)誤不存在可能導(dǎo)致調(diào)不起分享。

//

判斷設(shè)備

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有一個(gè)內(nèi)容交互控制器，該對(duì)象提供了通過(guò)JS向WKWebView發(fā)送消息的途徑。需要設(shè)置MessageHandler，大家把這個(gè)功能簡(jiǎn)稱為MessageHandler。

IOS具體實(shí)現(xiàn)參考：鏈接

這里只說(shuō)js調(diào)用

// window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
// 這個(gè)name就是設(shè)置MessageHandler的第一個(gè)參數(shù)，與IOS約定的方法名
// messageBody 必須是json格式，為空時(shí)傳null
window.webkit.messageHandlers.ShareContract.postMessage(jsonData);

JS與IOS交互方式二：WebViewJavascriptBridge交互 攔截url做事件處理，如果要傳參數(shù)，不建議用這種

//模擬 h5頁(yè)面在app端的跳轉(zhuǎn) 
let data = '{"type": "basisTongji", "url":"' + "https://xxxx/basisTongji.html" + "}";
window.WebViewJavascriptBridge.javaScrpitRresponseJson(data);

Android端交互

image.png

冒號(hào)前面區(qū)分是什么功能，冒號(hào)后面是接收的參數(shù)

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

運(yùn)用場(chǎng)景二：登錄失效的情況下，通知APP端，需要跳轉(zhuǎn)到登錄頁(yè)面

• exit:true是和安卓約定的功能名及參數(shù)
• logout 是和IOS約定的方法名，注意當(dāng)值為空的時(shí)候，需要傳null，不能什么都不寫，不然會(huì)走代理。。。(ios說(shuō)的)

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