不久前微信小程序發(fā)布了web-view組件渣窜，這個消息在各個圈里引起不小的漣漪塞弊。近期正好在做小程序的項目，便研究了一下這個讓大家充滿期待的組件腿准。
1贺嫂，web-view這個組件是什么鬼滓鸠？
官網(wǎng)的介紹：web-view 組件是一個可以用來承載網(wǎng)頁的容器，會自動鋪滿整個小程序頁面第喳。簡單來說糜俗，這個組件是一個和當(dāng)前頁面一樣大小的容器，容器里顯示的是屬性src引用的url的內(nèi)容曲饱。類似于html中的iframe框架悠抹。不同的是iframe可以自定義大小邊框等樣式，webview自動鋪滿整個小程序頁面扩淀。
2楔敌，這個組件能給我們帶來什么？
小程序的頁面開發(fā)雖然和HTML開發(fā)類似驻谆，但小程序有自己定義的標(biāo)簽卵凑，且不支持HTML標(biāo)簽。這樣HTML那些豐富的標(biāo)簽在小程序開發(fā)中完全無用武之地胜臊，也就限制了頁面的表現(xiàn)形式勺卢。對于已經(jīng)開發(fā)了移動網(wǎng)站的項目來說，若想要開發(fā)個小程序版本象对，就只能優(yōu)雅降級重新開發(fā)了黑忱，有了這個組件，搭個框架簡單一行代碼就夠了。更新小程序版本的話杨何，需要微信審核，如果把內(nèi)容放在嵌入的網(wǎng)頁上沥邻，熱更新搞定危虱。除了這些，網(wǎng)站上那些運(yùn)營方案也讓大家躍躍欲試唐全。
3埃跷，web-view組件使用
雖然開放了這個組件，但使用時有很多限制：
使用限制：對個人類型和海外類型的小程序暫不支持
指向域名的限制：域名必須為https協(xié)議且經(jīng)過ICP備案
域名修改限制：一個小程序最多可添加20個域名邮利，一年可修改50次
小程序基礎(chǔ)庫限制：基礎(chǔ)褲1.6.4以上版本支持這個組件弥雹，低版本需做兼容
注：配置域名時，并不是隨便一個備案過的https就可以的延届，需要從配置后臺下載校驗文件放在域名根目錄下剪勿，驗證通過后才能配置成功。
克服以上重重難關(guān)后方庭，在小程序項目中新建頁面厕吉，配置路徑，頁面加入以下代碼：
<!-- wxml -->
<!-- src地址是需要指向的網(wǎng)站地址 -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
對械念，就這簡單的一行代碼就可以讓網(wǎng)站的內(nèi)容顯示在小程序里头朱。
4，webview網(wǎng)頁和小程序的聯(lián)系
小程序提供了webview網(wǎng)頁中使用的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后可以調(diào)用小程序JSSDK提供的接口项钮，雖然不如小程序原生接口豐富，也能獲取到設(shè)備網(wǎng)絡(luò)狀態(tài)希停、地理位置等信息烁巫，另外還提供了微信掃一掃、搖一搖宠能、長按識別程拭、拍照等接口。
截止當(dāng)前版本棍潘，小程序基本不能獲取網(wǎng)頁的數(shù)據(jù)恃鞋，只有在用戶分享的時候，可以從返回的參數(shù)中獲取web-view組件當(dāng)前顯示的頁面路徑亦歉。
由上可見webview網(wǎng)頁和小程序間數(shù)據(jù)的聯(lián)系非常弱恤浪。還有沒有可以傳輸更多數(shù)據(jù)的方式呢？不死心又驗證了兩者的localStorage肴楷，結(jié)果是并不互通水由。
5，web-view組件其他表現(xiàn)
Q：web-view組件對網(wǎng)頁重定向的表現(xiàn)
A：如果重定向的域名在當(dāng)前小程序的業(yè)務(wù)域名下赛蔫，可以重定向（301砂客、301均可）泥张；否則提示無法打開
Q：打開web-view組件頁面，其他頁面是否被銷毀
A：頁面是否被銷毀鞠值，不受當(dāng)前頁面是否為web-view組件頁的影響媚创。另外，小程序tab頁面有切換時只加載一次并緩存頁面的特性彤恶，這一特性對web-view組件頁面同樣適用钞钙。若將web-view組件頁設(shè)置為tab頁面，web-view組件頁和加載的業(yè)務(wù)域名網(wǎng)站同樣會被緩存声离，且設(shè)置為tab頁的web-view組件頁會保留tab組件顯示芒炼。
Q：webview頁面通過scheme打開手機(jī)app的表現(xiàn)
A：小程序并不能正確解析app配置的scheme，所以也不能通過scheme打開app术徊。若通過scheme做跳轉(zhuǎn)本刽，在開發(fā)者工具中調(diào)試時會出現(xiàn)“ERR_UNKNOWN_URL_SCHEME”的錯誤，在移動客戶端上表現(xiàn)為沒有反應(yīng)赠涮。
6盅安，總結(jié)
小程序和網(wǎng)頁間數(shù)據(jù)交互還太弱，對小程序第三方組件開發(fā)者來說并不能很好發(fā)揮作用世囊。比如在對小程序數(shù)據(jù)做統(tǒng)計時别瞭，并不能很好的收集用戶在webview頁面的行為。如果小程序和webview網(wǎng)頁的存儲能打通株憾，將帶來更多可能性蝙寨，但微信對每個小程序Storage設(shè)置的上限為10MB，而且其存儲類型和瀏覽器也并不一致嗤瞎，所以打通的可能性并不大墙歪。如果在小程序中能監(jiān)聽到webview頁面內(nèi)url請求，也許可以嘗試像hybrid一樣通過url傳遞數(shù)據(jù)做統(tǒng)計贝奇。期待小程序在web-view組件上能開放更多功能～
