最近做了不少小程序 webview 相关的需求，这里做一个总结记录
内嵌 H5 与原生小程序对比#
web-view标签要求基础库 1.6.4+
| 内嵌 H5 | 微信小程序 | |
|---|---|---|
| 离线能力 | 低 | 高 |
| 页面切换体验 | 中 | 高 |
| 首屏渲染速度 | 低 | 高 |
| 操作响应 | 高 | 低 |
| 开发灵活性 | 高 | 低 |
| 原生 API 支持 | 低 | 高 |
一般需要从开发灵活性和原生 API 能力支持上考虑技术选型，对应的是不同的交互设计。
此外使用内嵌 H5 还有以下优点：
- 自建账号体系可以与小程序 openid / UnionID 做关联绑定，实现免登
- 内嵌 H5 富文本，减少重复开发
- 内嵌 H5 更新方便，减少发布审核
webview 配置及初始化#
域名配置#
- 需要在小程序后台配置对应 H5 的业务域名（包括 H5 中内嵌的
iframe域名） - 服务端需要将校验文件放在配置业务域名的根目录下
初始化#
web-view要求小程序基础库 1.6.4+- H5 中引入 微信 JS-SDK
- 判断当前环境为小程序 webview，则异步加载 SDK 文件，初始化
wx.config - 实现 API 调用队列，缓存 SDK 异步加载过程中的调用，当 SDK 初始化完毕后再统一执行
- 判断当前环境为小程序 webview，则异步加载 SDK 文件，初始化
webview 通信#
postMessage#
小程序基础库 1.7.1+
H5 中调用 wx.miniProgram.postMessage 通知小程序，在用户 点击小程序后退、组件销毁、分享 这些特殊事件后，通过 web-view 标签的 bindmessage 回调事件监听数据（多次 postMessage 的数据会是一个数组）
设置 web-view 标签的 url#
- 通过设置
web-view标签的src属性将参数通过链接传递给 H5，比如通过小程序webview打开的 H5 走小程序登录后会将token从链接传递避免 H5 内二次登录 - 更新
url后会重新加载一次 H5 页面
WebSocket#
除了官方推荐的上述两种方式外还可以通过 WebSocket，需要 webview 组件内与 H5 连接同一个 socket，这种方式是绕过了小程序自身的限制，完全通过服务器进行通信，所以灵活性更高，相应地开发维护成本也更高
webview 调试#
- 通过小程序开发者工具设置自定义的启动页面与启动参数，进行预览或真机调试，线上环境需要走体验版验证
- H5 中引入
vConsole插件调试
注意#
web-view固定撑满全屏- 小程序 webview 后跟的 H5 链接需要进行
encodeURIComponent转义，组件内再通过decodeURIComponent解析 - H5 内调用小程序跳转路径必须
/开发，且在app.json中定义 - 内嵌
H5跳转小程序后原页面还有缓存，可通过url后加时间戳解决