微信小程序承載網(wǎng)頁(yè) web-view

web-view

基礎(chǔ)庫(kù) 1.6.4 開始支持，低版本需做兼容處理

web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面。個(gè)人類型與海外類型的小程序暫不支持使用。

示例代碼：

<!-- wxml -->
<!-- 指向微信公眾平臺(tái)首頁(yè)的web-view -->
<web-view src="https://mp.weixin.qq.com/" rel="external nofollow" ></web-view>

相關(guān)接口 1

<web-view/>網(wǎng)頁(yè)中可使用JSSDK 1.3.0提供的接口返回小程序頁(yè)面。 支持的接口有：

示例代碼：

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js" rel="external nofollow" ></script>

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

相關(guān)接口 2

<web-view/>網(wǎng)頁(yè)中僅支持以下JSSDK接口：

相關(guān)接口 3

用戶分享時(shí)可獲取當(dāng)前<web-view/>的URL，即在onShareAppMessage回調(diào)中返回webViewUrl參數(shù)。

示例代碼：

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

相關(guān)接口 4

在網(wǎng)頁(yè)內(nèi)可通過(guò)window.__wxjs_environment變量判斷是否在小程序環(huán)境。

示例代碼：

// web-view下的頁(yè)面內(nèi)
wx.ready(function() {
    console.log(window.__wxjs_environment === 'miniprogram') // true
})

Bug & Tip

1. 網(wǎng)頁(yè)內(nèi)iframe的域名也需要配置到域名白名單。
2. 開發(fā)者工具上，可以在 <web-view/> 組件上通過(guò)右鍵 - 調(diào)試，打開 <web-view/> 組件的調(diào)試。
3. 每個(gè)頁(yè)面只能有一個(gè)<web-view/>，<web-view/>會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面，并覆蓋其他組件。
4. <web-view/>網(wǎng)頁(yè)與小程序之間不支持除JSSDK提供的接口之外的通信。
5. 在iOS中，若存在JSSDK接口調(diào)用無(wú)響應(yīng)的情況，可在<web-view/>的src后面加個(gè)#wechat_redirect解決。