携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

小程序web-view和h5通信方案

方案一：

用户自行读取H5结果页url，自行处理

缺点：

1. 需等待已跳转至结果页后才处理
2. 如果需要返回小程序，只能自行调微信jssdk，流程复杂
3. 需要改造h5的结果

优点：

无需我们的H5处理；

方案二：

H5 内navagateTo/navagateBack

具体实现：

1. H5链接服务端处理，区分小程序还是h5环境；如果是小程序，强制传入该参数
2. H5内引入jssdk，检测是否在小程序环境内，获取到结果后navagateTo到小程序调用页面
3. 小程序内收到回退拉取验证结果

缺点：

1. 需要小改造H5
2. navagateTo回到小程序，需要用户传入跳转小程序路径
3. wx.miniProgram.navigateTo少部分机型上存在无法跳转回小程序的小bug（社区反馈，有风险）
4. 服务端需要处理参数

优点：

1. 接入无需太多代码

2. web-view不需要其他处理

3. H5内改造量不大

方案三💗：

监听src的变化（需要query）

具体实现：

1. H5内判断是否在小程序环境
2. 小程序内 bindload="load" 监听路由
3. H5内处理不同步骤路由加对应结果的query参数

缺点：

1. 需要接入小程序处理load方法，监听正确的参数变化
2. 需要改造H5不同步骤的参数

优点：

1. 流程比较清晰；
2. 不影响正常H5;
3. 服务端无改造；
4. 客户小程序内自行处理，较灵活

通信流程图

 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 
})
复制代码

其他资料：

web-view

jssdk