电子科技网站模板,网站模板库免费,WordPress显示403,杭州设计师网站说明
我这边用小程序集成im#xff0c;然后结合公司的需求#xff0c;做了一个聊天的小程序#xff0c;在测试上线的时候没有问题#xff0c;结果到客户那边#xff0c;因为他们聊天的人多#xff0c;会话列表达到了300多条#xff0c;然后点击会话列表#xff0c;进入…说明
我这边用小程序集成im然后结合公司的需求做了一个聊天的小程序在测试上线的时候没有问题结果到客户那边因为他们聊天的人多会话列表达到了300多条然后点击会话列表进入聊天页面会卡顿。下图是测试环境的
尝试解决
因为我在im原有基础上增加了很多遍历逻辑im保存的用户信息较少所以先获取会话列表然后根据imid去自己数据库查询用户信息如果数据过多先去调用接口然后再将信息重新遍历设置到列表所以我以为是这种代码造成的卡顿结果把这些代码去掉以后还是卡顿
发现问题
将那些逻辑遍历之类的代码去掉发现列表第一次点击不卡顿第二次再点击卡顿所以我以为是会话页面的资源没有释放然后我在返回的时候各种释放类似于这样 但是呢没效果。后来就在想一样的代码为什么长列表就会卡顿然后在看文档的时候发现了一个专门针对长列表的解决组件试了一下快了很多
recycle-view
要严格按照文档来集成我就是因为少了一个配置报错以为是环境的问题差点放弃
解决
按照文档集成recycle-view把相关代码贴一下 布局代码
view classconversation-list-area!-- scroll-view classscoll-view scroll-ytrue --recycle-view batch{{batchSetRecycleData}} idrecycleIdrecycle-item wx:for{{recycleList}} wx:keyidConversationItem wx:keyindex id{{item.conversationID}} data-type{{item.type}} conversation{{item}} bindtaphandleRoute statusList{{statusList}} bind:transCheckIDtransCheckID charge{{transChenckIDitem.conversationID}} wx:if{{item.type!TIM#SYSTEM}} bind:updateLocalConversationListupdateLocalConversationList data-type{{item.type}}/ConversationItem/recycle-item/recycle-view!-- /scroll-view --/viewjs代码
ready() {wx.$TUIKit.on(wx.$TUIKitTIM.EVENT.MESSAGE_RECEIVED, this.$onMessageReceived, this);ctx createRecycleContext({id: recycleId,dataKey: recycleList,page: this,itemSize: { // 这个参数也可以直接传下面定义的this.itemSizeFunc函数height: this.rpx2px(150),width: this.rpx2px(750)}})},
...
rpx2px(rpxNum) {return rpxNum * app.globalData.rpx2px;},app.js设置 onLaunch: function () {wx.getSystemInfo({success: e {// 设计稿一般是 750 rpx, 但是 canvas 是 px;// 1rpx 转换成 px 的时候this.globalData.rpx2px 1 / 750 * e.windowWidth;}});.....}
globalData: {....rpx2px:0,}定义一个方法用于数据的更新或者添加 updateRecylerView(dataList) {wx.hideLoading()if(dataList.length0){ctx.splice(0, 99999);ctx.forceUpdate()return}if (ctx.getList() null || ctx.getList().length 0) {ctx.append(dataList)} else {if(ctx.getList().length!dataList.length){ctx.splice(0, 99999);ctx.append(dataList)}else{ctx.update(0, dataList);ctx.forceUpdate()}}},因为在使用的过程中发现不同的数据比如现在页面上是有数据的然后刷新以后没有数据调用ctx.update(0, dataList)竟然没更新所以对各种情况进行了适配
其他优化
我用小程序自带的工具进行了测评可以测出一些不易发现的问题比如后台没有对图片大小进行限制竟然有将近0.5m大小的图片如果这样的图片多了占用资源也会很多当然很卡
大家在开发小程序的时候如果涉及到列表在预期的将来会有很多数据的情况下可以本地用遍历赋值制造大量数据测试还是使用长列表如果没那么多用普通列表就可以了在开发完以后可以用上述的工具进行评分会给出哪些问题需要优化
