web-view
功能说明:web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面,个人类型小程序暂不支持使用,企业开发者需先在开发者平台上选择服务类目。
参数及说明:
属性 | 类型 | 默认值 | 说明 |
src | string | - | webview 指向网页的链接。网页需登录TMF 小程序管理后台配置业务域名 |
bindload | eventhandler | - | 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data 是多次 postMessage 的参数组成的数组 |
binderror | eventhandler | - | 网页加载成功时候触发此事件。e.detail = { src } |
binderror | eventhandler | - | 网页加载失败的时候触发此事件。e.detail = { src } |
示例代码:
<!-- wxml --><web-view src="https://www.qq.com/"></web-view>
相关接口1
web-view>
网页中可使用 JSSDK 提供的接口返回小程序页面。 支持的接口有:接口名 | 说明 |
wx.miniProgram.navigateTo | 参数与小程序接口一致 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 |
wx.miniProgram.switchTab | 参数与小程序接口一致 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 |
wx.miniProgram.postMessage | 向小程序发送消息,会在以下特定时机触发组件的 message 事件:小程序后退、组件销毁、分享、复制链接 |
wx.miniProgram.getEnv | 获取当前环境 |
示例代码:
<!-- html --><script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"></script>
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
相关接口3
用户分享时可获取当前
<web-view>
的 URL,即在onShareAppMessage
回调中返回webViewUrl
参数。示例代码:
Page({onShareAppMessage(options) {console.log(options.webViewUrl)},})
相关接口4
在网页内可通过
window.__wxjs_environment
变量判断是否在小程序环境,建议在WeixinJSBridgeReady
回调中使用,也可以使用 JSSDK 提供的getEnv
接口。示例代码:
// web-view下的页面内function ready() {console.log(window.__wxjs_environment === 'miniprogram') // true}if (!window.QQJSBridge || !QQJSBridge.invoke) {document.addEventListener('WeixinJSBridgeReady', ready, false)} else {ready()}// 或者wx.miniProgram.getEnv(function(res) {console.log(res.miniprogram) // true})
相关接口 5
可以通过判断 userAgent 中包含 miniProgram 字样来判断小程序 web-view 环境。
说明:
网页内 iframe 的域名也需要配置到域名白名单;
开发者工具上,可以在 <web-view>组件上通过右键 - 调试,打开 <web-view>组件的调试;
每个页面只能有一个 <web-view>,<web-view>会自动铺满整个页面,并覆盖其他组件;
<web-view>网页与小程序之间不支持除 JSSDK 提供的接口之外的通信;
避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent;
提示 insertHTMLWebView:fail no permission 时即没有权限使用<web-view>,目前个人开发者以及未选定服务类目的企业开发者不支持调用。