微信小程式的元件web-view推出有一段時間了，這個元件的推出可以說是微信小程式開發的一個重要事件，讓微信小程式不會只束縛在微信圈子裡了，打開了一個口子，這個口子或許還比較小，但未來有無限可能。

簡單思考

1.通過web-view嵌入網頁功能開放,給微信小程式的發展帶來無限的可能，有好，也有壞，但利大於弊。好處在於讓微信的開放性更強，無論將來混合模式和還是純H5都有更多的機會在微信這個大舞臺有表演機會。壞處可能就是也打開了漏洞之門，會有更多魚龍混雜情況出現，這對微信的生態圈是個挑戰。

2.這個口子的開啟，再關上的可能性就不大了，而且只能越大越開，按照微信的節奏，微信應該有足夠把握才會開放這個功能，一切都在微信的掌控當中。

3.大量基於h5的網站或應用都會被“小程式化”，微信這個“大”瀏覽器成為移動網際網路海量流量的入口。微信搜尋會不會成為移動搜尋的絕對第一的搜尋？

4.對前端工程師這個職業帶來巨大的影響，降低了開發小程式的成本，讓前端工程師更關注網頁的架構，減小微信小程式的總體開發壓力。

5.讓熱部署、熱更新更為簡單，原來調整小程式風格和佈局需要重新稽核和釋出，這個週期有些長。有了web-view後，基於它開發的頁面，可以隨時改變外觀、佈局、資料。

簡單實踐

1.web-view裡內嵌的域名域名在小程式管理後臺設定業務域名，注意是業務域名，不是伺服器域名。另外個人小程式目前是沒有這個設定，因此也就無法使用這個功能。

2.一個頁面（wml）只能放置一個web-view，且會覆蓋其他的元件鋪滿螢幕，這時候你就當微信小程式是個瀏覽器好了。

3.web-view開啟的頁面必須是支援https的。

4。目前支援的jssdk介面還比較少，只支援“影象介面”,“音訊介面”,“智慧介面”,“裝置資訊”,“地理位置”,“搖一搖周邊”,“微信掃一掃”,“微信卡券”,“長按識別”，比如獲取使用者資訊，微信支付之類都不行，我猜以後會慢慢放開，逐步達到微信公眾號的開放程度。

5.支援iframe ，最開始還不需要域名白名單（業務域名），後來把這個漏洞給補上了，不給人濫用的口子了。如果你頁面上有google adsense可以要注意了，如果使用的蘋果版微信，用web-veiw開啟含有google adsense就會報錯（有的安卓偶爾也會報錯，原因不明），因為google adsense會虛擬一個iframe出來，google的域名自然不會在你的業務域名裡，就會報錯。

6.如果你的網站做了302跳轉，跳轉的域名也要設定在業務域名裡，別想著雞賊，能躲過這個配置。

7.通過內嵌網頁的功能可以實現站內連結的跳轉，當然不是小程式頁面的跳轉，而是在小程式裡開啟網頁，雖然感覺上有些彆扭，不過總算彌補了無法跳轉的麻煩，對資訊類的小程式是很好的功能。

8.通過在onload裡的options.url 引數可以解決分享web-view頁面載入的問題，不過需要對options.url 通過decodeURIComponent進行解碼，因為在分享轉發的時候，微信小程式對url的特殊字元進行了十六進位制編碼，因此需要通過decodeURIComponent來解碼，小程式的web-view頁面才能正常載入。

9.web-veiw頁面有時候無法觸發onShareAppMessage方法，原因不明。如果有非web-view的頁面和web-view同時存在的小程式，如果是非web-view的頁面跳轉到web-view頁面，在轉發web-view頁面的時候無法觸發onShareAppMessage方法。如果有非web-view的頁面和web-view同時存在的小程式，如果是非web-view的頁面跳轉到web-view頁面，在轉發web-view頁面的時候無法觸發onShareAppMessage方法。

10.web-veiw頁面 無法使用“開啟除錯”功能，如果需要看除錯，需要返回上一個不使用web-view的頁面檢視。

11.web-view 嵌入的網頁裡如果有白名單以外的域名連結，點選後會報錯。

12.web-view不支援微信支付，但web-view內嵌的頁面使用了公眾號授權的微信支付，是可以在內嵌的頁面使用微信支付的。換句話說，如果如果用web-view內嵌公眾號的h5頁面，利用JSSDK是可以使用微信支付的。

----------------------------------------------------------------

歡迎關注我的網站和微信公眾號，文章會在我的網站和微信公眾號上同步釋出。

我的網站：守望軒

微信公眾號名稱：守望軒

微信公眾號：iwatchlife

你也可以掃描或長按以下二維碼