携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情
小程序web-view和h5通信方案
方案一:
用户自行读取H5结果页url,自行处理
缺点:
- 需等待已跳转至结果页后才处理
- 如果需要返回小程序,只能自行调微信jssdk,流程复杂
- 需要改造h5的结果
优点:
无需我们的H5处理;
方案二:
H5 内navagateTo/navagateBack
具体实现:
- H5链接服务端处理,区分小程序还是h5环境;如果是小程序,强制传入该参数
- H5内引入jssdk,检测是否在小程序环境内,获取到结果后navagateTo到小程序调用页面
- 小程序内收到回退拉取验证结果
缺点:
- 需要小改造H5
- navagateTo回到小程序,需要用户传入跳转小程序路径
- wx.miniProgram.navigateTo少部分机型上存在无法跳转回小程序的小bug(社区反馈,有风险)
- 服务端需要处理参数
优点:
-
接入无需太多代码
-
web-view不需要其他处理
-
H5内改造量不大
方案三💗:
监听src的变化(需要query)
具体实现:
- H5内判断是否在小程序环境
- 小程序内 bindload="load" 监听路由
- H5内处理不同步骤路由加对应结果的query参数
缺点:
- 需要接入小程序处理load方法,监听正确的参数变化
- 需要改造H5不同步骤的参数
优点:
- 流程比较清晰;
- 不影响正常H5;
- 服务端无改造;
- 客户小程序内自行处理,较灵活
通信流程图
sequenceDiagram
participant cf as 小程序
participant hf as 小程序web-view
participant hb as H5
cf ->> cf: 输入H5 url
cf ->> hf: 进入web-view
hf ->> hf: load监听src变化
hb ->> hb: 完成下一步
hb ->> hb: src参数返回标志参数
hb ->> hf: 收到src变化
hf ->> cf: 处理结果展示
H5 判断当前是否在小程序环境
// H5页面内
function ready() {
console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) { document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
ready()
}
// 或者
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
})