微信小程序 web-view 问题

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

相关推荐
小周同学@1 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok1 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~1 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号1 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌2 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海3 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码4 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
小蒜学长4 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序