• 數(shù)據(jù)庫: mongdb
• 后臺開發(fā)技術(shù)： nodejs
• 前臺開發(fā)：vue
• 組件庫：WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫
• 管理狀態(tài)：vuex

創(chuàng)建項目：vue-cli3.0腳手架

vue create friend

注冊/ 登錄功能

效果展示：

• 在阿里云注冊短信驗證碼服務(wù)
• 用戶根據(jù)手機(jī)號獲取到短信驗證碼進(jìn)行登錄
• 服務(wù)端驗證手機(jī)號和驗證碼是否符合
• 驗證通過后，將登錄或注冊的用戶信息存儲起來，方便其他頁面使用
• 將用戶信息存儲到程序本身的內(nèi)存中（使用vuex）
• 同時在localstorage存儲一個備份

// 注冊或登錄async singup () {// 驗證手機(jī)號if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {weui.topTips('請輸入合法的手機(jī)號', 2000)return false}// 驗證驗證碼if (!this.code) {weui.topTips('請輸入驗證碼', 2000)return false}// 發(fā)送登錄請求const res = await service.post('users/signup', {phonenum: this.mobile,code: this.code})if (res.data.code === 0) {this.$store.dispatch('setUser', res.data.data)this.$router.go(-1)}}// 重新發(fā)送驗證碼倒計時countTime () {// 為this對象（當(dāng)前vue實例）動態(tài)添加一個屬性 clearFlagthis.clearFlag = setInterval(() => {if (this.timeCode === 0) {this.timeCode = 60// 清除定時器clearInterval(this.clearFlag)return}this.timeCode--}, 1000)}

好友動態(tài)列表

• 獲取存儲在vuex的用戶信息，將用戶昵稱、頭像、背景圖展示
• 更換背景圖：使用actionSheet組件彈出菜單中選擇‘從相冊選擇’彈出一個選擇圖片文件，服務(wù)器上傳成功后更新vuex的數(shù)據(jù)
• 加載更多：列表默認(rèn)只展示5條數(shù)據(jù)，數(shù)據(jù)加載完畢后手指滑動通過向上刷新組件繼續(xù)加載更多內(nèi)容
• 下拉刷新：小圓球跟著下拉移動并旋轉(zhuǎn)，加載最新數(shù)據(jù)，手指松開小圓球歸位

