小程序web-view和h5通信

308 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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