文档

# 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
2
# 相关接口 1

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

接口名 说明 最低版本
qq.miniProgram.navigateTo 参数与小程序接口一致
qq.miniProgram.navigateBack 参数与小程序接口一致
qq.miniProgram.switchTab 参数与小程序接口一致
qq.miniProgram.reLaunch 参数与小程序接口一致
qq.miniProgram.redirectTo 参数与小程序接口一致
qq.miniProgram.postMessage 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件
qq.miniProgram.getEnv 获取当前环境

示例代码：

<!-- html -->
<script
  type="text/javascript"
  src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"
></script>
1
2
3
4
5
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) })
1
2
3
4
# 相关接口 2

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

# 相关接口 3

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

示例代码：

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  },
})
1
2
3
4
5
# 相关接口 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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 相关接口 5

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

# Bug & Tip
  1. 网页内 iframe 的域名也需要配置到域名白名单。
  2. 开发者工具上，可以在 <web-view> 组件上通过右键 - 调试，打开 <web-view> 组件的调试。
  3. 每个页面只能有一个 <web-view>，<web-view> 会自动铺满整个页面，并覆盖其他组件。
  4. <web-view> 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
  5. 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent
  6. 提示 insertHTMLWebView:fail no permission 时即没有权限使用<web-view>，目前个人开发者以及未选定服务类目的企业开发者不支持调用

← ad →