最近做了不少小程序 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後加時間戳解決