小程序开发聊天页面

一、开发小程序

制作一个聊天界面：

1、配置页面路由：

 

 2、底部选择栏：

2、分析页面布局

 

 

写好一个大盒子之后剩下的可以for出来

最后制作消息小圆点

当新消息数为0时，不显示小圆点

判断：wx:if=”{{item.inofNum > 0 }}” 为TRUE，则显示这个view;如果显示，继续判断后面的内容（三元表达式）：{{item.infoNum > 99?’99+’: item.infoNum }},如果item.infoNum的值大于99为TRUE，则先显示第一个即99+，否则显示item.infoNum原本的值。

最后设置当变成“99+”时，变成 “smallText”class里的样式

这样一个聊天界面就写完了。