uniapp 仿微信聊天实战|仿微信界面/朋友圈|uni-app 聊天

项目概况

今天给大家分享的是uni-app 仿微信聊天室 UniappChatRoom实战项目，仿微信红包|表情|朋友圈
使用 uni-app+vue+vuex+uniPop+swiper 等技术开发的仿微信聊天室 uniapp-chatroom 项目，类似 vue 及小程序 api 语法使开发更加方便，实现了发送图文消息、表情(gif 动图)，图片预览、地图位置、红包、仿微信朋友圈等功能

运用技术

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

预览图

如上图：在 H5、小程序、App 端均测试通过，而且兼容性一致，一次开发编译到多端。

引入公共组件及样式

/** * @author andy by 2019-09-23 * @about Q：282310962 wx：xy190310 */ 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() 

uniapp+vuex 状态管理实现登录注册拦截

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> 

uniapp 实现仿微信朋友圈效果

/** * @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> 

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000020636455
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。