分类： 组件

基础库 1.6.4 开始支持，低版本需做兼容处理。

微信小程序插件：不支持

微信 Windows 版：支持

微信 Mac 版：支持

微信 鸿蒙 OS 版：支持

渲染框架支持情况：WebView

功能描述

承载网页的容器。会自动铺满整个微信小程序页面，个人类型的微信小程序暂不支持使用。

客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

属性说明

相关接口 1

web-view网页中可使用JSSDK 1.3.2提供的接口返回微信小程序页面。 支持的接口有：

示例代码

在开发者工具中预览效果

// <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) })

相关接口 2

web-view网页中仅支持以下JSSDK接口：

相关接口 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
})

相关接口 5

从微信7.0.0开始，可以通过判断 userAgent 中包含 miniProgram 字样来判断微信小程序 web-view 环境。

从微信 Android 8.0.16，iOS 8.0.17 开始，web-view 的 userAgent 中会携带微信小程序的 appid。

对于微信鸿蒙 OS 版本，可根据 userAgent 中包含 ArkWeb 和 MicroMessenger 字样来判断。

示例代码

console.log(window.navigator.userAgent);

// "Mozilla/....../arm64 miniProgram/wx14211cb2fd9f805123"    携带了 miniProgram 字样和微信小程序的 appid

相关接口 6

从微信7.0.3开始，webview内可以通过判断下面的方式判断微信小程序是否在前台：

WeixinJSBridge.on('onPageStateChange', function(res) {
  console.log('res is active', res.active)
})

Bug & Tip

1. tip：网页内 iframe 的域名也需要配置到域名白名单。
2. tip：在开发者工具上，可以在 web-view 组件上通过右键 – 调试，打开 web-view 组件的调试。
3. tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
4. tip：web-view 网页与微信小程序之间不支持除 JSSDK 提供的接口之外的通信。
5. tip：在 iOS 中，如果遇到 JSSDK 接口调用无响应的情况，可以在 web-view 的 src 后面加个 #wechat_redirect 来解决。
6. tip：避免在链接中带有中文字符，在 iOS 中会出现打开白屏的问题，建议加上 encodeURIComponent。