经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
来源:cnblogs  作者:xiaoyan2017  时间:2019/10/10 8:51:24  对本文有异议

一、介绍

运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息、表情(gif图),图片预览、地图位置、长按菜单、红包/钱包、仿微信朋友圈等功能。

二、测试效果

H5 + 小程序 + App端测试效果如下,实测多端效果均为一致。(后续大图统一展示App端)

二、技术选型

  • 编辑器:HBuilder X
  • 技术框架:uni-app + vue
  • 状态管理:Vuex
  • iconfont图标:阿里字体图标库
  • 自定义导航栏 + 底部Tabbar
  • 弹窗组件:uniPop(基于uni-app封装模态弹窗)
  • 测试环境:H5端 + 小程序 + App端(三端均兼容)
  • 高德地图:vue-amap

◆ 顶部导航栏headerBar

顶部导航栏采用的是自定义模式,具体可参看这篇文章:uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

在pages.json里面配置globalStyle,将navigationStyle设为custom时,原生顶部导航栏不显示,这时就能自定义导航栏

 "globalStyle": {"navigationStyle": "custom"} 

◆ 引入公共样式/组件及全局弹窗

  1. import Vue from 'vue'
  2. import App from './App'
  3.  
  4. // >>>引入css
  5. import './assets/fonts/iconfont.css'
  6. import './assets/css/reset.css'
  7. import './assets/css/layout.css'
  8.  
  9. // >>>引入状态管理
  10. import store from './store'
  11. Vue.prototype.$store = store
  12. // >>>引入公共组件
  13. import headerBar from './components/header/header.vue'
  14. import tabBar from './components/tabbar/tabbar.vue'
  15. import popupWindow from './components/popupWindow.vue'
  16. Vue.component('header-bar', headerBar)
  17. Vue.component('tab-bar', tabBar)
  18. Vue.component('popup-window', popupWindow)
  19. // >>>引入uniPop弹窗组件
  20. import uniPop from './components/uniPop/uniPop.vue'
  21. Vue.component('uni-pop', uniPop)
  22. Vue.config.productionTip = false
  23. App.mpType = 'app'
  24. const app = new Vue({
  25. ...App
  26. })
  27. app.$mount()

◆ Vuex + uniapp登录验证

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5. state: {
  6. user: uni.getStorageSync('user'),
  7. token: uni.getStorageSync('token'),
  8. },
  9. mutations: {
  10. // 存储token
  11. SET_TOKEN(state, data) {
  12. state.token = data
  13. uni.setStorageSync('token', data)
  14. },
  15. // 存储用户名
  16. SET_USER(state, data) {
  17. state.user = data
  18. uni.setStorageSync('user', data)
  19. },
  20. ...
  21. },
  22. })
  1. <script>
  2. import { mapState, mapMutations } from 'vuex'
  3. import util from '../../utils/util.js'
  4. export default {
  5. data() {
  6. return {
  7. formObj: {},
  8. }
  9. },
  10. computed: {
  11. ...mapState(['user', 'token'])
  12. },
  13. mounted() {
  14. // 判断是否有登录
  15. if(this.user){
  16. uni.redirectTo({url: '/pages/index/index'})
  17. }
  18. },
  19. methods: {
  20. // 提交表单
  21. handleSubmit(e) {
  22. ...
  23. }
  24. }
  25. }
  26. </script>

◆ 仿微信朋友圈透明导航栏

通过onPageScroll函数实现自定义导航上下滑动自动调整导航栏的透明度,滑动到距离顶部200 效果如下图二

  

  1. /**
  2. * @tpl 朋友圈模板
  3. */
  4.  
  5. <template>
  6. <view class="flexbox flex_col">
  7. <header-bar :isBack="true" title="朋友圈" :bgColor="{background: headerBarBackground}" transparent>
  8. <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>
  9. <text slot="iconfont" class="uni_btnIco iconfont icon-publish mr_5" @tap="handlePublish"></text>
  10. </header-bar>
  11. <view class="uni__scrollview flex1">
  12. <view class="uni-friendZone">
  13. ...
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18.  
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. headerBarBackground: 'transparent'
  24. }
  25. },
  26. onPageScroll : function(e) {
  27. // console.log("滚动距离为:" + e.scrollTop);
  28. this.headerBarBackground = 'rgba(65,168,99,'+e.scrollTop / 200+')'
  29. },
  30. methods: {
  31. ...
  32. }
  33. }
  34. </script>
  35.  
  36. <style scoped>
  37.  
  38. </style>

◆ uniapp实现聊天页面滚动至底部

在h5端将聊天页面滚动到底部很好实现,小程序中通过设置scroll-view属性scroll-into-view的值也能实现,可是在uni-app里面怎么将聊天信息滚动至底部呢?

