微信小程序 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+ 人同时进行音视频,这块实际测试过。对我们的产品稳定性越来越好!

目录
相关文章
|
7月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
7月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
710 0
|
6月前
|
传感器 小程序 搜索推荐
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
通过电子班牌设备和智慧校园数据平台的统一管理,在电子班牌上,班牌展示、学生上课刷卡考勤、考勤状况汇总展示,课表展示,考场管理,请假管理,成绩查询,考试优秀标兵展示、校园通知展示,班级文化各片展示等多种化展示。
97 0
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
4月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
6月前
|
监控 小程序 前端开发
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
195 0
|
6月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校疫情防控web系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校疫情防控web系统附带文章源码部署视频讲解等
36 0
|
7月前
|
移动开发 小程序 前端开发
小程序与现代化移动Web体验的完美结合
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
7月前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
886 0