小程式web-view元件

不久前微信小程式釋出了web-view元件，這個訊息在各個圈裡引起不小的漣漪。近期正好在做小程式的專案，便研究了一下這個讓大家充滿期待的元件。

1，web-view這個元件是什麼鬼？

官網的介紹：web-view 元件是一個可以用來承載網頁的容器，會自動鋪滿整個小程式頁面。簡單來說，這個元件是一個和當前頁面一樣大小的容器，容器裡顯示的是屬性src引用的url的內容。類似於html中的iframe框架。不同的是iframe可以自定義大小邊框等樣式，webview自動鋪滿整個小程式頁面。

2，這個元件能給我們帶來什麼？

小程式的頁面開發雖然和HTML開發類似，但小程式有自己定義的標籤，且不支援HTML標籤。這樣HTML那些豐富的標籤在小程式開發中完全無用武之地，也就限制了頁面的表現形式。對於已經開發了移動網站的專案來說，若想要開發個小程式版本，就只能優雅降級重新開發了，有了這個元件，搭個框架簡單一行程式碼就夠了。更新小程式版本的話，需要微信稽核，如果把內容放在嵌入的網頁上，熱更新搞定。除了這些，網站上那些運營方案也讓大家躍躍欲試。

3，web-view元件使用

雖然開放了這個元件，但使用時有很多限制：

使用限制：對個人型別和海外型別的小程式暫不支援

指向域名的限制：域名必須為https協議且經過ICP備案

域名修改限制：一個小程式最多可新增20個域名，一年可修改50次

小程式基礎庫限制：基礎褲1.6.4以上版本支援這個元件，低版本需做相容

注：配置域名時，並不是隨便一個備案過的https就可以的，需要從配置後臺下載校驗檔案放在域名根目錄下，驗證通過後才能配置成功。

克服以上重重難關後，在小程式專案中新建頁面，配置路徑，頁面加入以下程式碼：

對，就這簡單的一行程式碼就可以讓網站的內容顯示在小程式裡。

4，webview網頁和小程式的聯絡

小程式提供了webview網頁中使用的JSSDK檔案，引用方式如下：

引入SDK後可以呼叫小程式JSSDK提供的介面，雖然不如小程式原生介面豐富，也能獲取到裝置網路狀態、地理位置等資訊，另外還提供了微信掃一掃、搖一搖、長按識別、拍照等介面。

截止當前版本，小程式基本不能獲取網頁的資料，只有在使用者分享的時候，可以從返回的引數中獲取web-view元件當前顯示的頁面路徑。

由上可見webview網頁和小程式間資料的聯絡非常弱。還有沒有可以傳輸更多資料的方式呢？不死心又驗證了兩者的localStorage，結果是並不互通。

5，web-view元件其他表現

Q：web-view元件對網頁重定向的表現

A：如果重定向的域名在當前小程式的業務域名下，可以重定向（301、301均可）；否則提示無法開啟

Q：開啟web-view元件頁面，其他頁面是否被銷燬

A：頁面是否被銷燬，不受當前頁面是否為web-view元件頁的影響。另外，小程式tab頁面有切換時只加載一次並快取頁面的特性，這一特性對web-view元件頁面同樣適用。若將web-view元件頁設定為tab頁面，web-view元件頁和載入的業務域名網站同樣會被快取，且設定為tab頁的web-view元件頁會保留tab元件顯示。

Q：webview頁面通過scheme開啟手機app的表現

A：小程式並不能正確解析app配置的scheme，所以也不能通過scheme開啟app。若通過scheme做跳轉，在開發者工具中除錯時會出現“ERR_UNKNOWN_URL_SCHEME”的錯誤，在移動客戶端上表現為沒有反應。

3-2） 對3D網站支付不怎麼好
如果你的網站使用了大量的js 3D效果，
你的網站改成小程式後，
有些效果無法顯示，
因為小程式在自己的框架對js做了封閉，
有些js函式無法使用，
特別是3D方面的。

如果你的網站是全景圖，3D動畫，網頁遊戲之類的，
要慎重考慮。3-3） 效能有損失
網站小程式web-view元件，
需要把網頁所有的資源載入過來，
而且這些資源是在你自己的web伺服器上，
小程式載入過來後再渲染，
效能會損失，
如果你的小程式使用者數量巨大，
特別明顯。
 

6，總結

小程式和網頁間資料互動還太弱，對小程式第三方元件開發者來說並不能很好發揮作用。比如在對小程式資料做統計時，並不能很好的收集使用者在webview頁面的行為。如果小程式和webview網頁的儲存能打通，將帶來更多可能性，但微信對每個小程式Storage設定的上限為10MB，而且其儲存型別和瀏覽器也並不一致，所以打通的可能性並不大。如果在小程式中能監聽到webview頁面內url請求，也許可以嘗試像hybrid一樣通過url傳遞資料做統計。期待小程式在web-view元件上能開放更多功能～