用活字格在应用中内置一个聊天群模块！

lijiakeji

本帖最后由 phoben 于 2023-2-28 11:59 编辑

PC版演示动图1.gif

因业务需要，要在应用中内置一个类似微信群的功能，需要根据项目自动创建群，自动拉取对应业务人员入群。
除此之外，还支持以下功能：

编辑成员
@特定人员（企业微信会推送提醒）
移动端能打开回复
有未读消息提醒
能隐藏群，有新消息时自动显示出来
能支持表情和附件
仿IM的我方和对方消息左右区分
聊天框拉取项目信息

如果你恰好需要也在系统内实现这么一个功能，尤其是专为业务而生的聊天群，可以参考此贴；

一、数据库构建

先看看数据库该怎么构建比较合理，这里我选择了用主子表的方式，主表存群信息，子表存聊天记录！

主表字段设计如下：
ID：系统自增
消息数量：记录群消息条数
群名称：文本字符
群成员：逗号隔开的用户名
隐藏成员：逗号隔开的用户名
关联项目类型：自定义项目类型编号，用来区分这个群是针对什么类型的业务；
项目编号：自定义项目编号，用来绑定某个业务编号；

子表字段设计如下：
ID：系统自增ID
群ID：所属主表ID
消息内容：具体的消息文本
已读人：逗号隔开的用户名
附件：文本字符串
特别提醒：逗号隔开的用户名
数据表设计没有什么特殊的，咱们功能少，其实不需要太多字段；

二、设计界面

最终界面效果如下：
PC版采用弹窗的方式
image.png98401488.png

移动端会收到消息提醒，点击卡片消息，则跳转到聊天窗口：
image.png346143187.png

界面设计的难点剖析：

双方信息需要左右分开：类似微信等IM软件，自己的消息颜色和位置都是不一样的；
手机端和PC端共用一个页面：上面两张图其实是一个页面（如果做两个页面，每次维护起来非常麻烦）；
@指定人的交互设计：这里需要用到一个插件，然后选择对应的人，最重要的是需要一点JS改变输入框的水印文字；

@指定人效果

首先来说页面怎么布局
因为PC端和移动端共用聊天页面，但是明显PC端的右侧，是多了一个群列表的显示，所以我们需要做嵌套处理
新建两个页面如下：
image.png611619567.png

项目聊天室 => 这个页面是用来给PC端用的
聊天室 => 这个页面是用来给手机端用的

PC页面里面用“页面容器”嵌入手机端页面即可。
实际上大家看到的PC弹窗中的聊天区域是子页面，如下图：
image.png386627806.png

设计器中的布局：

聊天室子页面：

=>

布局这下大家清楚了，这里面没太多难点，就是需要做一些列隐藏的动态效果
例如：点击右上角图标可收起隐藏详情信息、点击“@”图标展开成员列表、成员列表失去焦点自动收起....
这些都是活字格自带的功能（除了成员列表用的是本人发布的一款插件“FYMENU”）,只需要细心调整即可。

最终效果动图（手机端）：

移动端消息回复演示动图.gif

图中的@效果运用了一些JS，这里分享给大家：

var text = "@" + Forguncy.Page.getCell("九宫格").getValue()
$(".inputSend textarea").attr("placeholder",text);

复制代码

页面布局就告一段落，如果大家还有不明白的，可以留言交流。
剩下的环节，就是具体功能逻辑的实现了，这里总结出来给大家参考：

Q：如何实现发送消息？
A：发送消息可以写成服务端命令，传入群ID、消息内容、附件、@对象几个关键参数，然后就往数据表里增加数据即可；

image.png13111876.png