小程序開發聊天頁面

一、開發小程序

制作一個聊天界面：

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里的樣式

這樣一個聊天界面就寫完了。