微信小程式之內嵌網頁(webview)
阿新 • • 發佈:2018-12-06
設定許可權
要在小程式中訪問外部網頁,需要先設定允許訪問的業務網站的域名。讓我們先登入小程式平臺管理後臺頁面,進入“設定” => "開發設定",可以看到這邊多出來了一塊“業務域名”的設定區域:
點選“開始配置”按鈕,彈出一個視窗,我們可以在這個視窗中新增一個或多個你要在小程式中訪問的域名。當然,不是所有的域名下的網頁你的小程式都可以訪問,只有那些你可以“掌控”的網站,你才可以訪問!你需要在這個窗口裡下載“校驗檔案”,並把這個校驗檔案上傳到你的網站的根目錄,供小程式平臺進行驗證,驗證通過了才能成功新增域名。
使用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>
(不過很遺憾,還是沒有辦法從一個網頁中跳轉到一個指定的小程式。哈哈,我也就瞎想想~~)
總結
這一內嵌網頁的功能,也算順應了廣大開發者的要求,解決了很大一部分開發者的痛點。在混合開發方面的增強,為小程式的功能開發提供了不少靈活性和便利性。