微信小程序以內嵌網頁(webview)

設置權限

要在小程序中訪問外部網頁，須要先設置容許訪問的業務網站的域名。讓咱們先登陸小程序平臺管理後臺頁面，進入「設置」 => "開發設置"，能夠看到這邊多出來了一塊「業務域名」的設置區域：

 

 

點擊「開始配置」按鈕，彈出一個窗口，咱們能夠在這個窗口中添加一個或多個你要在小程序中訪問的域名。固然，不是全部的域名下的網頁你的小程序均可以訪問，只有那些你能夠「掌控」的網站，你才能夠訪問！你須要在這個窗口裏下載「校驗文件」，並把這個校驗文件上傳到你的網站的根目錄，供小程序平臺進行驗證，驗證經過了才能成功添加域名。

 

 

使用web-view組件顯示HTML頁面

<web-view>組件的使用就比較簡單了，相似HTML裏面的<iframe>標籤：

<web-view src="https://www.xxxxxxxxx.com/index.html" />

就這樣，HTML頁面就能夠在小程序中顯示了。

可是，和<iframe>能夠嵌入到頁面的任意部分不一樣的是，小程序的這個<web-view>老是自動鋪滿整個頁面，且每一個頁面只能有一個<web-view>，它會覆蓋其餘組件。也就是說，沒有辦法實現小程序界面組件和<web-view>頁面混排的狀況，這點要注意。

在內嵌的HTML頁面中跳轉回小程序

若是要在已經經過<web-view>嵌入小程序的網頁中，跳轉到小程序中的其餘頁面(Page)，能夠引入微信的一個JSSDK，使用它提供的方法來實現相關跳轉功能。網頁代碼相似以下所示：

<!-- html代碼中引入JS SDK -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

<script>
// 跳轉到小程序的一個頁面
wx.miniProgram.navigateTo({url: '/path/to/page'})
</script>

(不過很遺憾，仍是沒有辦法從一個網頁中跳轉到一個指定的小程序。哈哈，我也就瞎想一想~~)

總結

這一內嵌網頁的功能，也算順應了廣大開發者的要求，解決了很大一部分開發者的痛點。在混合開發方面的加強，爲小程序的功能開發提供了很多靈活性和便利性。