前言： 这个篇章会介绍到有关表情，更多展示，语音样式的部分实现。（如果完全实现，一个篇章讲不完，先把外壳做出来）

1.是否是语音输入？

习惯对于来回切换的状态使用v-show（与v-if的区别自己去查），同时上面这样的写法注意他们所依赖的状态是否明确的只有两个。

2.表情

在common/js下创建demo.js，用于渲染表情

let emoji = [
	['😀','😁','😂','🤣','😃','😅','😆','😉'],
	['😊','😋','😎','😍','😘','😗','😗','😙'],
	['😚','🤗','😀','🤔','😐','😑','😶','🙄'],
	['🙄','😏','😣','😥','🤐','😯','😪','😫'],
	['😴','😌','😛','😜','😝','🤤','🤤','😒'],
	['😓','😭','😰','💪','🖕','✌','🤘','🙏'],
	['✋','👌','👍','👎','✊','👊','👋','👏']
]

module.exports.emoji = emoji;

在我们的页面把emoji引入，接着在onload应用生命周期中将语句加入。

注意需要说明一下，我们如果直接this.emoji = emoji 是不能直接得到表情数组的。因为我们是模块导出。所以需要再.emoji。

看看我们的页面结构代码。我们想要他是那种可以滑动的设计，uni-app中有现成的组件供我们使用。swiper。

https://uniapp.dcloud.io/component/swiper，这种就不要琢磨为什么，我说还不如你去看文档，我用别人的总没别人写的文档吊吧。

3.更多

在common/js下 创建more.js 文件

let more = [
	{imgurl: '../../static/images/tp.png',descText: '图片'},
	{imgurl: '../../static/images/pz.png',descText: '拍照'},
	{imgurl: '../../static/images/sp.png',descText: '视频'},
	{imgurl: '../../static/images/wj.png',descText: '文件'},
	{imgurl: '../../static/images/dw.png',descText: '定位'},
]
export default more;

接着去到common/images 目录下 把所需的图片都拿过来把。再说明一次，如果不是static静态资源下的图片，是不能允许你通过v-for渲染的，它会当成字符串进行处理得不到正确的结果。



这里因为我们的使用静态数据去for循环渲染的，我们需要确定每一个的值去做什么，我们在它身上添加一个中转站，通过点击的index，去执行相对应的函数即可。这里先把框架搭起来。

4.处理时间的算法（照你所希望的方式，因为对于什么时候显示时间这个没有固定的说法，当然实际上，QQ微信的时间算法判断了挺多情况，这里我们简易的实现一下就行了。）

但这里比较常规的都是记录上一次显示的时间，如果当前发送的消息距离上次显示的时间已经有5分钟，那就显示时间出来。那我们就照这个常规的思路把。

这里稍微调整了一下之前写的不够简洁得代码。同时，如果你是一直跟着我做到现在的记得回去修改一下这个方法。改成如下：

（这里我蒙圈了，之前写的是倒序升序，其实不用，因为我们的消息插入的时候是由它自己timestamp默认值插入的，我们查找的数据一定是自之前到现在的。）
至此，我们的所有的准备工作都好了，可以开始核心的功能了，其实群聊也是差不多，主要把‘聊天’的核心掌握，别的就只是复用一下功能罢了。