今日勵(lì)志語

要接受自己行動(dòng)所帶來的責(zé)任而非自己成就所帶來的榮耀。

 

前言

微信小程序中可以直接運(yùn)行 web 頁面，這一新組件 web-view 的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型，微信小程序后臺(tái)配置，使用 web-view 完成登錄業(yè)務(wù)以及在實(shí)戰(zhàn)中如何調(diào)試一次性帶你感受小程序內(nèi)嵌 H5 的風(fēng)采，幫你更有底氣的使用微信小程序新組件 web-view。

 

技術(shù)選擇

H5 轉(zhuǎn)成小程序方案路線優(yōu)缺點(diǎn)對(duì)比

上表是從原有 H5 轉(zhuǎn)相似業(yè)務(wù)邏輯的微信小程序的方案路線優(yōu)缺點(diǎn)對(duì)比，基于時(shí)間的限制以及當(dāng)前主流多端編譯的可靠性考量，最終團(tuán)隊(duì)認(rèn)為通過使用小程序組件 web-view 內(nèi)嵌 H5 的方式比較適合當(dāng)前的開發(fā)需求。 web-view 的兼容性問題主要是要在基礎(chǔ)庫在1.6.4+及以上才可以用，而微信官方統(tǒng)計(jì)基礎(chǔ)庫在1.6.4+ 的覆蓋率已達(dá) 95% 以上，這個(gè)指標(biāo)也符合產(chǎn)品大人的要求，于是便愉快的選擇了 web-view 內(nèi)嵌 H5 的技術(shù)方案。

 

H5 和小程序技術(shù)對(duì)比

 

 

從上表中可以對(duì)比出 H5 相較于小程序的優(yōu)缺點(diǎn)，方便各位前端大大評(píng)估需求。尤為重要的是因?yàn)樾〕绦蚍庋b的比較嚴(yán)重所以小程序開發(fā)的靈活性沒有 H5 那么高，這就要我們注意對(duì)交互設(shè)計(jì)的評(píng)估。

 

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

配置域名

業(yè)務(wù)域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。這里要特別注意的是假如 H5 中有內(nèi)嵌的 iframe 也要配置進(jìn)去

這里需要服務(wù)端的朋友配合一下，將校驗(yàn)文件放置在將要嵌套的業(yè)務(wù)域名的根目錄。所以要注意后端是否可以支持，否則會(huì)有各種扯皮的問題

 

選擇基礎(chǔ)庫

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

 

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

 

 

 

web-view 與小程序的通信

官方給出了兩種通信方法（如下圖所示） 1、postMessage 通信 在 H5 中需要先用 wx.miniProgram.postMessage 接口，把需要分享的信息，推送給小程序。 在用戶點(diǎn)擊了小程序后退、組件銷毀、分享這些特殊事件之后，小程序頁面通過 bindmessage 綁定的函數(shù)讀取 post 信息。 2、設(shè)置 web-view 組件的 URL 通信 H5 跳轉(zhuǎn)小程序：

 

toWeixin() {

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

}

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

 

<view>

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

</view>

之后在小程序的 js 文件中設(shè)置通過 URL 以問號(hào)傳參的方式傳入?yún)?shù)到 H5 中

 

if(!option.page){

      this.setData({

        url: `${this.data.url}?${test}`

      });

    } else {

      this.setData({

        url: `${this.data.url}${option.page}?${test}`

      });

    }

小程序內(nèi)嵌 H5 登錄實(shí)例

小程序登錄實(shí)現(xiàn)方案流程圖：

 

clipboard.png

 

如上圖所示：整個(gè)登錄的 cookie 的傳遞經(jīng)歷了四個(gè)步驟：

 

在小程序登錄后獲取到后端傳遞的 cookie 并保存

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

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

在訪問接口的時(shí)候帶上 cookie 2、從微信小程序響應(yīng)頭中獲得 cookie 存到 storage 中：

首先在登錄頁獲取到響應(yīng)頭中的登錄 cookie 放到 storage 中

 

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

在微信小程序中每次請(qǐng)求接口的時(shí)候，將 storage 中的 cookie 取出來，放到請(qǐng)求頭中，如果傳入不正確或者沒有傳入 cookie 值，后臺(tái)將返回 errorCode 為 3002 ，此時(shí)前端跳轉(zhuǎn)到登錄頁面。

 

 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 中通過問號(hào)傳參的方式傳遞到 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 的設(shè)置，這兩個(gè)值必須都有：

 

let isDebug = (window.location.href).indexOf('myf') > -1;

let host = isDebug ? 'jd' : 'jdf';

//獲得傳遞的字段

let c =window.location.href.split('?')[1];

//設(shè)置cookie

document.cookie = `jxi-m-sid=${c};domain=${host};path=/`;

小程序內(nèi)嵌 H5 調(diào)試解決方案

關(guān)于調(diào)試效果緩存的問題 小程序的更新機(jī)制即當(dāng)小程序進(jìn)入后臺(tái)，客戶端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài)，超過一定時(shí)間后（目前是 5 分鐘）會(huì)被微信主動(dòng)銷毀。 小程序銷毀后再重新啟動(dòng)時(shí)如果發(fā)現(xiàn)有新版本，將會(huì)異步下載新版本的代碼包，并同時(shí)用客戶端本地的包進(jìn)行啟動(dòng)，即新版本的小程序需要等下一次銷毀后再重新啟動(dòng)時(shí)才會(huì)應(yīng)用上。

內(nèi)嵌 H5 調(diào)試問題 因?yàn)槲⑿判〕绦蜷_發(fā)者工具中并沒有提供內(nèi)嵌 H5 的調(diào)試工具，所以我們可以采取以下方法調(diào)試

在 H5 開發(fā)的時(shí)候，我們可以在微信小程序開發(fā)者工具中找到 web-view 傳遞給 H5 的 URL 鏈接將此鏈接黏貼到瀏覽器中即可像平時(shí)開發(fā) H5 一樣調(diào)試

對(duì)于手機(jī)端 H5 的測試調(diào)試可以在 H5 中引入 vconsole 這個(gè)插件來調(diào)試程序，他可以讓我們看到接口情況以及 H5 中的日志。

 

總結(jié)

看到這里，我們分別從

 

web-view 技術(shù)的優(yōu)缺點(diǎn)

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

web-view 與小程序的通信

小程序內(nèi)嵌 H5 登錄實(shí)例

小程序內(nèi)嵌 H5 調(diào)試解決方案

五個(gè)方面梳理了關(guān)于微信小程序 webview 組件的使用。 當(dāng)然，微信小程序組件 web-view 還并不完善，其中很難實(shí)現(xiàn)一些特殊的交互，比如返回按鈕返回的頁面只能是上一級(jí)不能是任意自定義的頁面等問題，這就需要我們更好的溝通以及規(guī)劃交互設(shè)計(jì)，同時(shí)反饋并等待微信小程序官方的更新和支持。