「前端早讀君009」快速小程序開發之微信小程序內嵌 H5

今日勵志語

要接受本身行動所帶來的責任而非本身成就所帶來的榮耀。

前言

微信小程序中能夠直接運行 web 頁面，這一新組件 web-view 的產生，可能直接致使小程序數量迎來一波高峯。本篇博文將從業務選型，微信小程序後臺配置，使用 web-view 完成登陸業務以及在實戰中如何調試一次性帶你感覺小程序內嵌 H5 的風采，幫你更有底氣的使用微信小程序新組件 web-view。

技術選擇

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

上表是從原有 H5 轉類似業務邏輯的微信小程序的方案路線優缺點對比，基於時間的限制以及當前主流多端編譯的可靠性考量，最終團隊認爲經過使用小程序組件 web-view 內嵌 H5 的方式比較適合當前的開發需求。 web-view 的兼容性問題主要是要在基礎庫在1.6.4+及以上才能夠用，而微信官方統計基礎庫在1.6.4+ 的覆蓋率已達 95% 以上，這個指標也符合產品大人的要求，因而便愉快的選擇了 web-view 內嵌 H5 的技術方案。

H5 和小程序技術對比

從上表中能夠對比出 H5 相較於小程序的優缺點，方便各位前端大大評估需求。尤其重要的是由於小程序封裝的比較嚴重因此小程序開發的靈活性沒有 H5 那麼高，這就要咱們注意對交互設計的評估。

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

• 配置域名

業務域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。這裏要特別注意的是假如 H5 中有內嵌的 iframe 也要配置進去
這裏須要服務端的朋友配合一下，將校驗文件放置在將要嵌套的業務域名的根目錄。因此要注意後端是否能夠支持，不然會有各類扯皮的問題

• 選擇基礎庫

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

• H5 中引入微信的 jssdk,其中包含了h5和小程序直接的通信方法

web-view 與小程序的通訊

官方給出了兩種通訊方法（以下圖所示） 一、postMessage 通訊 在 H5 中須要先用 wx.miniProgram.postMessage 接口，把須要分享的信息，推送給小程序。 在用戶點擊了小程序後退、組件銷燬、分享這些特殊事件以後，小程序頁面經過 bindmessage 綁定的函數讀取 post 信息。 二、設置 web-view 組件的 URL 通訊 H5 跳轉小程序：

toWeixin() {
 wx.miniProgram.navigateTo({url: '/pages/myWelfare/myWelfare'});
}

小程序跳轉 H5： 首先在 .wxml 中引入 web-view 組件

<view>
<web-view src="{{url}}" ></web-view>
</view>

以後在小程序的 js 文件中設置經過 URL 以問號傳參的方式傳入參數到 H5 中

if(!option.page){
      this.setData({
        url: `${this.data.url}?${test}`
      });
    } else {
      this.setData({
        url: `${this.data.url}${option.page}?${test}`
      });
    }

小程序內嵌 H5 登陸實例

小程序登陸實現方案流程圖：

如上圖所示：整個登陸的 cookie 的傳遞經歷了四個步驟：

在小程序登陸後獲取到後端傳遞的 cookie 並保存
經過 web-view 中的 url 傳遞到 H5 中
在 H5 中獲得傳遞的值並寫到 cookie 中
在訪問接口的時候帶上 cookie 二、從微信小程序響應頭中得到 cookie 存到 storage 中：
首先在登陸頁獲取到響應頭中的登陸 cookie 放到 storage 中

wx.setStorageSync('cookie', res.header["Set-Cookie"]);

在微信小程序中每次請求接口的時候，將 storage 中的 cookie 取出來，放到請求頭中，若是傳入不正確或者沒有傳入 cookie 值，後臺將返回 errorCode 爲 3002 ，此時前端跳轉到登陸頁面。

var headerCookie = wx.getStorageSync('cookie');
   wx.request({
            url: murl,
            data: parameter.data || {},
            header: {
               'Cookie': headerCookie
            },
            method: parameter.method || 'POST',
            success: function(res) {
            if(res.data.code == 3002) {
                    wx.redirectTo({
                        url: '../login/login'
                    })
                } else {
                    parameter.success && parameter.success(res);
                }

            }

三、得到 cookie 並拼接到 URL 中
首先在 web-view 頁面獲取 cookie ,並匹配到須要傳遞的字段，以後將此字段放到 url 中經過問號傳參的方式傳遞到 H5 中

try {
      var value = wx.getStorageSync('cookie');
      if (value) {
        test = value.match(new RegExp("(^| )"+"jxi-m-sid"+"=([^;]*)(;|$)"))[2] ;
      }
    }

url: 'https://www.xxx.com#',
    if(!option.page){
      this.setData({
         //在這裏放入傳遞的字段（如test）
         url: `${this.data.url}?${test}`
      });
    } else {
      this.setData({
         //在這裏放入傳遞的字段,也能夠拼接更多的信息（如option.page）
         url: `${this.data.url}${option.page}?${test}`
      });
    }

四、獲取 cookie 並在 H5 中使用 在 H5 中獲取 cookie 值,並帶入 cookie ,注意 domain 和 path 的設置，這兩個值必須都有：

let isDebug = (window.location.href).indexOf('myf') > -1;
let host = isDebug ? 'jd' : 'jdf';
//得到傳遞的字段
let c =window.location.href.split('?')[1];
//設置cookie
document.cookie = `jxi-m-sid=${c};domain=${host};path=/`;

小程序內嵌 H5 調試解決方案

• 關於調試效果緩存的問題 小程序的更新機制即當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過必定時間後（目前是 5 分鐘）會被微信主動銷燬。 小程序銷燬後再從新啓動時若是發現有新版本，將會異步下載新版本的代碼包，並同時用客戶端本地的包進行啓動，即新版本的小程序須要等下一次銷燬後再從新啓動時纔會應用上。
• 內嵌 H5 調試問題 由於微信小程序開發者工具中並無提供內嵌 H5 的調試工具，因此咱們能夠採起如下方法調試

在 H5 開發的時候，咱們能夠在微信小程序開發者工具中找到 web-view 傳遞給 H5 的 URL 連接將此連接黏貼到瀏覽器中便可像平時開發 H5 同樣調試
對於手機端 H5 的測試調試能夠在 H5 中引入 vconsole 這個插件來調試程序，他可讓咱們看到接口狀況以及 H5 中的日誌。

總結

看到這裏，咱們分別從

• web-view 技術的優缺點
• web-view 微信小程序配置系列問題
• web-view 與小程序的通訊
• 小程序內嵌 H5 登陸實例
• 小程序內嵌 H5 調試解決方案

五個方面梳理了關於微信小程序 webview 組件的使用。 固然，微信小程序組件 web-view 還並不完善，其中很難實現一些特殊的交互，好比返回按鈕返回的頁面只能是上一級不能是任意自定義的頁面等問題，這就須要咱們更好的溝通以及規劃交互設計，同時反饋並等待微信小程序官方的更新和支持。

文章來源：京東設計中心

打開微信掃一掃關注早讀君，天天早晨爲你推送前端知識，度過擠地鐵坐公交的時光