uni-app仿微信聊天APP|开发实战(1)

作者:涛涛 更新时间:2019-11-16 15:36:02 浏览次数:4507

温馨提示:当前尚未登录,请先登录后才能下载,评论,收藏和分享

  • 收藏
  • 评论
  • 分享

项目概括


今天要给大家分享的是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的人来说,fontSizefloat就很好理解了,分别是字体大小和浮动。如果你想在左边也放个字体图标,就可以用right

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

小结


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

博文评论:

我要评论
  • happiness

    happiness

    2020-04-24 18:32:36

    删除

    回复
    0

    能不能分享一下


  • 你的影子。

    你的影子。

    2020-04-10 10:49:07

    删除

    回复
    0

    ???

  • 微科技工作室

    微科技工作室

    2020-02-12 18:10:15

    删除

    回复
    0

    群里也没有,怎么下载了

  • 千泓℡₁₈₂₇₀₇₂₃₇₉₉

    千泓℡₁₈₂₇₀₇₂₃₇₉₉

    2019-11-29 13:58:36

    删除

    回复
    0

    可以右侧加QQ群,作者涛涛在群里,后期博文中会更新,可以直接下载。

    @...嗯

    怎么下载了


  • ...嗯

    ...嗯

    2019-11-25 11:55:55

    删除

    回复
    1

    怎么下载了


发布评论:

提 交
加入群聊