微信小程序 web-view 问题讨论

[xuya227939]

大家好，我是江辰，这篇文章记录一次在真实的线上环境中，关于 web-view 的问题，大家可以跟随作者一起看看心路历程。

本文首发于微信公众号：野生程序猿江辰

欢迎大家点赞，收藏，关注

问题背景

上半年最开始做的一版是展业大厅页面和互动白板页面（以下统称 web-view）分离，后面由于腾讯那边对交互方式不满意，强调一定要展业大厅页面和白板页面在同一个页面进行交互，最开始我们没有思路，因为在小程序官方中的描述，web-view 页面不允许叠加任何组件，后面是产品找到一个 demo，发现可以叠加，我这边去翻了下他们的源码（renderingMode: 'seperated'），最终解决了该问题，也就导致后面很多问题的产生。

现存问题

web-view 存在的情况

1. 安卓更新组件不生效，比如 tab 切换，tab1 切换到 tab2 ，不生效，内容不会更新

2. 安卓更新图片不生效

3. 安卓更新样式不生效

4. cover-view 文字消失

5. 按钮响应慢，机型性能低的手机比较明显

针对问题 2，目前的 hack 方案，先渲染一张透明的图片，然后再渲染其他图片，可以生效

针对问题 1、2、3，仅在安卓端出现，苹果手机上没有发现，目前有一个比较 hack 的方案，通过卸载组件，重新渲染，可以达到目的，但是产生的性能损耗比较大，对交互体验不友好，而且也导致了第四点问题的产生

针对问题 4 安卓复现频率比较高，苹果出现过一次

针对问题 5 安卓跟苹果都存在

web-view 不存在的情况

都正常

尝试过的方案

针对 cover-view 文字消失

• 设置组件宽高
• 设置字体颜色和背景颜色
• 刷新

以上方案，都不行，也没法在开发者工具上查看 DOM 视图

Console

元素的宽高都在，偏移位置也正常，就是文字消失

DOM

无法在开发者工具上查看 DOM 视图

现象

正常

文字消失

这个元素的宽高都在，就是文字消失

微信小程序架构图

展业小程序架构图

解决方案

• 所有人的视频流不再全部获取，而是只显示四路视频流，其他人员要显示，在成员列表进行切换显示

• 重点⼯作中花费精⼒最多的是模块化解耦的重构、我简单说下背景。因为之前我们代码共建的、 但是因为客户这边定制化的需求有很多，并且不是那么简单的能⽤抽象的⽅式把这些⾮通⽤功能的功能实现的、所以我们想出来的⽅案是：把⼩程序代码⾥划分重点模块，把每个模块都做成可插拔的，这样我们只需要把差异化很多的部分抽出来完全独⽴交给⾃⼰开发即可。同时这个⽅案实现好后，如果后续我们要开发新形态的应⽤，可以通过实现模块的⽅式实现⼀套新的应⽤形态

这些优化工作总共时间大概花了一个月左右，完成之后，目前我们的产品能够支持到 20+ 人同时进行音视频，这块实际测试过。对我们的产品稳定性越来越好！