您尚未登录,请先登录
{{code.text}}
温馨提示:当前尚未登录,请先登录后才能下载,评论,收藏和分享
今天要给大家分享的是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
官网查看。
今天的内容也比较简单,由简到难,后面继续慢慢学习。
M.
2020-12-15 10:11:57删除
回复
0
没地方下载
M.
2020-12-15 10:11:33删除
回复
0
很好,
carrie
2020-09-11 18:31:47删除
回复
0
跳转不了qq
QQ号多少啊
🦋彤彤
2020-08-06 15:29:22删除
回复
0
QQ号多少啊
可以右侧加QQ群,作者涛涛在群里,后期博文中会更新,可以直接下载。
🦋彤彤
2020-08-06 14:31:52删除
回复
0
资源不能分享一下吗,谢谢
向上的葱子
2020-08-05 14:40:12删除
回复
0
在Uniapp上开发IM聊天,我用的是GoEasy这个框架,完美支持Uniapp,支持单聊、群聊、发送图片/视频/语音等,GoEasy整体的稳定性还不错,算是Uniapp里面最好用的一款IM框架了。地址:https://www.goeasy.io/
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群,作者涛涛在群里,后期博文中会更新,可以直接下载。
怎么下载了