uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一、介绍 运用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 '.