微信小程序嵌套iframe_微信小程序内嵌网页web-view

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

客户端 6.7.2 版本开始，navigationStyle: custom 对 组件无效

属性名

类型

默认值

说明

src

String

webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

bindmessage

EventHandler

网页向小程序 postMessage 时，会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }

bindload

EventHandler

网页加载成功时候触发此事件。e.detail = { src }

binderror

EventHandler

网页加载失败的时候触发此事件。e.detail = { src }

示例代码：

相关接口 1

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

接口名

说明

最低版本

wx.miniProgram.navigateTo

参数与小程序接口一致

wx.miniProgram.navigateBack

参数与小程序接口一致

wx.miniProgram.switchTab

参数与小程序接口一致

wx.miniProgram.reLaunch

参数与小程序接口一致

wx.miniProgram.redirectTo

参数与小程序接口一致

wx.miniProgram.postMessage

向小程序发送消息

wx.miniProgram.getEnv

获取当前环境

示例代码：

// javascript

wx.miniProgram.navigateTo({url: '/path/to/page'})

wx.miniProgram.postMessage({ data: 'foo' })

wx.miniProgram.postMessage({ data: {foo: 'bar'} })

wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

相关接口 2

网页中仅支持以下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

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

示例代码：

Page({

onShareAppMessage(options) {

console.log(options.webViewUrl)

}

})

相关接口 4

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

示例代码：

// web-view下的页面内

function ready() {

console.log(window.__wxjs_environment === 'miniprogram') // true

}

if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {

document.addEventListener('WeixinJSBridgeReady', ready, false)

} else {

ready()

}

// 或者

wx.miniProgram.getEnv(function(res) {

console.log(res.miniprogram) // true

})

Bug & Tip

网页内iframe的域名也需要配置到域名白名单。

开发者工具上，可以在 组件上通过右键 - 调试，打开 组件的调试。

每个页面只能有一个，会自动铺满整个页面，并覆盖其他组件。

网页与小程序之间不支持除JSSDK提供的接口之外的通信。

在iOS中，若存在JSSDK接口调用无响应的情况，可在的src后面加个#wechat_redirect解决。

常见错误：

打开的域名没有在小程序管理后台设置业务域名(注意是业务域名，不是服务器域名)

打开的页面必须为https服务

打开的页面302过去的地址也必须设置过业务域名

web-view空白问题，请升级微信客户端到 6.5.16

页面可以包含iframe，但是iframe的地址必须为业务域名

web-view不支持支付能力，web-view的API能力见web-view的文档说明

开发者自己检查自己的https服务是否正常，测试方法：普通浏览器打开对应的地址

如果web-view使用了公众号授权的服务，开发者工具提示网页开发者的问题，请见：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

关于web-view的问题，大家可以集中在这个帖子留言，为了保证高效查问题，请提供以下信息：

web-view的src地址

后台配置的业务域名是否设置成功

微信的版本

遇到问题的小程序APPID以及复现的微信号

出问题的错误提示信息是什么

后台设置失败问题，请提供小程序APPID以及遇到问题的时间点。