一、介绍
运用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"}
◆ 引入公共样式/组件及全局弹窗
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)
},
...
},
})
◆ 仿微信朋友圈透明导航栏
通过onpagescroll函数实现自定义导航上下滑动自动调整导航栏的透明度，滑动到距离顶部200 效果如下图二
/**
* @tpl 朋友圈模板
*/
...
◆ uniapp实现聊天页面滚动至底部
在h5端将聊天页面滚动到底部很好实现，小程序中通过设置scroll-view属性scroll-into-view的值也能实现，可是在uni-app里面怎么将聊天信息滚动至底部呢？
uni-app通过判断聊天内容高度和scroll-view高度的大小设置滚动距离
xxx
xxx
xxx
...
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聊天代码片段
以上就是基于uniapp开发仿微信聊天室的介绍，希望大家能喜欢
