开始 上半年小米Max发布的时候，做了一个在朋友圈传播的模仿微信的群聊界面H5页面：一群公司的大咖在群里聊小米Max，用户可以向大咖们提问，以此了解产品。 页面的主体是群聊对话，同时在对话中包含了很多交互：图片、视频、动画、翻译等。如果用户是用微信打开的链接，还会获取用户名和头像，作为页面里的“我”来聊天，效果有点逼真~ 页面里有“彩蛋”，还能求红包喔~ 不啰嗦，先看页面效果。页面地址（手机浏览效果更好）。微信里访问这个链接 原页面对话和交互都很多，我择出了主要逻辑和交互放在codepen上，供有兴趣的同学参考~ 同时简单分析了自己的想法和思路，也算是一个总结~ Codepen 链接 整体布局 整体布局还是很简单的：一个可以滚动的div，承载所有对话；一个固定在底部的“输入框”，包含所有选项。 人物 & 对话数据 群聊里的所有人物都保存在 js 对象 _members 里，包含人物的 id、