微信小程序开发文档 微信小程序承载网页 web-view

2024-02-25 开发教程 微信小程序开发文档 匿名 4

web-view

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

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

属性名类型默认值说明
srcStringnonewebview 指向网页的链接。需登录小程序管理后台配置域名白名单。

示例代码:

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/" rel="external nofollow" ></web-view>

相关接口 1

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

接口名说明最低版本
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

示例代码:

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js" rel="external nofollow" ></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})

相关接口 2

<web-view/>网页中仅支持以下JSSDK接口:

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

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

示例代码:

Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})
相关接口 4

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。

示例代码:

// web-view下的页面内
wx.ready(function() {
console.log(window.__wxjs_environment === 'miniprogram') // true
})

Bug & Tip

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