小程序项目新增一聊天室功能;控件是用该博主的https://blog.csdn.net/sinat_27612147/article/details/78456363;感谢博主提供如此方便的源码;功能需求:一:WebScoket链接这个是要创建小程序与后台间的连接,比较简单,微信api都有提供;https://developers.weixin.qq.com/miniprogram/dev/api/network-socket.html#wxclosesocket;二、聊天室置底本人使用该控件时发现并没有很好的解决聊天置底问题,跟进自己想法改造下;1、组件<scroll-view> 设置scroll-top属性 这是我一开始的处理方式,在收到消息和发送消息时获取聊天记录列表,然后根据长度动态设置 scroll-top值let chatItems = this.data.chatItems;this.setData({ scrollTopVal:chatItems.length*60+60 }) //scrollTopVal是<scroll-view/>的scroll-top属性值,*60是我这一个聊天记录大概60如果全是文字聊天这样是可行的,但是一旦出现了图片就不可行了。因为图片聊天高度是超过60的,我也不可能每次都去for聊天记录有多少图片,多少文字。 2、组件<scroll-view scroll-into-view=”{{toView}}”> 设置scroll-into-view属性(值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素)根据这个属性,我再列表的下方再添加一个<view id=”toView”></view>的空标签;然后同理在发送和接受到消息的时候this.setData({ toView:’toView’})这样我们就可以保证scroll-view可以置底了,美滋滋;三、聊天记录历史描述:我们在小程序上是不可能保存所有的聊天记录,所以暂时是只保存了50条记录,超过50条咋办?肯定是通过接口请求后台再渲染到小程序上。原以为很简单,只要根据<scroll-view/>提供的 bindscrolltoupper 属性便可实现,即滚动到顶部时触发scrolltoupper 事件请求接口获取数据,再将新老数据concat拼接。问题来了:这样一来,我们就永远是在顶部了,看过往数据只能上拉,看完再下拉到顶部加载新的记录;我们要实现的是像微信那样看记录只要一直下拉。解决方案:依旧是用scroll-into-view属性,我们拿到聊天记录数据时就给第一天添加一个id,然后出发scrolltoupper事件时获取该id,然后数据拼接完成后通过scroll-into-view回到id位置;(该方案并不优雅,还望各位大神提供更好的解决方案,谢谢).jsconsole.log(‘更多历史记录’);let store = [{type:’text’,content:’测试1′},{type:’text’,content:’测试2′},{type:’text’,content:’测试3′},{type:’text’,content:’测试4′},{type:’text’,content:’测试5′},{type:’text’,content:’测试6′},{type:’text’,content:’测试7′},{type:’text’,content:’测试8′},{type:’text’,content:’测试9′},{type:’text’,content:’测试10′},{type:’text’,content:’测试11′},{type:’text’,content:’测试12′},{type:’text’,content:’测试13′}];//测试数据 let currChatItems = this.data.chatItems; store[0].showId = new Date().getTime();//给第一条数据添加id(注:scroll-into-view的值应为某子元素id(id不能以数字开头)) let id=”; //列表每个有id我都添加了.prevId这个类,是为了方便我下边找 wx.createSelectorQuery().selectAll(‘.prevId’).fields({ id:true, }, function(res){ id = res[0].id; console.log(res) }).exec(); this.setData({ chatItems:store.concat(currChatItems), },()=>{ this.setData({ toView:id, loading:true }) }) }.wxml<template name=”chat-item”> <view id=”{{item.showId?’view’+item.showId:”}}” class=”{{item.showId?’prevId’:”}}”> <block wx:if=”{{item.type!==’custom’}}”> <template is=”chat-time” data=”{{showTime:item.showTime,time:item.time}}”/> <template is=”chat-word” data=”{{length:length,index:index,headUrl:item.headUrl,isMy:item.isMy,showTime:item.showTime,time:item.time,content:item.content,type:item.type,sendStatus:item.sendStatus}}”/> </block> <block wx:else> <template is=”chat-custom” data=”{{content:item.content}}”/> </block> </view></template>
微信小程序聊天室功能
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序聊天室功能
相关推荐
微信小威海E企盈小程序程序功能函数小结(手机号验证*、密码验证*、获取验证码*)
微信小程序(十)之消息推送配置(token验证失败的桃江县E企盈小程序解决方案)
微信小程序:打开设置(利津县E企盈小程序权限)页面
微信小程安溪县E企盈小程序序云开发云数据库读写权限
西乡县E企盈小程序微信小程序JSAPI支付参数异常以及验证签名失败总结
个人怎么宝应县E企盈小程序做微信小程序?
拼多多无货源商家一键上传南溪县E企盈小程序同行店铺宝贝软件?
在小程平山县E企盈小程序序中使用阿里文字图标库
小程序获取古冶区E企盈小程序当前页面路径
微信小程序之消息推送配置Token验乐陵市E企盈小程序证失败已解决
微信小程序实荥经县E企盈小程序现原理浅析
微信小程序之tok阜南县E企盈小程序en验证
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务