微信小程序 web-view 开发小记

微信小程序的 web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。 这对于基于 H5 开发的站点，直接迁移到小程序带来了很大的便利。当然这其中也有一些需要注意的坑。

账号权限

如果要在小程序中使用 web-view 组件，则需要开发者账号不仅是该小程序的开发者而且还有网页开发权限，这需要在该小程序关联的公众号里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没有网页开发权限。提示如下：

业务域名

we-bview 组件的 src 属性指向网页的链接。可打开关联的公众号的文章，其它网页则需登录小程序管理后台（设置 -> 开发设置）中配置业务域名，如下图：

配置业务域名的时候会提示你上传验证文件到该域名下进行验证。如果你压根就没有权限去上传验证文件，那不好意思，你用了不该业务域名，页面直接提示报错，无法正常访问。

登录态

小程序登录态与 web-view 组件登录态属于两套隔离的系统。所以得想办法让小程序中的登录态传入到 web-view 组件的 H5 页面中。目前最简单也是最常用的方案是把 cookie作为 url 参数传入，然后再在 H5 中获取并设置 cookie，为了提高点难度，可以加个加解密。

如果不嫌麻烦，可以搭建一个中间服务，传入 tickets，中间服务通过 tickets 得到 cookie，再重定向地址。

组件层级

web-view 组件属于原生组件，所以层级很高，如果需要覆盖则需要使用 cover-view 组件。但是 cover-view 组件在开发工具上是看不到覆盖效果的，安卓默认也不能覆盖，只有 IOS 默认会覆盖。

cover-view

有些时候我们封装一个组件，需要盖住 web-view ，所以会选择 cover-view 组件，但是如果这个组件不是应用在 web-view 页面就会带来层级太高，弹窗浮层根本盖不住的问题。如一些右下角的咨询按钮，既应用在小程序页面中，也应用在 web-view 页面中。所以做组件的时候可以做一个属性判断，如果是 web-view 页面则使用 cover-view ，否则使用 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 。但是如果页面没有加载完， window.__wxjs_environment 是不准的，而且如果是 web-view 中进入到第二个页面，安卓也拿不到该值，总之就一个字"很不靠谱"。

既然“不靠谱”，那就有了通过 URL 里面加参数来判断，这是铁定的稳。如添加一个 mp 参数（ https://m.ke.qq.com/course/xxx?mp=1 ）。

web-view 页面向小程序通信

目前 web-view 网页可通过 postMessage 向小程序发送信息，但是该信息只会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。

小程序中通过在 web-view 中设置 bindMessage 属性，收到信息，如下图：

web-view 页面中包括 iframe

首先 iframe 的域名为业务域名，不然页面也会提示报错，无法正常显示。其次 iframe 的页面里面不能使用官网上所记载的相关接口1，如下：

如果要跳回小程序页面的话，可以使用 window.top.window.wx.miniProgram.xxxAPI

调试 web-view

开发工具调试

在开发工具显示面板，右键会出现调试，打开一个调试面板，当然这样是看不到 cgi 请求的，要看请求我们得重新发送请求，如console里面执行页面刷新，或直接再次右键调试，都会触发页面刷新请求重新发送。

真机调试

不好意思，由于 web-view 组件的层级实在太高，盖住了 vconsole 的调试，所以相当于没有调试工具。不过也有一些办法可以解决：

• 如果其他上下关联的页面是非 web-view 的话，我们可以在上下关联的页面中查看 vconsole 的信息
• 使用 alert大法
• 使用 whistle （关于 whistle 如何调试下次再具体介绍）

总结

最后的最后，不论在开发工具中显示良好或者不良好，都一定要用真机查看效果，而且 IOS 和 安卓都要看下。 不要太相信你的代码，也不能不相信你的代码