微信小程序 web-view 下渲染 cover-view,文字消失 #126

简介: 微信小程序 web-view 下渲染 cover-view,文字消失 #126

问题背景


上半年最开始做的一版是展业大厅页面和互动白板页面(以下统称 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 视图


现象


正常


文字消失

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


微信小程序架构图



展业小程序架构图


目录
相关文章
|
14天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
13天前
|
人工智能 小程序 API
文字转语音神器+Python编程搞定语音报时小程序
文字转语音神器+Python编程搞定语音报时小程序
13 2
|
14天前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
15天前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
2月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
3月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
151 0
|
3月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
74 0
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
73 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
68 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
2月前
|
存储 小程序 JavaScript

热门文章

最新文章