小程序里嵌H5的 WebView 集成方案
数据流可以简化为:
用户在小程序里点击某个业务入口;
小程序调后端「获取 H5 跳转地址」接口;
后端用当前 Session 用户信息生成带加密参数的 H5 URL,返回给小程序;
小程序跳转到通用 WebView 页,
src设为该 URL;H5 打开后解析 URL 参数,用其中的信息完成静默登录或业务态恢复;
需要支付、返回等时,H5 通过
postMessage等与小程序通信,由小程序调原生能力再回传结果。
小程序与 H5 的双向通信
H5 → 小程序:
wx.miniProgram.navigateBack({ delta: 1 })返回、wx.miniProgram.navigateTo({ url })跳转小程序内页(如支付页)。小程序 → H5:微信侧由小程序在
onShow等时机通过postMessage下发;H5侧接收即可。
登录与用户信息
静默登录:H5 落地页 URL 中已带加密的
info(或类似参数),H5 先解密,再调后端「用该信息换 Session / 用户信息」的接口,完成登录态建立。带 code 的授权:若采用 code 换 openid 等流程,可在 URL 上带
code,H5 用code调后端换用户信息并写入本地状态。后续请求都带 Cookie(同域)或按后端要求带 token,与小程序侧共用同一套后端鉴权即可。
小程序里嵌H5的 WebView 集成方案
http://localhost:8090/archives/xiao-cheng-xu-li-qian-h5de-webview-ji-cheng-fang-an