在微信小程序和APP中嵌入H5時，如何交互？

在微信小程序和APP中使用H5時，如何作事件交互？

---

微信小程序使用web view嵌入H5，使用方式見微信文檔
使用中要注意的：
1. <web-view>標籤嵌入式全屏的，基本上就不能再在頁面上加其餘的功能了
2. 文檔中提到的bindmessage屬性，很雞肋😓：文檔上說會在特定時機（小程序後退、組件銷燬、分享）觸發並收到消息。 實際業務上的交互只能靠wx.miniProgram.navigateTo帶着交互參數跳轉某個頁面實現

---

H5端代碼

// 引入微信jssdk

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// 交互方法，例如點擊了按鈕

// 判斷當前處於什麼環境，根據不一樣環境作對應的處理

if(window.\_\_wxjs\_environment === 'miniprogram'){

    // 當前是微信小程序環境

    wx.miniProgram.navigateTo({url: '/XXX/XXXX?id=1'})

} else if (isAndroidApp()){

    // 其中"app"是客戶端注入的實例，可自定義；「myMethod」是用來交互的方法，不一樣事件可,自定義。

    app.myMethod({id: 1})

} else if (isiOSApp()){

    // 「myMethod」是用來交互的方法，不一樣事件,可自定義。其中參數若是爲空時，仍是要傳個null

    window.webkit.messageHandlers.myMethod.postMessage({id: 1});

}

判斷當前是不是Android客戶端打開

function isAndroidApp() {

    var ue = navigator.userAgent

    // XXX是和APP的協議名稱

    return (ue.match(/XXXX\\/Android/i) == "XXXX/Android") ? true : false

}

判斷當前是不是Android客戶端打開

function isiOSApp() {

    var ue = navigator.userAgent

    // XXX是和APP的協議名稱

    return (ue.match(/XXXX\\/iOS/i) == "XXXX/iOS") ? true : false

}