# web-view

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

小程序插件：不支持

微信 Windows 版：支持

微信 Mac 版：支持

微信 鴻蒙 OS 版：支持

渲染框架支持情況：WebView

# 功能描述

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

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

# 屬性說明

# 相關(guān)接口 1

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

# 示例代碼

在開發(fā)者工具中預(yù)覽效果

// <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)境。

從微信 Android 8.0.16，iOS 8.0.17 開始，web-view 的 userAgent 中會攜帶小程序的 appid。

對于微信鴻蒙 OS 版本，可根據(jù) userAgent 中包含 ArkWeb 和 MicroMessenger 字樣來判斷。

# 示例代碼

console.log(window.navigator.userAgent);

// "Mozilla/....../arm64 miniProgram/wx14211cb2fd9f805123"    攜帶了 miniProgram 字樣和小程序的 appid

# 相關(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