以下將展示微信小程序之開(kāi)放能力web-view源碼官方組件能力,，組件樣式僅供參考,，開(kāi)發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見(jiàn)小程序開(kāi)發(fā)文檔,。

功能描述：

承載網(wǎng)頁(yè)的容器,。會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面，個(gè)人類型的小程序暫不支持使用,。

客戶端 6.7.2 版本開(kāi)始,，navigationStyle: custom 對(duì) web-view 組件無(wú)效。

屬性說(shuō)明：

相關(guān)接口 1

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

示例代碼

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)頁(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)境,，建議在WeixinJSBridgeReady回調(diào)中使用,，也可以使用JSSDK 1.3.2提供的getEnv接口。

示例代碼

// web-view下的頁(yè)面內(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開(kāi)始,，可以通過(guò)判斷userAgent中包含miniProgram字樣來(lái)判斷小程序 web-view 環(huán)境,。

相關(guān)接口 6

從微信7.0.3開(kāi)始，webview內(nèi)可以通過(guò)判斷下面的方式判斷小程序是否在前臺(tái)：

WeixinJSBridge.on('onPageStateChange', function(res) {

  console.log('res is active', res.active)

})

Bug & Tip

1.tip：網(wǎng)頁(yè)內(nèi) iframe 的域名也需要配置到域名白名單,。

2.tip：開(kāi)發(fā)者工具上,，可以在 web-view 組件上通過(guò)右鍵 - 調(diào)試，打開(kāi) web-view 組件的調(diào)試,。

3.tip：每個(gè)頁(yè)面只能有一個(gè) web-view,，web-view 會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面,，并覆蓋其他組件。

4.tip：web-view 網(wǎng)頁(yè)與小程序之間不支持除 JSSDK 提供的接口之外的通信,。

5.tip：在 iOS 中,，若存在 JSSDK 接口調(diào)用無(wú)響應(yīng)的情況，可在 web-view 的 src 后面加個(gè)#wechat_redirect解決,。

6.tip：避免在鏈接中帶有中文字符,，在 iOS 中會(huì)有打開(kāi)白屏的問(wèn)題，建議加一下 encodeURIComponent

版權(quán)聲明： 本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理,、上傳，如涉及版權(quán)問(wèn)題,，請(qǐng)聯(lián)系我們第一時(shí)間處理,。

原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html