开始

上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品。

页面的主体是群聊对话,同时在对话中包含了很多交互:图片、视频、动画、翻译等。如果用户是用微信打开的链接,还会获取用户名和头像,作为页面里的“我”来聊天,效果有点逼真~

不啰嗦,先看页面效果。页面地址(手机浏览效果更好)。微信里访问这个链接 页面里有“彩蛋”,还能求红包喔~

原页面对话和交互都很多,我择出了主要逻辑和交互放在codepen上,供有兴趣的同学参考~ 同时简单分析了自己的想法和思路,也算是一个总结~

Codepen 链接

整体布局

整体布局还是很简单的:一个可以滚动的div,承载所有对话;一个固定在底部的“输入框”,包含所有选项。

人物 & 对话数据

群聊里的所有人物都保存在 js 对象 _members 里,包含人物的 id、姓名、和头像。

var _members = {
lj: {
id: 'lj',
name: '雷军',
avatar: _imgUrl + 'a-lj.png',
},
}

所有的对话内容都保存在一个 js 对象 _dialog 里,_dialog 里保存了每段对话(用户不用做任何操作,自动播放的一组,几条消息),每段对话都包含若干条消息,通过给每条消息设置类型、作者、内容、特殊事件,让聊天内容作为元数据逐条展示。

每条消息都包括:

  1. 类型(五种) - plain, picture, video, system, animation;
  2. 作者 - _member 里的一个人物;
  3. 内容 - 消息内容;
  4. 停顿时间 - 消息出现后停顿多长时间继续播放下一句对话(不设置的话则随机停顿时间);
  5. 特殊标志(会触发特殊事件) - 用 flag 字段表示;
var _dialog = {
d0: [{
type: 'plain',
author: _members.lj,
content: userName + ' 你好,are you ok?',
pause: 2000,
}, {
type: 'plain',
author: _members.lwq,
content: '欢迎 ' + userName + gif.welcome + gif.welcome + gif.welcome,
flag: 'emoji-welcome',
},]
// ... more dialog
}

动起来!

有了元数据之后就很简单了~ 循环某个对话,逐条将里面的消息数据拼接成html, 然后添加到页面上。当用户点击“输入框”里的某个问题之后,触发相应的对话。如果消息里包含 flag,通过 flag 的内容来触发不同的特殊事件。

然后~ 当当当~ 到此我们的页面已经初具雏形了~

真的就这么简单?

虽然页面已经初具雏形,可是基础的对话效果还很哏.. 想象一下每隔一小会儿页面上就突然多出一条消息,效果很奇怪的。为什么微信聊天的时候就没有这种生硬的感觉呢?笔者默默的去观察了一下微信,发现每条消息出现的时候,都有一个轻轻向上冒的效果~ 同时上面的消息都会一起向上滚动。

这种简单的效果,对于能用css解决的事情,尽量不写js的笔者来说,简直不要太轻松好吧。

于是给每条消息都添加了一个css动画 goup,这样在消息的 DOM 元素被添加到页面上时,消息自动就有一个向上冒出的效果。同时,每添加一条消息,都把对话区域平滑滚动到底部(便于显示最新的消息),当然这个需要写js了.. 这样之前的消息都会一起向上滚动。

然后

接着添加各种交互,音效,完善动画,对话等等(你不会想知道这包含了多少工作量的。。)
然后当当当~ 这个H5页面就算完成了。

最后

很想说,这个页面的完成离不开我们靠谱的设计师和策划童靴,大家一次次的完善,记不清到底修改了多少次.. 看着页面慢慢从一个雏形,直到终于上线的那一刻(虽然上线后也改了hin多次..)~ 还是很开心的~

第一次做H5,有收获也有遗憾,希望下次更好~

原始链接

http://varnull.cn/h5wechat/

