不久前微信小程序發布了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就可以的，需要從配置后台下載校驗文件放在域名根目錄下，驗證通過后才能配置成功。
克服以上重重難關后，在小程序項目中新建頁面，配置路徑，頁面加入以下代碼：
<!-- wxml --> <!-- src地址是需要指向的網站地址 --> <web-view src="https://mp.weixin.qq.com/"></web-view>
對，就這簡單的一行代碼就可以讓網站的內容顯示在小程序里。
4，webview網頁和小程序的聯系
小程序提供了webview網頁中使用的JSSDK文件，引用方式如下：
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
引入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”的錯誤，在移動客戶端上表現為沒有反應。
6，總結
小程序和網頁間數據交互還太弱，對小程序第三方組件開發者來說並不能很好發揮作用。比如在對小程序數據做統計時，並不能很好的收集用戶在webview頁面的行為。如果小程序和webview網頁的存儲能打通，將帶來更多可能性，但微信對每個小程序Storage設置的上限為10MB，而且其存儲類型和瀏覽器也並不一致，所以打通的可能性並不大。如果在小程序中能監聽到webview頁面內url請求，也許可以嘗試像hybrid一樣通過url傳遞數據做統計。期待小程序在web-view組件上能開放更多功能～