正文从这开始～～
对于开发者来说，如果H5页面能够直接嵌入到小程序那是再好不过了，而web-view组件正好就提供了这么个功能（个人类型与海外类型的小程序暂不支持使用）。简单来说它是一个可以用来承载网页的容器，会自动铺满整个小程序页面。虽然这带来了很大的便利，但是也还是有很多需要注意的地方。
账号权限如果要在小程序中使用web-view组件，则首先需要开发者账号不仅是该小程序的开发者而且还有网页开发权限，这需要在该小程序关联的公众号里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没有网页开发权限。提示如下：
业务域名如果web-view组件的src属性指向的不是关联的公众号文章，而是其他网页，则需要登录小程序管理后台（设置-开发设置）中配置业务域名，如下图：
配置业务域名的时候会提示需要上传验证文件到该域名下进行验证。如果该域名下没有验证文件或验证文件错误，则web-view页面直接提示报错，无法正常访问。
除此之外，如果页面中有其他链接跳转到非业务域名，进行跳转的时候也会报错导致无法正常访问，如富文本内容中的链接，iframe，数据上报或支付跳转等其他非业务域名。
另外：避免在链接中带有中文字符，在iOS中会有打开白屏的问题，建议加一下encodeURIComponent
登录态小程序登录态与web-view页面登录态属于两套隔离的系统。所以得想办法让小程序中的登录态传入到web-view页面中。目前最简单也是最常用的方案是把cookie作为url参数传入，然后再在H5中获取并设置cookie，为了提高点难度，也可以搞点小动作。
当然更高明的办法是搭建一个中间服务，传入要跳转的url和code，中间服务通过code得到session，再返回302重定向地址。
组件层级web-view组件属于原生组件，所以层级很高，如果需要覆盖则需要使用cover-view组件。但是cover-view组件在开发工具上是看不到覆盖效果的，安卓默认也不能覆盖，只有IOS默认会覆盖。所以为了得到想要的效果，得使用一些非常手段：
对于安卓的默认不能覆盖，目前的解决方案是执行setTimeout延迟实现cover-view的显示，让web-view先显示，cover-view后显示。
对于开发工具看不到，如要调试效果则可以先注释掉web-view组件
除此之外，封装一个组件的时候，如果需要盖住web-view，肯定得选择cover-view组件。但是如果这个组件不仅应用在web-view页面，还应用在普通的小程序页面。cover-view又会引来另一个问题：弹窗浮层根本盖不住。如一些右下角的咨询按钮，既应用在小程序页面中，也应用在web-view页面中。所以做组件的时候可以做一个属性判断，如果是web-view页面则使用cover-view，否则使用view。
另外cover-view组件中的button组件并不是真的，而是用cover-view模拟出来的。所以修改样式的话，需要注意点。
web-view页面中小程序环境判断官网有记载在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，并且建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK（1.3.2以上版本）提供的getEnv接口。代码如下：
//web-view下的页面内functionready(){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})实际情况，一般都会直接用window.__wxjs_environment。但是如果页面没有加载完，它是不准的，而且如果是web-view中进入到第二个页面，安卓也拿不到该值，总之就一个字”很不靠谱”。
既然“不靠谱”，那就有了通过URL里面加参数来判断，这是铁定的稳。如添加一个mp参数（https://m.ke.qq.com/course/xxx?mp=1）。但是如果页面有几个跳转，总不能每个都去判断下加上mp参数吧。所以建议在进入的第一个页面直接种下storage，往后的根据storage来判断就好了。
通过这三层保证（变量||mp参数||storage），只要一个为真，则为小程序环境。这样锁定小程序环境很稳。
另外：从微信7.0.0开始，可以通过判断userAgent中包含miniProgram字样来判断小程序web-view环境。
微信JSSDK使用web-view的话，请保证网页中的微信JSSDK的版本大于1.3.2，目前微信JSSDK的版本为1.4.0，其升级了分享接口。所以如果要升级微信JSSDK到最新版本，请记得要升级H5页面的分享接口。原有的wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone接口，即将废弃，取而代之的是updateAppMessageShareData、updateTimelineShareData。最后新接口是拿不到分享成功失败的信息的。
web-view页面向小程序通信目前web-view网页可通过postMessage向小程序发送信息，但是该信息只会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。
小程序中通过在web-view中设置bindMessage属性，收到信息，如下图：
这对于H5分享转小程序分享来说提供了一个非常靠谱的方案。如有些场景会引导用户去分享（砍价、助力等），这样点击按钮出现引导的时候，就得把原先H5页面的分享信息传向小程序。在小程序点击分享的时候就会拿到H5页面传入的信息，再用这些信息构造分享即可。
web-view页面中包括iframe首先iframe的域名得为业务域名，不然页面也会提示报错，无法正常显示。其次iframe的页面里面不能使用官网上所记载的相关接口1
如果要在iframe中跳到其他小程序页面的话，安卓可以使用window.top.window.wx.miniProgram.xxxAPI，而IOS中window.top是行不通的。
页面刷新要刷新页面，得更新web-view的src属性，即更新页面的URL，最简单的方法就是加个时间戳参数。如详细页报名，报名成功回来就需要更新详细页报名信息。
由于页面返回触发的是生命周期中的onShow，所以需要在该函数中更新URL值。
除此之外，如果H5页面中有一些播放任务（音乐，视频等），在页面进入后台的时候即onHide时候，应该需要把URL设置为空，不然音视频会在后台一直播放直至该小程序销毁或者到音视频结束
调试web-view开发工具调试
在开发工具显示面板，右键会出现调试，打开一个调试面板，当然这样是看不到cgi请求的，要看请求我们得重新发送请求，如console里面执行页面刷新，或直接再次右键调试，都会触发页面刷新请求重新发送。
真机调试
真机调试时，请保证开发工具上登录的微信账号与手机的账号一致。不然可能会出现账号问题（真机调试的账号使用的是你开发工具上的账号）。
由于web-view组件的层级实在太高，盖住了vconsole的调试，所以相当于没有调试工具。不过也有一些办法可以解决：
如果其他上下关联的页面是非web-view的话，可以在上下关联的页面中查看vconsole的信息
使用alert大法
使用whistle（关于whistle如何调试下次再具体介绍）
总结最后的最后，不论在开发工具中显示良好或者不良好，都一定要用真机查看效果，而且IOS和安卓都要看下。不要太相信你的代码，也不能不相信你的代码
