web-view

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面，个人类型小程序暂不支持使用。

属性名	类型	默认值	说明
src	String		webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录QQ小程序管理后台配置业务域名。
bindmessage	EventHandler		网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
bindload	EventHandler		网页加载成功时候触发此事件。e.detail = { src }
binderror	EventHandler		网页加载失败的时候触发此事件。e.detail = { src }

示例代码：

<!-- qml -->
<web-view src="https://q.qq.com/"></web-view>

相关接口 1

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

示例代码：

<!-- html -->
<script
  type="text/javascript"
  src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"
></script>
// javascript qq.miniProgram.navigateTo({url: '/path/to/page'})
qq.miniProgram.postMessage({ data: 'foo' }) qq.miniProgram.postMessage({ data:
{foo: 'bar'} }) qq.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true })

相关接口 2

<web-view>网页中暂不支持其他媒体相关接口：

相关接口 3

用户分享时可获取当前<web-view>的URL，即在onShareAppMessage回调中返回webViewUrl参数。

示例代码：

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

相关接口 4

在网页内可通过window.__qqjs_environment变量判断是否在小程序环境，建议在QQJSBridgeReady回调中使用，也可以使用JSSDK提供的getEnv接口。

示例代码：

// web-view下的页面内
function ready() {
  console.log(window.__qqjs_environment === 'miniprogram') // true
}
if (!window.QQJSBridge || !QQJSBridge.invoke) {
  document.addEventListener('QQJSBridgeReady', ready, false)
} else {
  ready()
}
// 或者
qq.miniProgram.getEnv(function (res) {
  console.log(res.miniprogram) // true
})

相关接口 5

可以通过判断userAgent中包含miniProgram字样来判断小程序web-view环境。

Bug & Tip

• 网页内 iframe 的域名也需要配置到域名白名单。
• 开发者工具上，可以在 <web-view> 组件上通过右键 - 调试，打开 <web-view> 组件的调试。
• 每个页面只能有一个 <web-view>，<web-view> 会自动铺满整个页面，并覆盖其他组件。
• <web-view> 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
• 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent