web-view

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

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

客户端 6.7.2 版本开始,navigationStyle: customweb-view 组件无效

小程序插件中不能使用。

属性类型默认值必填说明最低版本
srcstringwebview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。1.6.4
bindmessageeventhandler网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组1.6.4
bindloadeventhandler网页加载成功时候触发此事件。e.detail = { src }1.6.4
binderroreventhandler网页加载失败的时候触发此事件。e.detail = { src }1.6.4

相关接口 1

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

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

示例代码

在开发者工具中预览效果

  1. // <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  2. // javascript
  3. wx.miniProgram.navigateTo({url: '/path/to/page'})
  4. wx.miniProgram.postMessage({ data: 'foo' })
  5. wx.miniProgram.postMessage({ data: {foo: 'bar'} })
  6. wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

相关接口 2

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

接口模块接口说明具体接口
判断客户端是否支持jscheckJSApi
图像接口拍照或上传chooseImage
预览图片previewImage
上传图片uploadImage
下载图片downloadImage
获取本地图片getLocalImgData
音频接口开始录音startRecord
停止录音stopRecord
监听录音自动停止onVoiceRecordEnd
播放语音playVoice
暂停播放pauseVoice
停止播放stopVoice
监听语音播放完毕onVoicePlayEnd
上传接口uploadVoice
下载接口downloadVoice
智能接口识别音频translateVoice
设备信息获取网络状态getNetworkType
地理位置使用内置地图打开地点openLocation
获取地理位置getLocation
摇一摇周边开启ibeaconstartSearchBeacons
关闭ibeaconstopSearchBeacons
监听ibeacononSearchBeacons
微信扫一扫调起微信扫一扫scanQRCode
微信卡券拉取使用卡券列表chooseCard
批量添加卡券接口addCard
查看微信卡包的卡券openCard
长按识别小程序圆形码

相关接口 3

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

示例代码

示例代码:

  1. Page({
  2. onShareAppMessage(options) {
  3. console.log(options.webViewUrl)
  4. }
  5. })

相关接口 4

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

示例代码

  1. // web-view下的页面内
  2. function ready() {
  3. console.log(window.__wxjs_environment === 'miniprogram') // true
  4. }
  5. if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  6. document.addEventListener('WeixinJSBridgeReady', ready, false)
  7. } else {
  8. ready()
  9. }
  10. // 或者
  11. wx.miniProgram.getEnv(function(res) {
  12. console.log(res.miniprogram) // true
  13. })

相关接口 5

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

相关接口 6

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

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

Bug & Tip

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