概述

使用Vue2進(jìn)行的仿手機(jī)QQ的webapp的制作，在ui上，參考了設(shè)計師kaokao的作品，作品由個人獨立開發(fā)，源碼中進(jìn)行了詳細(xì)的注釋。 由于自己也是初學(xué)Vue2，所以注釋寫的不夠精簡，請見諒。

項目地址 https://github.com/jiangqizheng/vue-MiniQQ

項目已實現(xiàn)功能

• 對話功能——想著既然是QQ總要能進(jìn)行對話交流，所以在項目中接入了圖靈聊天機(jī)器人，可以與列表中的每個人物進(jìn)行對話。
• 左滑刪除——左滑刪除相關(guān)消息。
• 搜索頁面——點擊右上角搜索按鈕，能夠進(jìn)入搜索頁面，輸入對應(yīng)的單詞或者數(shù)字，動態(tài)查找好友。
• 項目中數(shù)據(jù)流動由vuex進(jìn)行控制

注：對于那句Flux 架構(gòu)就像眼鏡：您自會知道什么時候需要它。感覺好像懂了點什么。

計劃中或者即將實現(xiàn)的功能

• 注冊，登陸功能
• 添加，刪除好友，好友列表分組展示
• 撥號界面，多人聊天、qq群
• 空間，好友說說，點贊、圖片分享
• 個人設(shè)置，切換主題

注：以上內(nèi)容都是經(jīng)過考慮，能夠較完美的實現(xiàn)的內(nèi)容，部分功能已經(jīng)在制作中，由于本項目是個長期的項目，所以對于后續(xù)進(jìn)度感興趣的朋友也可以關(guān)注下，并且如果有想到什么好主意，歡迎告訴我。

桌面及移動端測試

• 桌面測試： npm run dev 后，打開***開發(fā)者工具*** F12，模擬手機(jī)預(yù)覽 Ctrl+Shift+M (Chrome)
• 移動端測試： npm run dev 后，在cmd命令行中輸入ipconfig（win）獲取到局域網(wǎng)內(nèi)ip地址后，生成二維碼，然后進(jìn)行測試（建議微信掃二維碼）

動圖預(yù)覽

gif圖好像被壓縮的太多了，感興趣的可以clone后查看。

側(cè)邊欄與個人主頁

搜素組件的動畫效果

進(jìn)入對話框

對話框信息

首頁Tab切換

更新說明

• 對更多內(nèi)容進(jìn)行詳細(xì)的注釋，修正了左滑刪除的一些錯誤，現(xiàn)在能夠?qū)ο⑦M(jìn)行正常的左滑刪除，然后在朋友列表進(jìn)行對話就能重新生成聊天隊列了（可以刪除信息后再繼續(xù)與機(jī)器人進(jìn)行對話了），另外擴(kuò)大了刪除按鈕的寬度————3.28

問題反饋

建議移步Issues，歡迎反饋項目中的不良/錯誤表現(xiàn)，以及你在開發(fā)過程遇到的問題，作者會積極回復(fù)。

感謝

感謝您的來訪 ，如果對于您有幫助 ，麻煩您使勁的給個Star吧 ！ ^_^

其他說明

• 由于是抱著邊寫邊學(xué)的心態(tài)，所以可能會出現(xiàn)些不嚴(yán)謹(jǐn)?shù)牡胤?，或者明顯的錯誤，關(guān)于這點，看到請反饋給我，十分感謝。
• 從零到目前的進(jìn)度，雖然功能簡單，但還是花費(fèi)了不少時間，把項目上傳是希望能夠?qū)σ恍┩瑯诱趯W(xué)習(xí)Vue的小伙伴有一些幫助。
• 由于是第一次獨立的寫較為完整的Vue項目，所以希望大家給個Star! Q.o，并且歡迎討論。
• 此項目會在我Vue的使用過程中不斷被完善優(yōu)化，并且用于測試添加一些新的有趣的功能。

技術(shù)棧

• vue-cli
• vue2
• vue-router
• vuex
• axios
• stylus
• webpack2
• muse-ui

目錄結(jié)構(gòu)

.
├── README.md          
├── build              // 構(gòu)建服務(wù)和webpack配置,轉(zhuǎn)發(fā)聊天機(jī)器人以及ajax獲取用戶數(shù)據(jù)相關(guān)內(nèi)容
├── config             // 項目不同環(huán)境的配置
├── dist               // 項目build目錄
├── index.html         // 項目入口文件
├── package.json       // 項目配置文件
├── mockdata.json      // 項目模擬數(shù)據(jù)
├── src
│   ├── common         // 公用的css樣式
│   ├── components     // 各種組件
│   ├── router         // 存放路由的文件夾
│   ├── vuex          // 存放Vuex的相關(guān)
│   ├── App.Vue        // 模板文件入口
│   └── main.js        // Webpack 預(yù)編譯入口
├── static             // css js 和圖片資源
│  

Build Setup

一個正在制作中的基于vue2全家桶(vue2+vue-router+vuex)的仿QQ項目，移動端webapp，持續(xù)更新中·

# 安裝
npm install
# 運(yùn)行（端口8888）
npm run dev
# 發(fā)布
npm run build

以上所述是小編給大家介紹的基于Vue2實現(xiàn)的仿手機(jī)QQ單頁面應(yīng)用功能(接入聊天機(jī)器人 )，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論