以下將展示微信小程序之開放能力web-view源碼官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。
功能描述：
承載網(wǎng)頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。
客戶端 6.7.2 版本開始，navigationStyle: custom 對 web-view 組件無效。
屬性說明：
相關(guān)接口1
web-view網(wǎng)頁中可使用JSSDK 1.3.2提供的接口返回小程序頁面。支持的接口有：
示例代碼
javascript
// <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) })
相關(guān)接口2
web-view網(wǎng)頁中僅支持以下JSSDK接口：
相關(guān)接口3
用戶分享時可獲取當(dāng)前web-view的URL，即在onShareAppMessage回調(diào)中返回webViewUrl參數(shù)。
示例代碼：
Page({
? onShareAppMessage(options) {
? ? console.log(options.webViewUrl)
? }
})
相關(guān)接口4
在網(wǎng)頁內(nèi)可通過window.__wxjs_environment變量判斷是否在小程序環(huán)境，建議在WeixinJSBridgeReady回調(diào)中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。
示例代碼
// web-view下的頁面內(nèi)
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
})
相關(guān)接口5
從微信7.0.0開始，可以通過判斷userAgent中包含miniProgram字樣來判斷小程序 web-view 環(huán)境。
相關(guān)接口6
從微信7.0.3開始，webview內(nèi)可以通過判斷下面的方式判斷小程序是否在前臺：
WeixinJSBridge.on('onPageStateChange',function(res) {
?console.log('res is active', res.active)
})
Bug & Tip
1.tip：網(wǎng)頁內(nèi) iframe 的域名也需要配置到域名白名單。
2.tip：開發(fā)者工具上，可以在 web-view 組件上通過右鍵 - 調(diào)試，打開 web-view 組件的調(diào)試。
3.tip：每個頁面只能有一個 web-view，web-view 會自動鋪滿整個頁面，并覆蓋其他組件。
4.tip：web-view 網(wǎng)頁與小程序之間不支持除 JSSDK 提供的接口之外的通信。
5.tip：在 iOS 中，若存在 JSSDK 接口調(diào)用無響應(yīng)的情況，可在 web-view 的 src 后面加個#wechat_redirect解決。
6.tip：避免在鏈接中帶有中文字符，在 iOS 中會有打開白屏的問題，建議加一下encodeURIComponent
版權(quán)聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權(quán)問題，請聯(lián)系我們第一時間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
