开放能力

最近更新时间:2024-05-11 17:21:31

我的收藏

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
<web-view>页中暂不支持其他媒体相关接口。
相关接口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>,目前个人开发者以及未选定服务类目的企业开发者不支持调用。