前言
原来小程式里的webView又这么多注意点。今日早读文章由腾讯[email protected]结一投稿分享。
正文从这开始～～
对于开发者来说，如果 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下的页面内
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
})
实际情况，一般都会直接用 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 和 安卓都要看下。 不要太相信你的程式码，也不能不相信你的程式码
