Wechat-Chat-Interface

基于原生CSS的微信聊天界面 | WeChat chat interface based on native CSS

• 效果截图
• 如何使用
• 开发环境
• 关于作者

---

效果截图

• 动态滑动效果.gif

如何使用

1. 替换img文件夹下两个头像图片

2. 编写一个json格式的聊天文件

   • leftPrefix/rightPrefix: 可自行指定发送方前缀标识符(后期以此作为分隔)

   • recordGroup

     • time
     • records: 前缀之后即为显示在屏幕上的聊天信息

     {
         "leftPrefix": "[left-person]",
         "rightPrefix": "[right-person]",
         "recordGroup": [
             {
                 "time": "2020年8月11日",
                 "records": [
                     "[left-person]hello",
                     "[right-person]world",
                 ]
             }
         ]
     }

3. 如果需要修改手机尺寸，理论上只需要修改最上层div.WechatRecordGroup的尺寸，其他大小可以进行大致的自适应*(但很不推荐，并没有非常关注自适应)*

开发环境

• 操作系统: macOS Catalina 10.15.5
• 开发语言: HTML + CSS + JavaScript

关于作者

姓名👤	张喆 | doubleZ
学校🏫	同济大学
联系方式✉️	[email protected]