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

简介: 微信小程序 web-view 问题讨论 #128

问题背景


上半年最开始做的一版是展业大厅页面和互动白板页面(以下统称 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+ 人同时进行音视频,这块实际测试过。对我们的产品稳定性越来越好!

目录
相关文章
|
18天前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
9月前
|
前端开发 小程序
宠物管理系统-前端小程序-后端web
宠物管理系统-前端小程序-后端web
167 0
|
18天前
|
移动开发 小程序 前端开发
小程序与现代化移动Web体验的完美结合
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
18天前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
268 0
|
18天前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
|
18天前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
18天前
|
移动开发 小程序
微信小程序嵌入H5页面,最简单的兼容方式web-view
微信小程序嵌入H5页面,最简单的兼容方式web-view
|
8月前
|
小程序 前端开发 开发者
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
167 0
|
10月前
|
移动开发 小程序
微信小程序web-view里套H5页面
微信小程序web-view里套H5页面
52 0
|
6天前
|
小程序 UED
人力资源小程序的设计与开发步骤
人力资源小程序的设计与开发步骤