微信小程序文档中提到，web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。web-view的出现，可以缓解小程序size告急的问题。
web-view的使用方法： <!-- wxml --><!-- 指向微信公众平台首页的web-view --><web-view src="https://mp.weixin.qq.com/"></web-view>src是一个网站的url，默认值是none，webview指向网页的链接。
web-view是如何进行小程序和h5通信的：1. 小程序到web-view：本质上WEB-VIEW也是小程序的一个页面，所以小程序到web-view是正常的小程序间的通信，通过wx.navigateTo、wx.redirectTo，带上url参数,query参数就像正常url的参数一样跟着后面，然后在web-view的页面的Page实例里面通过onLoad的方法的参数来获取url的值，设置给web-view的src属性为改值即可。
// 点击banner进入页面详情goPageDetail(e) { const { url, h5 } = e.currentTarget.dataset; if (url !== '/') { wx.navigateTo({ url }); } else { wx.navigateTo({ url: `/pages/article/webview/index?h5=${h5}` }); }},
2.web-view到小程序：由于在web-view的跳转通常是在src对应的网页中的操作来处理的，所以需要结合jssdk来处理，不需要wx.config配置，直接通过script标签来引入https://res.wx.qq.com/open/js/jweixin-1.3.0.js，就可以使用wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo接口，就像小程序之间的跳转一样，单是只能在当前小程序页面内跳转。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>h5跳转到小程序页面</title></head><body> <div class="app"> <p>this is h5页面。</p> <button type="button" id="btn">返回小程序</button> </div> <script src="https://test.com/jquery.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script> <script> /* eslint-disable */ $(function(){ $('#btn').on('click',function(s) { wx.miniProgram.navigateTo({ url:'/pages/index/index?id=xxx', success: function(){ console.log('success') }, fail: function(){ console.log('fail'); }, complete:function(){ console.log('complete'); } }); }); }); </script></body></html> web-view中踩的坑：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使用了公众号授权的服务，开发者工具提示网页开发者的问题，请见：公众号开发