• 數據庫: mongdb
• 后臺開發技術： nodejs
• 前臺開發：vue
• 組件庫：WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫
• 管理狀態：vuex

創建項目：vue-cli3.0腳手架

vue create friend

注冊/ 登錄功能

效果展示：

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

// 注冊或登錄async singup () {// 驗證手機號if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {weui.topTips('請輸入合法的手機號', 2000)return false}// 驗證驗證碼if (!this.code) {weui.topTips('請輸入驗證碼', 2000)return false}// 發送登錄請求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)}}// 重新發送驗證碼倒計時countTime () {// 為this對象（當前vue實例）動態添加一個屬性 clearFlagthis.clearFlag = setInterval(() => {if (this.timeCode === 0) {this.timeCode = 60// 清除定時器clearInterval(this.clearFlag)return}this.timeCode--}, 1000)}

好友動態列表

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

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

發表動態

• 點擊動態列表頁面右上角進入發表動態頁面（用戶必須是登錄狀態）
• 動態內容限制在200字內，上傳的圖片可以點擊預覽或者刪除
• 點擊發表時判斷用戶是否輸入內容

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)// 刪除對應的dom元素e.target.remove()self.uploadCount--})// if (confirm('確定刪除該圖片？')) { console.log('刪除') }gallery.hide(function () {console.log('`gallery` has been hidden')})}})},

點贊/評論功能

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

個人中心

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

私信功能

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

獲取歷史聊天記錄代碼

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}},

好友名片

• 在好友動態頁面點擊好友頭像跳轉到好友名片頁面，跳轉時將好友的id傳過去
• 根據的好友的id查詢好友的所有信息數據，并展示在頁面
  

好友聊天

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。