最近要(yào / yāo)做一個(gè)項目需要(yào / yāo)在(zài)小程序中打開外鏈，小程序最近開放了(le／liǎo)web-view組件， 可在(zài)裏面内嵌自己寫的(de)H5頁面，也(yě)就(jiù)實現了(le／liǎo)打開外鏈的(de)功能，但是(shì)有幾個(gè)注意點。 這(zhè)裏記錄一下，希望将來(lái)小程序能放開更多限制。

申請業務域名

首先必須在(zài)小程序後台配置業務域名，并且是(shì)已經備案過的(de)。

微信授權登錄

當需要(yào / yāo)微信授權登錄的(de)H5頁面直接通過小程序webview訪問時(shí)，會報錯。

解決方案：

對浏覽器進行判斷，如果是(shì)小程序webview（官方判斷條件： window.__wxjs_environment === 'miniprogram' ）就(jiù)跳過授權登錄。 這(zhè)樣就(jiù)規避了(le／liǎo)訪問非授權業務域名問題。

打開網頁條件

1. 小程序基礎庫版本要(yào / yāo)大(dà)于(yú) 1.6.4，低版本的(de)小程序需要(yào / yāo)做兼容處理
2. 網頁内容隻能在(zài) 組件中顯示，它會自動鋪滿整個(gè)小程序頁面
3. 個(gè)人(rén)類型與海外類型的(de)小程序暫不(bù)支持使用web-view組件打開網頁

示例代碼

<!– wxml –>
<!– 指向微信公衆平台首頁的(de)web-view –>
<web-view src=”https://mp.weixin.qq.com/”>web-view>

web-view組件接口

網頁中可使用JSSDK 1.3.0提供的(de)接口返回小程序頁面，支持的(de)接口有：

示例代碼：

<script type="text/javascript" src="../static/js/jweixin-1.3.0.js">script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})

網頁中僅支持以(yǐ)下JSSDK接口有限，詳細請參考 官網文檔說(shuō)明