在微信小程序和APP中使用H5时,如何做事件交互?
微信小程序使用web view嵌入H5,使用方式见微信文档
使用中要注意的:
1. 标签嵌入式全屏的,基本上就不能再在页面上加其他的功能了
2. 文档中提到的bindmessage属性,很鸡肋😓:文档上说会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。 实际业务上的交互只能靠wx.miniProgram.navigateTo带着交互参数跳转某个页面实现
H5端代码
// 引入微信jssdk
// 交互方法,例如点击了按钮
// 判断当前处于什么环境,根据不同环境做对应的处理
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
}