微信小程序中可以直接運行 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 與小程序的通信
官方給出了兩種通信方法(如下圖所示) 1、postMessage 通信 在 H5 中需要先用 wx.miniProgram.postMessage 接口，把需要分享的信息，推送給小程序。 在用戶點擊了小程序后退、組件銷毀、分享這些特殊事件之后，小程序頁面通過 bindmessage 綁定的函數讀取 post 信息。 2、設置 web-view 組件的 URL 通信 H5 跳轉小程序：
toWeixin() {
wx.miniProgram.navigateTo({url: '/pages/myWelfare/myWelfare'});
}
小程序跳轉 H5： 首先在 .wxml 中引入 web-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 登錄實例
小程序登錄實現方案流程圖：
clipboard.png
如上圖所示：整個登錄的 cookie 的傳遞經歷了四個步驟：
在小程序登錄后獲取到后端傳遞的 cookie 并保存
通過 web-view 中的 url 傳遞到 H5 中
在 H5 中得到傳遞的值并寫到 cookie 中
在訪問接口的時候帶上 cookie 2、從微信小程序響應頭中獲得 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);
}
}
3、獲得 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}`
});
}
4、獲取 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 還并不完善，其中很難實現一些特殊的交互，比如返回按鈕返回的頁面只能是上一級不能是任意自定義的頁面等問題，這就需要我們更好的溝通以及規劃交互設計，同時反饋并等待微信小程序官方的更新和支持。