一、功能闡述
今天給大家分享的是基于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()
◆ 仿微信朋友圈透明導航欄
通過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裡面怎麼将聊天資訊滾動至底部呢？
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開發仿微信聊天室的分享介紹，希望大家能喜歡
~~