uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
程序员文章站
2022-06-20 22:43:47
一、介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息、表情(gif图),图片预览、地图位置、长按菜单、红包/钱包、仿微信朋友圈等功能。 二、测试效果 H5 + 小程序 + ......
一、介绍
运用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
顶部导航栏采用的是自定义模式,具体可参看这篇文章:
在pages.json里面配置globalstyle,将navigationstyle设为custom时,原生顶部导航栏不显示,这时就能自定义导航栏
"globalstyle": {"navigationstyle": "custom"}
◆ 引入公共样式/组件及全局弹窗
import vue from 'vue' import app from './app' // >>>引入css import './assets/fonts/iconfont.css' import './assets/css/reset.css' import './assets/css/layout.css' // >>>引入状态管理 import store from './store' vue.prototype.$store = store // >>>引入公共组件 import headerbar from './components/header/header.vue' import tabbar from './components/tabbar/tabbar.vue' import popupwindow from './components/popupwindow.vue' vue.component('header-bar', headerbar) vue.component('tab-bar', tabbar) vue.component('popup-window', popupwindow) // >>>引入unipop弹窗组件 import unipop from './components/unipop/unipop.vue' vue.component('uni-pop', unipop) vue.config.productiontip = false app.mptype = 'app' const app = new vue({ ...app }) app.$mount()
◆ vuex + uniapp登录验证
import vue from 'vue' import vuex from 'vuex' vue.use(vuex) export default new vuex.store({ state: { user: uni.getstoragesync('user'), token: uni.getstoragesync('token'), }, mutations: { // 存储token set_token(state, data) { state.token = data uni.setstoragesync('token', data) }, // 存储用户名 set_user(state, data) { state.user = data uni.setstoragesync('user', data) }, ... }, })
<script> import { mapstate, mapmutations } from 'vuex' import util from '../../utils/util.js' export default { data() { return { formobj: {}, } }, computed: { ...mapstate(['user', 'token']) }, mounted() { // 判断是否有登录 if(this.user){ uni.redirectto({url: '/pages/index/index'}) } }, methods: { // 提交表单 handlesubmit(e) { ... } } } </script>
◆ 仿微信朋友圈透明导航栏
通过onpagescroll函数实现自定义导航上下滑动自动调整导航栏的透明度,滑动到距离顶部200 效果如下图二
/** * @tpl 朋友圈模板 */ <template> <view class="flexbox flex_col"> <header-bar :isback="true" title="朋友圈" :bgcolor="{background: headerbarbackground}" transparent> <text slot="back" class="uni_btnico iconfont icon-arrl"></text> <text slot="iconfont" class="uni_btnico iconfont icon-publish mr_5" @tap="handlepublish"></text> </header-bar> <view class="uni__scrollview flex1"> <view class="uni-friendzone"> ... </view> </view> </view> </template> <script> export default { data() { return { headerbarbackground: 'transparent' } }, onpagescroll : function(e) { // console.log("滚动距离为:" + e.scrolltop); this.headerbarbackground = 'rgba(65,168,99,'+e.scrolltop / 200+')' }, methods: { ... } } </script> <style scoped> </style>
◆ uniapp实现聊天页面滚动至底部
在h5端将聊天页面滚动到底部很好实现,小程序中通过设置scroll-view属性scroll-into-view的值也能实现,可是在uni-app里面怎么将聊天信息滚动至底部呢?
uni-app通过判断聊天内容高度和scroll-view高度的大小设置滚动距离
<scroll-view id="scrollview" scroll-y="true" :scroll-top="scrolltop" style="height: 100%;"> <view class="uni-chatmsgcnt" id="msglistview"> <view class="msgitem">xxx</view> <view class="msgitem">xxx</view> <view class="msgitem">xxx</view> ... </view> </scroll-view>
export default { data() { return { scrolltop: 0, ... } }, mounted() { this.scrolltobottom() }, updated() { this.scrolltobottom() }, methods: { // 滚动至聊天底部 scrolltobottom(t) { let that = this let query = uni.createselectorquery() query.select('#scrollview').boundingclientrect() query.select('#msglistview').boundingclientrect() query.exec((res) => { // console.log(res) if(res[1].height > res[0].height){ that.scrolltop = res[1].height - res[0].height } }) }, ... } }
◆ uniapp聊天代码片段
<script> const emotionjson = require('./mock-emotion.js') const messagejson = require('./mock-chat.js') export default { data() { return { scrolltop: 0, showfoottoolbar: false, showemotionchoose: false, editortext: '', editorlastcursor: null, // 表情json emotionlist: emotionjson, // 消息记录 messagelist: messagejson, // 预览图片临时数组 previewimgarray: [], } }, mounted() { this.scrolltobottom() }, updated() { this.scrolltobottom() }, methods: { // 滚动至聊天底部 scrolltobottom(t) { let that = this let query = uni.createselectorquery() query.select('#scrollview').boundingclientrect() query.select('#msglistview').boundingclientrect() query.exec((res) => { // console.log(res) if(res[1].height > res[0].height){ that.scrolltop = res[1].height - res[0].height } }) }, // 点击聊天消息区域 msgpaneltaped() { if(!this.showfoottoolbar) return this.showfoottoolbar = false }, // 表情、选择区切换 swtemotionchooseview(bool) { this.showfoottoolbar = true this.showemotionchoose = bool }, ... // 点击表情 handleemotiontaped(emoj) { if(emoj == 'del') return // 在光标处插入表情 let startstr = this.editortext.substr(0, this.editorlastcursor) let endstr = this.editortext.substr(this.editorlastcursor) this.editortext = startstr + `${emoj}` + endstr }, // >>> 【选择区功能模块】------------------------------------------ // 选择图片 handlelaunchimage() { let that = this let msglist = this.messagelist let len = msglist.length // 消息队列 let data = { id: `msg${++len}`, msgtype: 5, isme: true, avator: '/static/uimg/u__chat_img1.jpg', author: 'king', msg: '', imgsrc: '', videosrc: '' } uni.chooseimage({ count: 1, sourcetype: ['album'], success: function(res){ // console.log(res) // console.log(res.tempfilepaths) data.imgsrc = res.tempfilepaths.tostring() msglist = msglist.concat(data) that.messagelist = msglist } }) }, ... // 位置 handlechooselocation() { let that = this let msglist = this.messagelist let len = msglist.length // 消息队列 let data = { id: `msg${++len}`, msgtype: 8, isme: true, avator: '/static/uimg/u__chat_img1.jpg', author: 'king', msg: '', imgsrc: '', videosrc: '' } uni.chooselocation({ success: (res) => { console.log(res) // 插入消息 data.msg = { name: res.name, address: res.address, latitude: res.latitude, longitude: res.longitude } msglist = msglist.concat(data) that.messagelist = msglist } }) }, } } </script>
以上就是基于uniapp开发仿微信聊天室的介绍,希望大家能喜欢
上一篇: 企业营销策略有哪些