微信小程序提供了新的開(kāi)放能力!它終于開(kāi)放了在小程序中內(nèi)嵌HTML頁(yè)面的功能!從微信小程序基礎(chǔ)庫(kù)1.6.4開(kāi)始，我們就可以在小程序內(nèi)放置一個(gè)組件來(lái)鏈接我們的HTML頁(yè)面了。在這之前，我們?cè)谛〕绦蛑袥](méi)有辦法整合我們已有的HTML程序(比如HTML5文章系統(tǒng)，商城系統(tǒng)等)，只能使用小程序的方式重新開(kāi)發(fā)一套，現(xiàn)在有了就可以方便的集成這些網(wǎng)頁(yè)系統(tǒng)，為我們減少了可觀的工作量。下面小編和大家一起看一下具體如何使用。
設(shè)置權(quán)限
要在小程序中訪問(wèn)外部網(wǎng)頁(yè)，需要先設(shè)置允許訪問(wèn)的業(yè)務(wù)網(wǎng)站的域名。讓我們先登錄小程序平臺(tái)管理后臺(tái)頁(yè)面，進(jìn)入“設(shè)置” => "開(kāi)發(fā)設(shè)置"，可以看到這邊多出來(lái)了一塊“業(yè)務(wù)域名”的設(shè)置區(qū)域：
點(diǎn)擊“開(kāi)始配置”按鈕，彈出一個(gè)窗口，我們可以在這個(gè)窗口中添加一個(gè)或多個(gè)你要在小程序中訪問(wèn)的域名。當(dāng)然，不是所有的域名下的網(wǎng)頁(yè)你的小程序都可以訪問(wèn)，只有那些你可以“掌控”的網(wǎng)站，你才可以訪問(wèn)!你需要在這個(gè)窗口里下載“校驗(yàn)文件”，并把這個(gè)校驗(yàn)文件上傳到你的網(wǎng)站的根目錄，供小程序平臺(tái)進(jìn)行驗(yàn)證，驗(yàn)證通過(guò)了才能成功添加域名。
使用web-view組件顯示HTML頁(yè)面
組件的使用就比較簡(jiǎn)單了，類(lèi)似HTML里面的標(biāo)簽：</p> <p> <web-view src="https://www.xxxxxxxxx.com/index.html" /></p> <p> 就這樣，HTML頁(yè)面就可以在小程序中顯示了。</p> <p> 但是，和可以嵌入到頁(yè)面的任意部分不同的是，小程序的這個(gè)<web-view>總是自動(dòng)鋪滿整個(gè)頁(yè)面，且每個(gè)頁(yè)面只能有一個(gè)<web-view>，它會(huì)覆蓋其他組件。也就是說(shuō)，沒(méi)有辦法實(shí)現(xiàn)小程序界面組件和<web-view>頁(yè)面混排的情況，這點(diǎn)要注意。</p> <p> 在內(nèi)嵌的HTML頁(yè)面中跳轉(zhuǎn)回小程序</p> <p> 如果要在已經(jīng)通過(guò)<web-view>嵌入小程序的網(wǎng)頁(yè)中，跳轉(zhuǎn)到小程序中的其他頁(yè)面(Page)，可以引入微信的一個(gè)JSSDK，使用它提供的方法來(lái)實(shí)現(xiàn)相關(guān)跳轉(zhuǎn)功能。網(wǎng)頁(yè)代碼類(lèi)似如下所示：</p> <p> <!-- html代碼中引入JS SDK --></p> <p> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></p> <p> </script></p> <p> <script></p> <p> // 跳轉(zhuǎn)到小程序的一個(gè)頁(yè)面</p> <p> wx.miniProgram.navigateTo({url: '/path/to/page'})</p> <p> </script>(不過(guò)很遺憾，還是沒(méi)有辦法從一個(gè)網(wǎng)頁(yè)中跳轉(zhuǎn)到一個(gè)指定的小程序。哈哈，我也就瞎想想~~)</p> <p> 總結(jié)</p> <p> 這一內(nèi)嵌網(wǎng)頁(yè)的功能，也算順應(yīng)了廣大開(kāi)發(fā)者的要求，解決了很大一部分開(kāi)發(fā)者的痛點(diǎn)。在混合開(kāi)發(fā)方面的增強(qiáng)，為小程序的功能開(kāi)發(fā)提供了不少靈活性和便利性。</p>