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

jiezi

5 年前

微信小程序使用 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

}

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