一、介紹
運用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'// >>>引入cssimport './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 = falseApp.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 > <header-bar :isBack="true" title="朋友圈" :bgColor="{background: headerBarBackground}" transparent> <text slot="back" ></text> <text slot="iconfont" @tap="handlePublish"></text> </header-bar> <view > <view > ... </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 id="msglistview"> <view >xxx</view> <view >xxx</view> <view >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 =https://www.cnblogs.com/xiaoyan2017/p/ { 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 =https://www.cnblogs.com/xiaoyan2017/p/ res.tempFilePaths.toString() msglist = msglist.concat(data) that.messageList = msglist } }) }, ... // 位置 handleChooseLocation() { let that = this let msglist = this.messageList let len = msglist.length // 訊息佇列 let data =https://www.cnblogs.com/xiaoyan2017/p/ { 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開發仿微信聊天室的介紹，希望大家能喜歡????~~
◆ 最后附上基于uni-app開發的自定義導航欄及Modal對話框
uniapp自定義導航欄：https://www.cnblogs.com/xiaoyan2017/p/11531238.html
uniapp模態彈窗組件：https://www.cnblogs.com/xiaoyan2017/p/11589149.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/36725.html
標籤：HTML5