一个模仿微信群聊的H5页面的更多相关文章

  1. 如何用20行Python代码打造一个微信群聊助手?

    今天要教大家一个黑科技,20行代码实现自己定制的微信群聊助手,可以用来活跃群气氛,好多群主创建完群后,拉完一群人,之后就一片寂静,有个群聊助手,就可以帮忙活跃群里气氛,通过今天在自己的微信上有一大批好 ...

  2. 使用java做一个能赚钱的微信群聊机器人(2020年基于PC端协议最新可用版)

    前言 微信群机器人,主要用来管理群聊,提供类似天气查询.点歌.机器人聊天等用途. 由于微信将web端的协议封杀后,很多基于http协议的群聊机器人都失效了,所以这里使用基于PC端协议的插件来实现. 声 ...

  3. 基于itchat的微信群聊小助手基础开发(一)

    前段时间由于要管理微信群,基于itchat开发了一个简单的微信机器人 主要功能有: 图灵机器人功能 群聊昵称格式修改提示 消息防撤回功能 斗图功能 要开发一个基于itchat的最基本的聊天机器人,在g ...

  4. 微信小程序跳H5页面

    主页面:index.wxml 主页面:index.js ↑跳转到另一个wxml页面→recharge.wxml recharge.wxml web-view中设置跳转h5的链接,可以加上需要的参数: ...

  5. Qt 做一个类似微信滑动聊天界面的demo

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://www.cnblogs.com/lihuidashen/p/115889 ...

  6. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  7. 工作小记:企业微信 嵌H5页面 用户权限获取匹配

    一.背景 领导让研究一个活儿:企业微信开发H5应用,微信端客户进入H5页面跟现有的Web系统打通用户权限.通俗的讲:嵌入企业微信H5页面,客户点进去按原权限加载内容.开发者中心有文档,附上两个关键链接 ...

  8. 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT

    上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...

  9. 微信支付开发(7) H5支付

    关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html 本文 ...

随机推荐

  1. JavaScript面向对象—继承的实现

    JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...

  2. 图解|用好MySQL索引,你需要知道的一些事情

    我是蝉沐风. 这一篇文章来聊一聊如何用好MySQL索引. 为了更好地进行解释,我创建了一个存储引擎为InnoDB的表user_innodb,并批量初始化了500W+条数据.包含主键id.姓名字段(na ...

  3. LGP3709题解

    题目大意 简化后为区间众数出现次数,简化前为[数据删除] 吐槽 为什么题解只有一篇分块,剩下的全是莫队? 这题不是蒲公英?这和算导例题有何区别??? 为什么现在的人都喜欢去看题解而不注重思维??? 莫 ...

  4. HCNP Routing&Switching之组播技术-组播分发

    前文我们了解了组播技术中的igmp-snooping相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15860484.html:今天我们来聊一聊组播技术 ...

  5. CPU是海王?聊聊 主/子线程 和 同/异步 的关系

    最近表弟一直在找实习,经常会问我一些问题,有些问题在没有经历过真实工作时是真的不好理解的,所以我开了这个[表弟专栏],专门为找工作的表弟解决一些疑惑. 这篇文章从计算机发展的角度出发,描述为什么计算机 ...

  6. 网络编程 并发socketserver

    网络编程 并发socketserver ipv4.ipv6 ip协议:规定网络地址的协议 B/S架构 C/S架构 bs是cs的一种 B/S是浏览器和服务端架构 C/S是客户端和服务端架构 osi七层协 ...

  7. ElasticSearch7.3 学习之定制动态映射(dynamic mapping)

    1.dynamic mapping ElasticSearch中有一个非常重要的特性--动态映射,即索引文档前不需要创建索引.类型等信息,在索引的同时会自动完成索引.类型.映射的创建. 当ES在文档中 ...

  8. K-good number Theory + 数学问题

    这道题是我做CodeTon Round1时的D题,总的来看思路很重要,有几个比较明显的切入问题的角度,要选择到最优的那个: 先看题目: 我们可以发现,这道题的描述一目了然,就是说我们能不能找k个数的和 ...

  9. 在Windows11使用WSA运行Google play会遇到的问题

    前提一是要有adb工具 网盘链接:https://pan.baidu.com/s/1MAdq4GsxkW7dqq689d_gQw 提取码:24q2 前提二是会使用 MagiskOnWSA--解决了两个 ...

  10. vue Cannot read property ‘tapPromise‘ of undefined

    https://blog.csdn.net/qq379682421/article/details/111574290 https://github.com/SimenB/add-asset-html ...