小程序里嵌H5的 WebView 集成方案

角色

职责

小程序

提供 WebView 容器,打开 H5 的「入口页」;与 H5 双向通信(如支付结果回传)。

后端服务

根据当前用户与业务状态,生成「带鉴权信息的 H5 地址」;统一鉴权(如 Session)。

H5 应用

在 WebView 里运行,识别是否来自小程序,并按渠道做登录、返回、支付等适配。

原生 APP(可选)

同样通过 WebView 打开 H5,与小程序共用一套跳转逻辑,仅入口不同。

数据流可以简化为:

  1. 用户在小程序里点击某个业务入口;

  2. 小程序调后端「获取 H5 跳转地址」接口;

  3. 后端用当前 Session 用户信息生成带加密参数的 H5 URL,返回给小程序;

  4. 小程序跳转到通用 WebView 页src 设为该 URL;

  5. H5 打开后解析 URL 参数,用其中的信息完成静默登录或业务态恢复;

  6. 需要支付、返回等时,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
作者
Administrator
发布于
2025年08月22日
许可协议