uni-app通过判断聊天内容高度和scroll-view高度的大小设置滚动距离

  1. <scroll-view id="scrollview" scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">
  2. <view class="uni-chatMsgCnt" id="msglistview">
  3. <view class="msgitem">xxx</view>
  4. <view class="msgitem">xxx</view>
  5. <view class="msgitem">xxx</view>
  6. ...
  7. </view>
  8. </scroll-view>
  1. export default {
  2. data() {
  3. return {
  4. scrollTop: 0,
  5. ...
  6. }
  7. },
  8. mounted() {
  9. this.scrollToBottom()
  10. },
  11. updated() {
  12. this.scrollToBottom()
  13. },
  14. methods: {
  15. // 滚动至聊天底部
  16. scrollToBottom(t) {
  17. let that = this
  18. let query = uni.createSelectorQuery()
  19. query.select('#scrollview').boundingClientRect()
  20. query.select('#msglistview').boundingClientRect()
  21. query.exec((res) => {
  22. // console.log(res)
  23. if(res[1].height > res[0].height){
  24. that.scrollTop = res[1].height - res[0].height
  25. }
  26. })
  27. },
  28. ...
  29. }
  30. }

◆ uniapp聊天代码片段

  1. <script>
  2. const emotionJson = require('./mock-emotion.js')
  3. const messageJson = require('./mock-chat.js')
  4. export default {
  5. data() {
  6. return {
  7. scrollTop: 0,
  8. showFootToolbar: false,
  9. showEmotionChoose: false,
  10. editorText: '',
  11. editorLastCursor: null,
  12. // 表情json
  13. emotionList: emotionJson,
  14. // 消息记录
  15. messageList: messageJson,
  16. // 预览图片临时数组
  17. previewImgArray: [],
  18. }
  19. },
  20. mounted() {
  21. this.scrollToBottom()
  22. },
  23. updated() {
  24. this.scrollToBottom()
  25. },
  26. methods: {
  27. // 滚动至聊天底部
  28. scrollToBottom(t) {
  29. let that = this
  30. let query = uni.createSelectorQuery()
  31. query.select('#scrollview').boundingClientRect()
  32. query.select('#msglistview').boundingClientRect()
  33. query.exec((res) => {
  34. // console.log(res)
  35. if(res[1].height > res[0].height){
  36. that.scrollTop = res[1].height - res[0].height
  37. }
  38. })
  39. },
  40. // 点击聊天消息区域
  41. msgPanelTaped() {
  42. if(!this.showFootToolbar) return
  43. this.showFootToolbar = false
  44. },
  45. // 表情、选择区切换
  46. swtEmotionChooseView(bool) {
  47. this.showFootToolbar = true
  48. this.showEmotionChoose = bool
  49. },
  50. ...
  51. // 点击表情
  52. handleEmotionTaped(emoj) {
  53. if(emoj == 'del') return
  54. // 在光标处插入表情
  55. let startStr = this.editorText.substr(0, this.editorLastCursor)
  56. let endStr = this.editorText.substr(this.editorLastCursor)
  57. this.editorText = startStr + `${emoj}` + endStr
  58. },
  59. // >>> 【选择区功能模块】------------------------------------------
  60. // 选择图片
  61. handleLaunchImage() {
  62. let that = this
  63. let msglist = this.messageList
  64. let len = msglist.length
  65. // 消息队列
  66. let data = {
  67. id: `msg${++len}`,
  68. msgtype: 5,
  69. isme: true,
  70. avator: '/static/uimg/u__chat_img1.jpg',
  71. author: 'King',
  72. msg: '',
  73. imgsrc: '',
  74. videosrc: ''
  75. }
  76. uni.chooseImage({
  77. count: 1,
  78. sourceType: ['album'],
  79. success: function(res){
  80. // console.log(res)
  81. // console.log(res.tempFilePaths)
  82. data.imgsrc = res.tempFilePaths.toString()
  83. msglist = msglist.concat(data)
  84. that.messageList = msglist
  85. }
  86. })
  87. },
  88. ...
  89. // 位置
  90. handleChooseLocation() {
  91. let that = this
  92. let msglist = this.messageList
  93. let len = msglist.length
  94. // 消息队列
  95. let data = {
  96. id: `msg${++len}`,
  97. msgtype: 8,
  98. isme: true,
  99. avator: '/static/uimg/u__chat_img1.jpg',
  100. author: 'King',
  101. msg: '',
  102. imgsrc: '',
  103. videosrc: ''
  104. }
  105. uni.chooseLocation({
  106. success: (res) => {
  107. console.log(res)
  108. // 插入消息
  109. data.msg = {
  110. name: res.name,
  111. address: res.address,
  112. latitude: res.latitude,
  113. longitude: res.longitude
  114. }
  115. msglist = msglist.concat(data)
  116. that.messageList = msglist
  117. }
  118. })
  119. },
  120. }
  121. }
  122. </script>

以上就是基于uniapp开发仿微信聊天室的介绍,希望大家能喜欢????~~

◆ 最后附上基于uni-app开发的自定义导航栏及Modal对话框

uniapp自定义导航栏:https://www.cnblogs.com/xiaoyan2017/p/11531238.html

uniapp模态弹窗组件:https://www.cnblogs.com/xiaoyan2017/p/11589149.html

 

原文链接:http://www.cnblogs.com/xiaoyan2017/p/11645467.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号