关于微信小程序:微信小程序-webview-问题

大家好，我是江辰，这篇文章记录一次在实在的线上环境中，对于 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+ 人同时进行音视频，这块理论测试过。对咱们的产品稳定性越来越好！