基础库 1.6.4 开始支持,低版本需做兼容处理
web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | string | none | webview 指向网页的链接。需登录小程序管理后台配置域名白名单。 |
示例代码:
<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view class="lazy" data-original="https://mp.weixin.qq.com/"></web-view>
<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" class="lazy" data-original="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
// javascript
wx.miniprogram.navigateto({url: '/path/to/page'})
<web-view/>网页中仅支持以下jssdk接口:
| 接口模块 | 接口说明 | 具体接口 |
|---|---|---|
| 判断客户端是否支持js | checkjsapi | |
| 图像接口 | 拍照或上传 | chooseimage |
| 预览图片 | previewimage | |
| 上传图片 | uploadimage | |
| 下载图片 | downloadimage | |
| 获取本地图片 | getlocalimgdata | |
| 音频接口 | 开始录音 | startrecord |
| 停止录音 | stoprecord | |
| 监听录音自动停止 | onvoicerecordend | |
| 播放语音 | playvoice | |
| 暂停播放 | pausevoice | |
| 停止播放 | stopvoice | |
| 监听语音播放完毕 | onvoiceplayend | |
| 上传接口 | uploadvoice | |
| 下载接口 | downloadvoice | |
| 智能接口 | 识别音频 | translatevoice |
| 设备信息 | 获取网络状态 | getnetworktype |
| 地理位置 | 使用内置地图 | getlocation |
| 获取地理位置 | openlocation | |
| 摇一摇周边 | 开启ibeacon | startsearchbeacons |
| 关闭ibeacon | stopsearchbeacons | |
| 监听ibeacon | onsearchbeacons | |
| 微信扫一扫 | 调起微信扫一扫 | scanqrcode |
| 微信卡券 | 拉取使用卡券列表 | choosecard |
| 批量添加卡券接口 | addcard | |
| 查看微信卡包的卡券 | opencard | |
| 长按识别 | 小程序圆形码 | 无 |
用户分享时可获取当前<web-view/>的url,即在onshareappmessage回调中返回webviewurl参数。
示例代码:
page({
onshareappmessage(options) {
console.log(options.webviewurl)
}
})
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。
示例代码:
// web-view下的页面内
wx.ready(function() {
console.log(window.__wxjs_environment === 'miniprogram') // true
})