以下将展示微信小程序之开放能力web-view源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
功能描述：
承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。
客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效。
属性说明：
相关接口 1
web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有：
示例代码
javascript
代码语言：javascript复制// <script type="text/javascript" src="https://res.wx.qq.com/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'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })相关接口 2
web-view网页中仅支持以下JSSDK接口：
相关接口 3
用户分享时可获取当前web-view的URL，即在onShareAppMessage回调中返回webViewUrl参数。
示例代码：
代码语言：javascript复制Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})相关接口 4
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。
示例代码
代码语言：javascript复制// 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
})相关接口 5
从微信7.0.0开始，可以通过判断userAgent中包含miniProgram字样来判断小程序 web-view 环境。
相关接口 6
从微信7.0.3开始，webview内可以通过判断下面的方式判断小程序是否在前台：
代码语言：javascript复制WeixinJSBridge.on('onPageStateChange', function(res) {
console.log('res is active', res.active)
})Bug & Tip
1.tip：网页内 iframe 的域名也需要配置到域名白名单。
2.tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
3.tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
4.tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
5.tip：在 iOS 中，若存在 JSSDK 接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。
6.tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent
版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
