<web-view>
基础库 1.6.4 开始支持,低版本需做兼容处理
web-view 组件是一个可以用来承载网页的容器,<strong>会自动铺满整个小程序页面</strong>。<strong>个人类型与海外类型的小程序暂不支持使用。</strong>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | none | webview 指向网页的链接。需登录小程序管理后台配置域名白名单。 |
示例代码:
<!-- wxml -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
相关接口 1
<web-view/>网页中可使用JSSDK 1.3.0提供的接口返回小程序页面。 支持的接口有:
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 即将开放 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 即将开放 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 即将开放 |
示例代码:
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
// javascript
wx.miniProgram.nav igateTo({url: '/path/to/page'})
相关接口 2
<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 | |
长按识别 | 小程序圆形码 | 无 |
相关接口 3
用户分享时可获取当前<web-view/>的URL,即在onShareAppMessage回调中返回webViewUrl参数。
示例代码:
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})
相关接口 4
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。
示例代码:
// web-view下的页面内
console.log(window.__wxjs_environment === 'miniprogram') // true
快速接入<web-view>
1. 由于该组件是由基础库1.6.4开始支持,需先更新开发者工具,选择基础库版本1.6.4
2. 配置业务域名
开发者登录小程序后台mp.weixin.qq.com,选择设置-开发设置-业务域名,新增配置域名模块
3. wxml中,使用<web-view>组件,并设置src为上面配置的域名
<web-view src="https://tongdulong.cccwei.com/"></web-view>
调研中遇到的问题
问题一 :
出现该错误是由于域名没有成功配置,或者没有使用https
问题二 :
问题三 :
在配置wx.config时url必须为当前页面url
html文件最好直接命名为index.html