小程式嵌套h5頁面_快速小程式開發之微信小程式内嵌 H5

簡介：微信小程式中可以直接運作 web 頁面，這一新元件 web-view 的産生，可能直接導緻小程式數量迎來一波高峰。本篇博文将從業務選型，微信小程式背景配置，使用 web-view 完成登入業務以及在實戰中如何調試，一次性帶你感受小程式内嵌 H5 的風采，幫你更有底氣的使用微信小程式新元件 web-view。

微信小程式

一、技術選擇：

1.H5 轉成小程式方案路線優缺點對比：

H5 轉成小程式方案路線優缺點對比

上表是從原有 H5 轉相似業務邏輯的微信小程式的方案路線優缺點對比，基于時間的限制以及目前主流多端編譯的可靠性考量，最終團隊認為通過使用小程式元件 web-view 内嵌 H5 的方式比較适合目前的開發需求。 web-view 的相容性問題主要是要在基礎庫在1.6.4+及以上才可以用，而微信官方統計基礎庫在1.6.4+ 的覆寫率已達 95% 以上，這個名額也符合産品大人的要求，于是便愉快的選擇了 web-view 内嵌 H5 的技術方案。

2.H5 跳轉小程式：

H5 跳轉小程式

從上表中可以對比出 H5 相較于小程式的優缺點，友善各位前端大大評估需求。尤為重要的是因為小程式封裝的比較嚴重是以小程式開發的靈活性沒有 H5 那麼高，這就要我們注意對互動設計的評估。

二、web-view 微信小程式配置系列問題

1、配置域名

注意：業務域名中配置的就是小程式以及 H5 和 H5 中引用 iframe 的域名。這裡要特别注意的是假如 H5 中有内嵌的 iframe 也要配置進去

這裡需要服務端的朋友配合一下，将校驗檔案放置在将要嵌套的業務域名的根目錄。是以要注意後端是否可以支援，否則會有各種扯皮的問題

2、選擇基礎庫

開發的時候不要忘記配置微信小程式的基礎庫，注意 web-view 要在基礎庫1.6.4以上的版本庫才能使用

3、H5 中引入微信的 js

引入的 js 寫的是 H5 跳轉微信小程式的 API 實作，這個在H5首頁中引入即可，如下圖示例

H5 中引入微信的 js

三、web-view 與小程式的通信

官方給出了兩種通信方法(如下圖所示)

1、postMessage 通信

在 H5 中需要先用 wx.miniProgram.postMessage 接口，把需要分享的資訊，推送給小程式。

在使用者點選了小程式後退、元件銷毀、分享這些特殊事件之後，小程式頁面通過 bindmessage 綁定的函數讀取 post 資訊。

2、設定 web-view 元件的 URL 通信

H5 跳轉小程式：

H5 跳轉小程式

小程式跳轉 H5：

首先在 .wxml 中引入 web-view 元件

引入 web-view 元件

之後在小程式的 js 檔案中設定通過 URL 以問号傳參的方式傳入參數到 H5 中

URL傳參

四、小程式内嵌 H5 登入執行個體

1、小程式登入實作方案流程圖：

流程圖

如上圖所示：整個登入的 cookie 的傳遞經曆了四個步驟：在小程式登入後擷取到後端傳遞的 cookie 并儲存

通過 web-view 中的 url 傳遞到 H5 中

在 H5 中得到傳遞的值并寫到 cookie 中

在通路接口的時候帶上 cookie 2、從微信小程式響應頭中獲得 cookie 存到 storage 中：

首先在登入頁擷取到響應頭中的登入 cookie 放到 storage 中

登入 cookie 放到 storage

在微信小程式中每次請求接口的時候，将 storage 中的 cookie 取出來，放到請求頭中，如果傳入不正确或者沒有傳入 cookie 值，背景将傳回 errorCode 為 3002 ，此時前端跳轉到登入頁面。

請求接口攜帶cookie

3、獲得 cookie 并拼接到 URL 中

首先在 web-view 頁面擷取 cookie ,并比對到需要傳遞的字段，之後将此字段放到 url 中通過問号傳參的方式傳遞到 H5 中：

4、擷取 cookie 并在 H5 中使用

在 H5 中擷取 cookie 值,并帶入 cookie ,注意 domain 和 path 的設定，這兩個值必須都有：

擷取 cookie 并在 H5 中使用

五、小程式内嵌 H5 調試解決方案

1、關于調試效果緩存的問題

小程式的更新機制即當小程式進入背景，用戶端會維持一段時間的運作狀态，超過一定時間後(目前是 5 分鐘)會被微信主動銷毀。

小程式銷毀後再重新啟動時如果發現有新版本，将會異步下載下傳新版本的代碼包，并同時用用戶端本地的包進行啟動，即新版本的小程式需要等下一次銷毀後再重新啟動時才會應用上。

2、内嵌 H5 調試問題

因為微信小程式開發者工具中并沒有提供内嵌 H5 的調試工具，是以我們可以采取以下方法調試在 H5 開發的時候，我們可以在微信小程式開發者工具中找到 web-view 傳遞給 H5 的 URL 連結将此連結黏貼到浏覽器中即可像平時開發 H5 一樣調試

對于手機端 H5 的測試調試可以在 H5 中引入 vconsole 這個插件來調試程式，他可以讓我們看到接口情況以及 H5 中的日志。

六、總結

看到這裡，我們分别從web-view 技術的優缺點

web-view 微信小程式配置系列問題

web-view 與小程式的通信

小程式内嵌 H5 登入執行個體

小程式内嵌 H5 調試解決方案