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

框架

浏览数:443

2019-8-21


image

微信小程序的 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 )。

1. web-view 页面向小程序通信

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

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

2. web-view 页面中包括 iframe

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

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

六 调试 web-view

1. 开发工具调试

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

真机调试

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

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

七 总结

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

$I2DS4BXQ8IGT$VU2FUGCUS.png

想学习更多Android知识,或者获取相关资料请加入Android技术开发交流2群:935654177。本群可免费获取Gradle,RxJava,小程序,Hybrid,移动架构,NDK,React Native,性能优化等技术教程!

作者:Android征途