微信小程序之內嵌網頁

微信小程序提供了新的開放能力!它終于開放了在小程序中內嵌HTML頁面的功能!從微信小程序基礎庫1.6.4開始,我們就可以在小程序內放置一個<web-view>組件來鏈接我們的HTML頁面了。在這之前,我們在小程序中沒有辦法整合我們已有的HTML程序(比如HTML5文章系統,商城系統等),只能使用小程序的方式重新開發一套,現在有了<web-view>就可以方便的集成這些網頁系統,為我們減少了可觀的工作量。

下面我們來看一下具體如何使用。

設置權限

要在小程序中訪問外部網頁,需要先設置允許訪問的業務網站的域名。讓我們先登錄小程序平臺管理后臺頁面,進入“設置” => "開發設置",可以看到這邊多出來了一塊“業務域名”的設置區域:

點擊“開始配置”按鈕,彈出一個窗口,我們可以在這個窗口中添加一個或多個你要在小程序中訪問的域名。當然,不是所有的域名下的網頁你的小程序都可以訪問,只有那些你可以“掌控”的網站,你才可以訪問!你需要在這個窗口里下載“校驗文件”,并把這個校驗文件上傳到你的網站的根目錄,供小程序平臺進行驗證,驗證通過了才能成功添加域名。

使用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>

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

總結

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