专业小程序设计开发——助力新电商新零售
电话+V：159999-78052，欢迎咨询聊天小程序教程下载手机版，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]
一、怎么聊天小程序
第一步：开“微信”，击“发现"。
第二步：进入一个小程序，点击右上角。
第三步：击“转发”，发送到要添加聊天小程序的群。
第四步：进入该群，点击右上角的“两个小人“图案按钮。
第五步：在聊天小程序中，就能看到这个小程序了。。
二、微信聊天小程序怎么用
微信聊天小程序需要微信更新至最新版本，步骤如下：
1、打开微信后选择一个群聊；
2、打开群聊后，点击右上角的按钮，进入聊天信息页面；
3、在群公告下面可以看到聊天小程序；
4、点击进入后，界面会显示群聊中自己或别人已发送的小程序，点击即可进入小程序。
开源IM聊天程序HarmonyChat：基于鸿蒙NEXT的WebSocket协议
2025-01-02 11:45·移动端IM技术分享1、HarmonyChat是什么？
HarmonyChat是一个简洁的鸿蒙NEXT上的基于WebSocket协议的聊天客户端，它基于MobileIMSDK通信库，有完善的网络通信通力、简洁的聊天界面UI、合理的代码拆分和逻辑实现，非常适合学习研究或直接用于简单的鸿蒙NEXT单页聊天项目中。HarmonyChat的源码下载请见本文：“5、源码的开源仓库地址”。2、为什么有HarmonyChat？我本身是MobileIMSDK开源框架的作者，正好近期趁着开发MobileIMSDK的鸿蒙NEXT端演示界面的机会，把相关的UI代码整理出来，希望在当前鸿蒙有质量的资料比较少的情况下，能带给需要的人一点启发或帮助。你如果在HarmonyChat中看到有关MobileIMSDK的资料和字眼也不要奇怪，因为本工程中的代码、资料、想法，都是从MobileIMSDK的鸿蒙NEXT端工程中整理和抽取出来的，目的是方便需要的人从单独的UI界面和功能来学习和使用。3、谁需要HarmonyChat？目前高质量的鸿蒙NEXT端IM聊天方面的开源代码还非常少（几乎找不到有价值的开源分享），所以我希望能把自已编写的相关代码抽取出来供需要的人借鉴和使用，共同进步。HarmonyChat特别适合以下开发者学习、研究或直接使用：1）?想学习使用ArkTS和ArkUI开发聊天界面的；2）?想学习如果在鸿蒙NEXT中对接网络通信代码的；3）?想学习IM聊天程序如何在鸿蒙NEXT中实现UI和网络数据的逻辑分离的；4）?想得到可以直接使用的单页聊天界面的；5）?想要开发IM聊天应用，但需要一个脚手架作为起点的。4、实现了哪些特性？1）?实现了一个UI简洁、代码清晰、逻辑分层合理的聊天界面（可以直接复制到一些单页聊天产中品用，比如客服聊天）；2）?消息的送达状态在UI界面上会自动更新显示（包括发送中、已送达、送达失败）；3）?网络连接状态的UI显示（含心跳呼吸灯效果）；4）?实现了真正的网络通信和聊天（包括完整的多端互踢、网络心跳、掉线重连、消息重传、消息应答、消息去重等），这是基于MobileIMSDK通信库实现的；5）?实现了隐私提醒、闪屏、登录界面的判断和跳转逻辑（可以直接复制这几个界面到你的产品中去用用）；6）?鸿蒙NEXT的List列表在LazyForEach带来的性能优化情况下的动态UI刷新；7）?利用DataSource和一个全局消息缓存管理机制实现网络数据与UI的解偶（这是IM消息和UI解偶的关键）；8）?实现了跟微信基本一致的消息时间计算和显示逻辑（人性化时间、超过2分钟才显示时间）；9）?合理的拆分了不同消息类型组件式扩展的实现逻辑，方便扩展更多消息类型的UI显示；10）?解决了消息文本超长导致Row()组件被挤出屏幕可视区显示的问题（这可能是鸿蒙的bug）；11）?一些鸿蒙NEXT简单动画的应用；12）?适配全面屏；13）?详细的代码注释，便于学习研究。5、源码的开源仓库地址HarmonyChat源码在以下托管仓库都是同步更新：1）Github：https://github.com/JackJiang2011/harmonychat（*可能需要梯子）2）Gitee：https://gitee.com/jackjiang/harmonychat（*国内仓库，速度快）3）Gitcode：https://gitcode.com/hellojackjiang2011/harmonychat（*国内仓库，速度快）开源MobileIMSDK的源码托管仓库：1）Github：https://github.com/JackJiang2011/MobileIMSDK2）Gitee：https://gitee.com/jackjiang/MobileIMSDK3）Gitcode：https://gitcode.com/hellojackjiang2011/MobileIMSDK6、HarmonyChat工程概览7、实际运行截图1）Demo的登陆界面运行截图（点击可看大图▼）：2）Demo的主界面运行截图（点击可看大图▼）：3）Demo运行的同时，可以查看详细的log输出（方便调试）：8、技术要点1：关于服务端的部署和运行HarmonyChat中默认连接的是MobileIMSDK开源工程的测试服务端，因条件有限，建议你自已部署服务端。资料请参考：《MobileIMSDK开源服务端的部署指南》。你也可以直接拉取MobileIMSDK开源服务端的源码自行编译和运行，就像下面这样：PS：MobileIMSDK开源服务端的源码可以在这个目录下找到：点此查看?，也可以直接用编译好的程序双击run.bat就可以运行（点此查看?）。如上图所示：HarmonyChat中因为用到的是鸿蒙Next的WebSocket协议，所以请确保MobileIMSDK开源服务端的WebSocket端口是开启的哦。9、技术要点2：关于消息文本超长导致Row()组件被挤出屏幕可视区的问题问题描述：这是我在编写文本聊天消息组件的过程中遇到的，原图我没有截出来，问题大致是下图这样（这图是我在网上找的）。问题的原因就是：为了实现聊天消息气泡中的超长文本能自适应长度和高度，所以是无法使用layoutWeight属性的，这会导致Text()所在在Row()父组件，无法正确的计算自已的宽度。解决办法：就是用Flext()替代Row()，如下图所示。10、技术要点3：关于仿微信消息时间显示的代码实现大家平时使用微信比较多，它的消息时间显示是很人性化的，所以现在开发IM聊天应用时，这个消息时间的人性化显示是必做的。以下是本工程中实现的效果（跟微信几乎一样）：如上图所示，主要实现的是：对消息时间进行了人性化处理（比如昨天上午xx、今天下午xx、星期x等），以有超过2分钟才显示时间的这种逻辑。完整代码涉及到几个方法，关键代码如下（具体大家可以看
/entry/src/main/ets/pages/utils/ToolKits.ets中的相关方法）：/***仿照微信中的消息时间显示逻辑，将时间戳（单位：毫秒）转换为友好的显示格式.**1）7天之内的日期显示逻辑是：今天、昨天(-1d)、前天(-2d)、星期？（只显示总计7天之内的星期数，即<=-4d）；*2）7天之外（即>7天）的逻辑：直接显示完整日期时间。*@paramtimestamp时间戳（单位：毫秒），形如：1550789954260*@parammustIncludeTimetrue表示输出的格式里一定会包含“时间:分钟”*，否则不包含（参考微信，不包含时分的情况，用于首页“消息”中显示时）*@paramtimeWithSegmentStr本参数仅在mustIncludeTime=true时有生效，表示在时间字符串前带上“上午”、“下午”、“晚上”这样的描述**@return输出格式形如：“刚刚”、“10:30”、“昨天12:04”、“前天20:51”、“星期二”、“2019/2/2112:09”等形式*@authorJackJiang([url=http://www.52im.net/thread-2792-1-1.html]http://www.52im.net/thread-2792-1-1.html[/url])*/staticgetTimeStringAutoShort2(timestamp:number，mustIncludeTime:boolean，timeWithSegmentStr:boolean):string{//当前时间letcurrentDate:Date=newDate();//目标判断时间letsrcDate:Date=newDate(timestamp);letcurrentYear:number=currentDate.getFullYear();letcurrentMonth:number=(currentDate.getMonth()+1);letcurrentDateD:number=currentDate.getDate();letsrcYear:number=srcDate.getFullYear();letsrcMonth:number=(srcDate.getMonth()+1);letsrcDateD:number=srcDate.getDate();letret:string='';//要额外显示的时间分钟lettimeExtraStr='';if(mustIncludeTime){//lettimeExtraStr=(mustIncludeTime?""+_formatDate(srcDate，"hh:mm"):"");timeExtraStr=""+ToolKits.getTimeHH24Human(srcDate，timeWithSegmentStr);}//当年if(currentYear===srcYear){letcurrentTimestamp:number=currentDate.getTime();letsrcTimestamp:number=timest//相差时间（单位：毫秒）letdeltaTime:number=(currentTimestamp-srcTimestamp);//当天（月份和日期一致才是）if(currentMonth===srcMonthcurrentDateD===srcDateD){////时间相差60秒以内//if(deltaTime<60*1000)//ret="刚刚";////否则当天其它时间段的，直接显示“时:分”的形式//else//ret=_formatDate(srcDate，"hh:mm");//当天只需要显示时间分钟，且必须显示“上午”、“下午”这样的时间段描述ret=ToolKits.getTimeHH24Human(srcDate，true);}//当年当天之外的时间（即昨天及以前的时间）else{//昨天（以“现在”的时候为基准-1天）letyesterdayDate:Date=newDate();yesterdayDate.setDate(yesterdayDate.getDate()-1);//前天（以“现在”的时候为基准-2天）letbeforeYesterdayDate:Date=newDate();beforeYesterdayDate.setDate(beforeYesterdayDate.getDate()-2);//用目标日期的“月”和“天”跟上方计算出来的“昨天”进行比较，是最为准确的（如果用时间戳差值//的形式，是不准确的，比如：现在时刻是2019年02月22日1:00、而srcDate是2019年02月21日23:00，//这两者间只相差2小时，直接用“deltaTime/(3600*1000)”>24小时来判断是否昨天，就完全是扯蛋的逻辑了）if(srcMonth===(yesterdayDate.getMonth()+1)srcDateD===yesterdayDate.getDate()){ret="昨天"+timeExtraStr;//-1d}//“前天”判断逻辑同上elseif(srcMonth===(beforeYesterdayDate.getMonth()+1)srcDateD===beforeYesterdayDate.getDate()){ret="前天"+timeExtraStr;//-2d}else{//跟当前时间相差的小时数letdeltaHour:number=(deltaTime/(3600*1000));//如果小于或等7*24小时就显示星期几if(deltaHour<=7*24){letweekday=newArray<string>(7);weekday[0]="星期日";weekday[1]="星期一";weekday[2]="星期二";weekday[3]="星期三";weekday[4]="星期四";weekday[5]="星期五";weekday[6]="星期六";//取出当前是星期几letweedayDesc:string=weekday[srcDate.getDay()];ret=weedayDesc+timeExtraStr;}//否则直接显示完整日期时间elseret=ToolKits.formatDate(srcDate，"M月d日")+timeExtraStr;}}}//往年else{ret=ToolKits.formatDate(srcDate，"yy年M月d日")+timeExtraStr;}returnret;}11、技术要点4：关于网络数据与UI界面解偶的实现在IM聊天应用中，网络数据与UI界面解偶是非常关键的，否则网络代码的复杂性跟应用层逻辑的复杂性合并在一起，那代码会越写越困难。HarmonyChat中主要是借助了一个全局的消息数据管理器和IDataSource，实现了与聊天列表UI界面的解偶。全局的消息数据管理器代码实现（详见
/entry/src/main/ets/pages/utils/MessagesProvider.ets）：/***聊天消息的缓存数据管理提供者（集中管理所有的聊天消息和指令，消息来源为网络层通信数据包和本地发出的包*，消息显示方式通过MessagesDataSource与UI界面进行解偶显示）。**代码参考自IM产品RainbowChat：[url=
http://www.52im.net/thread-19-1-1.html]
http://www.52im.net/thread-19-1-1.html[/url]**@authorJackJiang([url=http://www.52im.net/thread-2792-1-1.html]http://www.52im.net/thread-2792-1-1.html[/url])*/exportdefaultclassMessagesProvider{/**聊天界面中，消息的显示时间间隔（单位：毫秒）：默认是2分钟内的消息只在第一条消息上显示时间，否则会再次显示时间*///参考资料：[url=
http://www.52im.net/thread-3008-1-1.html#40]
http://www.52im.net/thread-3008-1-1.html#40[/url]privatestaticreadonlyCHATTING_MESSAGE_SHOW_TIME_INTERVAL:number=2*60*1000;/**真正的聊天软件中，此处应改造为<key=uid，value=Array<Message>>这样的Map集合，用于按uid分别存储与各好友的聊天消息*/privatemessages:Array<Message>=[];/***加入一条新消息。**@paramm消息对象*/putMessage(m:Message):void{//以下代码用于判断并实现仿微信的只显示2分钟内聊天消息的时间标识（参考资料：[url=
http://www.52im.net/thread-3008-1-1.html#40]
http://www.52im.net/thread-3008-1-1.html#40[/url]）letpreviousMessage:Message|undefined=undefined;letmessagesSize:number=this.messages.length;if(messagesSize>0){previousMessage=this.messages[messagesSize-1];}MessagesProvider.setMessageShowTopTime(m，previousMessage);//将此新消息对象放入数据模型(列表)this.messages.push(m);//通知应用层更新uiIMClientManager.getInstance().getEmitter().emit(UIEvent.UIEVENT_messageAdded，this.messages.length-1);}/***获得消息数据缓存集合。**@returns消息数据缓存集合*/getMessages():Array<Message>{returnthis.messages;}/***添加一条系统消息（显示在聊天列表中）。**@paramcontent消息内容*/addSystemMessage(content:string):void{letm:Message=Message.createChatMsgEntity_INCOME_SYSTEAMINFO('0'，content，0);this.putMessage(m);}/***更新指定指纹码的消息的发送状态（更新单条消息）。**@paramfingerPrint消息指纹码（消息id）*@paramsendStatus发送状态，see{@linkMsgSendStatus}*/updateMessageSendStatus(fingerPrint:string，sendStatus:MsgSendStatus):void{//遍历消息列表for(leti=0;i<this.messages.length;i++){letm=this.messages[i];//对符合条件的消息对象进行消息发送状态的设置if(mm.isOutgoing()m.fingerPrintOfProtocal===fingerPrint){//更新状态m.sendStatus=sendStatus;//通知应用层更新ui（参数就是消息所在索引）IMClientManager.getInstance().getEmitter().emit(UIEvent.UIEVENT_messageUpdate，i);}}}/***更新指定指纹码的消息的发送状态（更新多条消息）。*目前用于QoS送达机制中告诉应用层有哪些原始消息报文未成功送达给对方。**@paramprotocals原始消息报文对象数组，数组中Protocal对象指纹码（消息id）就是本次要更新的对象，这个数组目前来自于SDK的EventType.onMessagesLost事件通知*@paramsendStatus发送状态，see{@linkMsgSendStatus}*/updateMessagesSendStatus(protocals:Protocal[]，sendStatus:MsgSendStatus):void{letupdateIndexes:number[]=[];//遍历消息列表//this.messages.forEach((m:Message)=>{for(letmi=0;mi<this.messages.length;mi++){letm=this.messages[mi];for(leti=0;i<protocals.length;i++){letp=protocals[i];//对符合条件的消息对象进行消息发送状态的设置if(mm.isOutgoing()m.fingerPrintOfProtocal===p.fp){//更新状态m.sendStatus=sendStatus;//加入已更新索引列表集合updateIndexes.push(mi);break;}}}if(updateIndexes.length>0){//通知应用层更新ui（参数就是消息所在索引）IMClientManager.getInstance().getEmitter().emit(UIEvent.UIEVENT_messagesUpdate，updateIndexes);}}/***清空所有消息。*/clear():void{this.messages=[];}/***为当前的消息对象，设置是否显示消息时间标识。**此时间显示逻辑是与微信保持一致的：即只显示5分钟内聊天消息的时间标识，参考资料：[url=
http://www.52im.net/thread-3008-1-1.html#40]
http://www.52im.net/thread-3008-1-1.html#40[/url]**@paramtheMessage当前消息对象，不可为null*@parampreviousMessage当前消息的自然时间的上一条消息，此消息可为空（此为空即表示当前消息就是消息集合中的第一条消息）*/privatestaticsetMessageShowTopTime(theMessage:Message，previousMessage:Message|undefined):void{if(theMessage){if(previousMessage===undefined){ 