项目概括

今天要给大家分享的是uni-app仿微信聊天App实战项目系列。使用uni-app+vue+vuex+swiper等技术，并引入了腾讯IM即时通讯SDK，可以完美实现微信在线聊天的效果。其中除了发送文字消息、表情消息、图片消息、语音消息之外，还实现了语音通话和视频通话功能。

预览图

功能实现

虽然这篇是该系列的第一篇，但我们不会讲如何安装uni-app及配置相关环境，相信大家在以前的学习中都已经准备好了。

既然是第一篇，我们先从简单的做起。如何实现自定义导航栏。如下图所示：

我们要做的就是导航栏中间放“消息”，右边放搜索图标和添加图标。

{
            "path": "pages/msg/msg",
            "style": {
                "navigationBarTitleText": "消息",
                "enablePullDownRefresh": true,
                "navigationStyle": "custom",
                "app-plus": {
                    "bounce": "vertical", //关闭窗口回弹效果
                    "titleNView": {
                        "buttons": [ //原生标题栏按钮配置,
                            {
                                "text": "\ue600",
                                "fontSrc": "/static/font/jl_xixun.ttf",
                                "fontSize": "22px",
                                "float": "right"
                            },
                            {
                                "text": "\ue601",
                                "fontSrc": "/static/font/jl_xixun.ttf",
                                "fontSize": "22px",
                                "float": "right"
                            }
                        ]
                    },
                    "pullToRefresh": {
                        "support": true,
                        "color": "#FF0000",
                        "style": "circle"
                    }
                }
            }
        }

上面的代码写在src目录下的pages.json内。我用的是iconfont的字体文件，text里面填的就是你想放的字体编码，这个在你下载的iconfont里面有，而fontSrc就是字体所在的路径。对于学过CSS的人来说，fontSize和float就很好理解了，分别是字体大小和浮动。如果你想在左边也放个字体图标，就可以用right。

而下面的pullToRefresh是有关下拉刷新的内容，感兴趣的话可以去uni-app官网查看。

小结

今天的内容也比较简单，由简到难，后面继续慢慢学习。