微信小程序集成腾讯im，会话列表数据过多（长列表），卡顿问题的解决

说明

我这边用小程序集成im，然后结合公司的需求，做了一个聊天的小程序，在测试上线的时候没有问题，结果到客户那边，因为他们聊天的人多，会话列表达到了300多条，然后点击会话列表，进入聊天页面，会卡顿。下图是测试环境的

尝试解决

因为我在im原有基础上，增加了很多遍历逻辑，im保存的用户信息较少，所以先获取会话列表，然后根据imid，去自己数据库查询用户信息，如果数据过多，先去调用接口，然后再将信息重新遍历设置到列表，所以我以为是这种代码造成的卡顿，结果把这些代码去掉以后，还是卡顿

发现问题

将那些逻辑遍历之类的代码去掉，发现列表第一次点击，不卡顿，第二次再点击，卡顿，所以我以为是会话页面的资源没有释放，然后我在返回的时候各种释放，类似于这样

但是呢，没效果。后来就在想，一样的代码，为什么长列表就会卡顿，然后在看文档的时候，发现了一个专门针对长列表的解决组件，试了一下，快了很多

recycle-view

要严格按照文档来集成，我就是因为少了一个配置，报错，以为是环境的问题，差点放弃

解决

按照文档集成recycle-view，把相关代码贴一下
布局代码

<view class="conversation-list-area">
			
			<recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
				<recycle-item wx:for="{{recycleList}}" wx:key="id">
					<ConversationItem wx:key="index" id="{{item.conversationID}}" data-type="{{item.type}}" conversation="{{item}}" bindtap="handleRoute" statusList="{{statusList}}" bind:transCheckID="transCheckID" charge="{{transChenckID===item.conversationID}}" wx:if="{{item.type!='@TIM#SYSTEM'}}" bind:updateLocalConversationList="updateLocalConversationList" data-type="{{item.type}}">
					ConversationItem>
				recycle-item>
			recycle-view>
			
		view>

js代码

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.length==0){
						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大小的图片，如果这样的图片多了，占用资源也会很多，当然很卡

大家在开发小程序的时候，如果涉及到列表，在预期的将来，会有很多数据的情况下（可以本地用遍历赋值，制造大量数据测试），还是使用长列表，如果没那么多，用普通列表就可以了，在开发完以后，可以用上述的工具进行评分，会给出哪些问题需要优化