touchstart (e) {// 觸摸的起始縱坐標(biāo)this.pullRefresh.dargStart = e.targetTouches[0].clientY},touchmove (e) {const target = e.targetTouches[0]// 手指移動的距離 = (手指當(dāng)前的位置-手指初始位置)/屏幕高度this.pullRefresh.percentage = (this.pullRefresh.dargStart - target.clientY) / window.screen.height// 獲取scrollTop的值，當(dāng)值為0時，才會開始下拉刷新邏輯const scrollTop = document.documentElement.scrollTop || document.body.scrollTopif (scrollTop === 0) {if (this.pullRefresh.percentage < 0 && e.cancelable) {this.pullRefresh.isPull = true// 禁用瀏覽器默認(rèn)行為e.preventDefault()// 計算圓球的縱向移動距離const translateY = -this.pullRefresh.percentage * this.pullRefresh.moveCountif (Math.abs(this.pullRefresh.percentage) <= this.pullRefresh.dragEnd) {// 計算圓球的旋轉(zhuǎn)角度const rotate = translateY / 100 * 360// 設(shè)置圓球的縱向位置this.$refs.circleIcon.style.transform = `translate(0,${translateY}px) rotate(${rotate}deg)`}} else {// 向上拖動，就不會進(jìn)入下拉刷新邏輯this.pullRefresh.dargStart = null}} else {// 如果沒有再頁面頂部執(zhí)行拖動事件，則不執(zhí)行下拉刷新邏輯this.pullRefresh.dargStart = null}},touchend (e) {if (!this.pullRefresh.isPull) {return false}if (Math.abs(this.pullRefresh.percentage) > this.pullRefresh.dragEnd) {this.$emit('onRefresh')// 設(shè)置小圓圈原地旋轉(zhuǎn)this.$refs.circleIconInner.classList.add('circle-rotate')} else {// 如果用戶松開手時，下拉距離沒有達(dá)到臨界值，就自動收回this.$refs.circleIcon.style.transition = 'all 500ms'this.$refs.circleIcon.style.transform = 'translate(0,0)'}this.pullRefresh.dargStart = nullthis.pullRefresh.percentage = null}

發(fā)表動態(tài)

• 點擊動態(tài)列表頁面右上角進(jìn)入發(fā)表動態(tài)頁面（用戶必須是登錄狀態(tài)）
• 動態(tài)內(nèi)容限制在200字內(nèi)，上傳的圖片可以點擊預(yù)覽或者刪除
• 點擊發(fā)表時判斷用戶是否輸入內(nèi)容

gallery (e) {const self = this// 獲取li 里面的style屬性值const style = e.target.getAttribute('style')const url = style.split('"')[1]var gallery = weui.gallery(url, {onDelete: function () {weui.confirm('確定刪除該圖片？', () => {const id = e.target.getAttribute('data-id')const index = self.picList.findIndex(item => {return item.id === id})self.picList.splice(index, 1)// 刪除對應(yīng)的dom元素e.target.remove()self.uploadCount--})// if (confirm('確定刪除該圖片？')) { console.log('刪除') }gallery.hide(function () {console.log('`gallery` has been hidden')})}})},

點贊/評論功能

• 點擊好友動態(tài)右下角的按鈕可以進(jìn)行點贊或評論
• 點贊/取消點贊：請求后臺接口實現(xiàn)成功后通知vuex更新列表的數(shù)據(jù)
• 評論：點擊評論按鈕顯示文本框輸入內(nèi)容后點擊發(fā)表成功后，更新vuex中的數(shù)據(jù)

個人中心

• 獲取vuex中存儲的用戶信息，然后展示在頁面
• 更新頭像：點擊頭像彈出uploader組件選擇圖片文件上傳成功后通知vuex更新用戶信息
• 更新昵稱：點擊昵稱更新昵稱頁面，輸入要更新的昵稱點擊確定保存同時更新數(shù)據(jù)庫和本地存儲的用戶信息并并返回到個人信息頁面
• 更新個性簽名：點擊個性簽名更新個性簽名頁面，輸入要更新的個性簽名點擊確定保存同時更新數(shù)據(jù)庫和本地存儲用戶信息并返回到個人信息頁面
• 更新性別：點擊性別從下方彈出選擇性別的選擇框，選擇后更新數(shù)據(jù)庫和本地存儲用戶信息并顯示
  

私信功能

• 點擊私信跳轉(zhuǎn)到消息列表頁面，展示與好友們聊天的最后一條消息
• 可以通過關(guān)鍵字進(jìn)行搜索
• 點擊與好友的聊天列表可以進(jìn)入該好友的聊天頁面

獲取歷史聊天記錄代碼

async fetchData () {this.loading = trueconst res = await service.get('message/getchatlist', {keyword: this.keyword})if (res.data.code === 0) {this.dataList = res.data.datathis.loading = false}},

好友名片

• 在好友動態(tài)頁面點擊好友頭像跳轉(zhuǎn)到好友名片頁面，跳轉(zhuǎn)時將好友的id傳過去
• 根據(jù)的好友的id查詢好友的所有信息數(shù)據(jù)，并展示在頁面
  

好友聊天

• 點擊發(fā)消息可以與好友進(jìn)行聊天
• 獲取與好友的歷史聊天記錄
• 默認(rèn)只顯示輸入文本框，點擊加號按鈕顯示更多面板，可以發(fā)送圖片
• 運用socket.io-client + vue-socket.io插件實現(xiàn)實時通訊聊天

// 頁面加載時，首先當(dāng)前用戶登錄socket，獲取當(dāng)前登錄用戶與當(dāng)前指定用戶的聊天記錄created () {if (this.$store.state.currentUser && this.$store.state.currentUser._id) {// 登錄socketthis.$socket.emit('login', this.$store.state.currentUser)}// 獲取歷史聊天數(shù)據(jù)this.fetchData()},sockets: {// 當(dāng)服務(wù)器端有消息推送過來的時候執(zhí)行這個方法，推送的數(shù)據(jù)賦值給參數(shù)obj// 接收消息recieveMsg: function (obj) {if (obj.fromUser._id === this.toUserId) {this.dataList.push({content: obj.content,fromUser: obj.fromUser,mine: false})this.goBottom()}},/*** 服務(wù)器掉之后，客戶端會重新連接，連接成功后會觸發(fā)下面的事件* 我們就在這個事件中，重新登錄*/reconnect (obj) {if (this.$store.state.currentUser && this.$store.state.currentUser._id) {// 登錄socketthis.$socket.emit('login', this.$store.state.currentUser)}}} async publish (data) {const res = await service.post('message/addmsg', {content: { type: 'str', value: data.value },toUser: this.toUserId})// 發(fā)表成功講最新消息，添加datalist里面if (res.data.code !== 0) {return weui.topTips('消息發(fā)送失敗')}const message = {content: {type: 'str',value: data.value},fromUser: this.$store.state.currentUser,mine: 'true'}this.dataList.push(message)this.goBottom()}

總結(jié)

以上是生活随笔為你收集整理的仿微信app项目实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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