- 小程序中对初始时渲染太多wxml节点数做懒加载是很有必要的!这是一个真实案例。
前言 在写小程序时,有个页面由于要展示很多内容,光弹窗都6个,还有大量的列表,所以wxml节点数很多,超过了小程序建议的1000个节点以下。 懒加载示例项目代码已放到 github 和 码云 上 问题 这个内容很多的页面是分包的第一个页面,再此之前开发工具上能正常的运行,因此没有去管它。但是在上周六(2020年1月16日)后,开发工具上就出问题了!!!进入这个分包页面,视图半天才渲染,但事件是会立即执行的(看点击事件及接口请求情况得出的结论)。由于代码和前一天相比没有改动,并且手机上是正常的,所以第一时间就怀疑是不是开发工具出问题了,于是就删掉了工具,并重新下载了两次(一次最新稳定版,一次最新预发布版本),可还是不管用,依然这分包的这个页面,渲染不出来。 之后,又将手机的性能监听面板打开,发现再次渲染耗时那数值一直在闪动,但始终停留在0ms,就肯定的是小程序渲染出问题了。又怀疑只要是分包页面都有问题,就发现其他分包页面,并没有问题。 然后,想着之前用体验评分时,已经提示了wxml节点数过多,就试探性的注释了一些代码。好家伙,开发工具立马就正常了。 在确定问题前,没有第一时间考虑自己代码的问题,因为就过了一天开发工具就不能运行了,这确实很奇怪。 优化代码 初次渲染时,并不需要全部都渲染出来,所以可以做懒加载,显示时再渲染,通过 [代码]wx:if[代码] 来控制是否显示。 通过测试,做了懒加载后的体验评分在性能上是比不做要高的。下面是两张对比图: 没有使用懒加载 [图片] 使用了懒加载 [图片] 项目介绍: [图片] 如上图要实现的效果是,初始渲染时,只渲染玄幻栏目的数据,当往下滑动快触底时,再渲染下一个。如果初始渲染完成后,点击第四个都市栏目,则需把二三四个栏目都渲染出来。 懒加载原理 小程序通过setData后的数据,再放入wxml上就会被渲染,但是我们可以通过设置[代码]wx:if[代码]让,节点不显示,就不会去渲染。当滚动触底后,再通过一个标识值来判断后续的渲染情况。 此例子中与只有触底后渲染下面的视图,再加了点击左边的分类时,也做做渲染。 比如:初始时只渲染了第一组数据,当时我点击了第四个分类时,要将第二个,第三个,第四个的数据都显示出来。 这也是通过这个标识值来判断。 示意图: [图片] [图片] 项目地址: github地址 码云地址
2021-01-21 - 微信公共号 webview SPA页面 hash router 分享后丢失问题
之前版本hash router一直表现正常,最近新的项目中发现分享hash router页面会造成路由hash丢失(例如#/task/t1) 具体表现为: 1.当页面进入入口具有hash 例如: https://campaign.huazhu.com/static/2018/NewYear2019/#/ 在页面内通过hash路由跳转 则分享出来是正常的 具有hash router 2.当页面进入入口没有hash 例如: https://campaign.huazhu.com/static/2018/NewYear2019/ 在页面内通过hash路由跳转 则分享出来路由丢失 通过抓包确认 分享出来打开hash便已经丢失
2019-01-21 - 微信小程序里面不能长按识别企业微信群二维码么?
现在需要在微信小程序内长按识别企业微信群二维码活码,看了企业微信开发文档说可以在小程序长按识别,实测过程中无法识别,请问是为什么?
2022-07-28 - 小程序无法长按识别企业微信群二维码的问题?
你好,我们想在小程序中放置一个入群海报,用户可长按识别二维码,直接进入企业微信群。前几天测试的时候还可以的,然后这几天突然就不行了,只显示保存图片,没有了识别二维码功能。请问是怎么回事?
2022-07-28 - 为什么小程序不能长按识别企业微信群活码?
企业微信群特别需要活码,但是目前小程序无法长按识别企业微信群活码,在ios微信8.0.6还可以,升级到8.0.7以后就不能了,这个能不能放开小程序长按企业微信群活码。
2021-06-07