⼩程序内嵌⽹页web-view
web-view 组件是⼀个可以⽤来承载⽹页的容器，会⾃动铺满整个⼩程序页⾯。个⼈类型与海外类型的⼩程序暂不⽀持使⽤。
客户端 6.7.2 版本开始， 对 <web-view> 组件⽆效
属性名类型默认
值
说明
src String webview 指向⽹页的链接。可打开关联的的⽂章，其它⽹页需登录配置业务域名。
bindmessage EventHandler ⽹页向⼩程序 postMessage 时，会在特定时机（⼩程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }
bindload EventHandler⽹页加载成功时候触发此事件。e.detail = { src }
binderror EventHandler⽹页加载失败的时候触发此事件。e.detail = { src }
⽰例代码：
<!-- wxml -->
<!-- 指向公众平台⾸页的web-view -->
<web-view src="mp.weixin.qq/"></web-view>
相关接⼝ 1
<web-view/>⽹页中可使⽤提供的接⼝返回⼩程序页⾯。 ⽀持的接⼝有：
接⼝名说明最低版本wx.miniProgram.navigateTo参数与⼩程序接⼝⼀致
wx.miniProgram.navigateBack参数与⼩程序接⼝⼀致
wx.miniProgram.switchTab参数与⼩程序接⼝⼀致
Launch参数与⼩程序接⼝⼀致
directTo参数与⼩程序接⼝⼀致
wx.miniProgram.postMessage向⼩程序发送消息
Env获取当前环境
⽰例代码：
<!-- html -->
<script type="text/javascript" src="res.wx.qq/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
Env(function(res) { console.log(res.miniprogram) // true })
相关接⼝ 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变量判断是否在⼩程序环境，建议在WeixinJSBridgeReady回调中使⽤，也可以使⽤提供的getEnv接⼝。
⽰例代码：
// web-view下的页⾯内
function ready() {
console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
web服务器域名是什么ready()
}
// 或者
Env(function(res) {
console.log(res.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解决。
常见错误：
1. 打开的域名没有在⼩程序管理后台设置业务域名（注意是业务域名，不是服务器域名）
2. 打开的页⾯必须为https服务
3. 打开的页⾯302过去的地址也必须设置过业务域名
4. web-view空⽩问题，请升级客户端到 6.
5.16
5. 页⾯可以包含iframe，但是iframe的地址必须为业务域名
6. web-view不⽀持⽀付能⼒，web-view的API能⼒见web-view的⽂档说明
7. 开发者⾃⼰检查⾃⼰的https服务是否正常，测试⽅法：普通浏览器打开对应的地址
8.
关于web-view的问题，⼤家可以集中在这个帖⼦留⾔，为了保证⾼效查问题，请提供以下信息：
1. web-view的src地址
2. 后台配置的业务域名是否设置成功
3. 的版本
4. 遇到问题的⼩程序APPID以及复现的号
5. 出问题的错误提⽰信息是什么
6. 后台设置失败问题，请提供⼩程序APPID以及遇到问题的时间点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。