微信小程序內嵌網頁web-view

web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面。個人類型與海外類型的小程序暫不支持使用。

客戶端 6.7.2 版本開始，navigationStyle: custom 對 <web-view> 組件無效

屬性名	類型	默認值	說明
src	String		webview 指向網頁的鏈接。可打開關聯的公衆號的文章，其它網頁需登錄小程序管理後臺配置業務域名。
bindmessage	EventHandler		網頁向小程序 postMessage 時，會在特定時機（小程序後退、組件銷燬、分享）觸發並收到消息。e.detail = { data }
bindload	EventHandler		網頁加載成功時候觸發此事件。e.detail = { src }
binderror	EventHandler		網頁加載失敗的時候觸發此事件。e.detail = { src }

示例代碼：

<!-- wxml -->
<!-- 指向微信公衆平臺首頁的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

相關接口 1

<web-view/>網頁中可使用JSSDK 1.3.2提供的接口返回小程序頁面。 支持的接口有：

接口名	說明	最低版本
wx.miniProgram.navigateTo	參數與小程序接口一致	1.6.4
wx.miniProgram.navigateBack	參數與小程序接口一致	1.6.4
wx.miniProgram.switchTab	參數與小程序接口一致	1.6.5
wx.miniProgram.reLaunch	參數與小程序接口一致	1.6.5
wx.miniProgram.redirectTo	參數與小程序接口一致	1.6.5
wx.miniProgram.postMessage	向小程序發送消息	1.7.1
wx.miniProgram.getEnv	獲取當前環境	1.7.1

示例代碼：

在開發者工具中預覽效果

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

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

相關接口 2

<web-view/>網頁中僅支持以下JSSDK接口：

接口模塊	接口說明	具體接口
判斷客戶端是否支持js		checkJSApi
圖像接口	拍照或上傳	chooseImage
	預覽圖片	previewImage
	上傳圖片	uploadImage
	下載圖片	downloadImage
	獲取本地圖片	getLocalImgData
音頻接口	開始錄音	startRecord
	停止錄音	stopRecord
	監聽錄音自動停止	onVoiceRecordEnd
	播放語音	playVoice
	暫停播放	pauseVoice
	停止播放	stopVoice
	監聽語音播放完畢	onVoicePlayEnd
	上傳接口	uploadVoice
	下載接口	downloadVoice
智能接口	識別音頻	translateVoice
設備信息	獲取網絡狀態	getNetworkType
地理位置	使用內置地圖	getLocation
	獲取地理位置	openLocation
搖一搖周邊	開啓ibeacon	startSearchBeacons
	關閉ibeacon	stopSearchBeacons
	監聽ibeacon	onSearchBeacons
微信掃一掃	調起微信掃一掃	scanQRCode
微信卡券	拉取使用卡券列表	chooseCard
	批量添加卡券接口	addCard
	查看微信卡包的卡券	openCard
長按識別	小程序圓形碼	無

相關接口 3

用戶分享時可獲取當前<web-view/>的URL，即在onShareAppMessage回調中返回webViewUrl參數。

示例代碼：

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

相關接口 4

在網頁內可通過window.__wxjs_environment變量判斷是否在小程序環境，建議在WeixinJSBridgeReady回調中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。

示例代碼：

// web-view下的頁面內
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

// 或者
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

Bug & Tip

1. 網頁內iframe的域名也需要配置到域名白名單。
2. 開發者工具上，可以在 <web-view/> 組件上通過右鍵 - 調試，打開 <web-view/> 組件的調試。
3. 每個頁面只能有一個<web-view/>，<web-view/>會自動鋪滿整個頁面，並覆蓋其他組件。
4. <web-view/>網頁與小程序之間不支持除JSSDK提供的接口之外的通信。
5. 在iOS中，若存在JSSDK接口調用無響應的情況，可在<web-view/>的src後面加個#wechat_redirect解決。

 

常見錯誤：

1. 打開的域名沒有在小程序管理後臺設置業務域名（注意是業務域名，不是服務器域名）

2. 打開的頁面必須爲https服務

3. 打開的頁面302過去的地址也必須設置過業務域名

4. web-view空白問題，請升級微信客戶端到 6.5.16

5. 頁面可以包含iframe，但是iframe的地址必須爲業務域名

6. web-view不支持支付能力，web-view的API能力見web-view的文檔說明

7. 開發者自己檢查自己的https服務是否正常，測試方法：普通瀏覽器打開對應的地址

8. 如果web-view使用了公衆號授權的服務，開發者工具提示網頁開發者的問題，請見：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

 

關於web-view的問題，大家可以集中在這個帖子留言，爲了保證高效查問題，請提供以下信息：

1. web-view的src地址

2. 後臺配置的業務域名是否設置成功

3. 微信的版本

4. 遇到問題的小程序APPID以及復現的微信號

5. 出問題的錯誤提示信息是什麼

6. 後臺設置失敗問題，請提供小程序APPID以及遇到問題的時間點。