一、功能闡述

今天給大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技術(shù)開發(fā)的仿微信原生App聊天室|仿微信聊天界面實(shí)例項(xiàng)目uniapp-chatroom，實(shí)現(xiàn)了發(fā)送圖文消息、表情(gif圖)，圖片預(yù)覽、地圖位置、長(zhǎng)按菜單、紅包/錢包、仿微信朋友圈等功能。

二、三端效果

H5/小程序/App端測(cè)試效果如下，多端效果均為一致。(后續(xù)大圖統(tǒng)一展示App端)

二、技術(shù)實(shí)現(xiàn)

• 編輯器：HBuilder X

• 技術(shù)框架：uni-app + vue

• 狀態(tài)管理：Vuex

• iconfont圖標(biāo)：阿里字體圖標(biāo)庫

• 自定義導(dǎo)航欄 + 底部Tabbar

• 彈窗組件：uniPop(基于uni-app封裝模態(tài)彈窗)

• 測(cè)試環(huán)境：H5端 + 小程序 + App端(三端均兼容)

• 高德地圖：vue-amap

◆ 頂部導(dǎo)航欄headerBar

頂部導(dǎo)航欄采用的是自定義模式，具體可參看這篇文章：uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條

在pages.json里面配置globalStyle，將navigationStyle設(shè)為custom時(shí)，原生頂部導(dǎo)航欄不顯示，這時(shí)就能自定義導(dǎo)航欄

?"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'// >>>引入狀態(tài)管理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()

◆ 仿微信朋友圈透明導(dǎo)航欄

通過onPageScroll函數(shù)實(shí)現(xiàn)自定義導(dǎo)航上下滑動(dòng)自動(dòng)調(diào)整導(dǎo)航欄的透明度，滑動(dòng)到距離頂部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("滾動(dòng)距離為：" + e.scrollTop); this.headerBarBackground = 'rgba(65,168,99,'+e.scrollTop / 200+')' }, methods: { ... } }script><style scoped>style>

◆ uniapp實(shí)現(xiàn)聊天頁面滾動(dòng)至底部

在h5端將聊天頁面滾動(dòng)到底部很好實(shí)現(xiàn)，小程序中通過設(shè)置scroll-view屬性scroll-into-view的值也能實(shí)現(xiàn)，可是在uni-app里面怎么將聊天信息滾動(dòng)至底部呢？

export default { data() { return { scrollTop: 0, ... } }, mounted() { this.scrollToBottom() }, updated() { this.scrollToBottom() }, methods: { // 滾動(dòng)至聊天底部 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開發(fā)仿微信聊天室的分享介紹，希望大家能喜歡~~

總結(jié)

以上是生活随笔為你收集整理的uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。