概述

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

項(xiàng)目地址 https://github.com/jiangqizheng/vue-MiniQQ

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

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

注：對(duì)于那句Flux 架構(gòu)就像眼鏡：您自會(huì)知道什么時(shí)候需要它。感覺(jué)好像懂了點(diǎn)什么。

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

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

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

桌面及移動(dòng)端測(cè)試

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

動(dòng)圖預(yù)覽

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

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

搜素組件的動(dòng)畫(huà)效果

進(jìn)入對(duì)話框

對(duì)話框信息

首頁(yè)Tab切換

更新說(shuō)明

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

問(wèn)題反饋

建議移步Issues，歡迎反饋?lái)?xiàng)目中的不良/錯(cuò)誤表現(xiàn)，以及你在開(kāi)發(fā)過(guò)程遇到的問(wèn)題，作者會(huì)積極回復(fù)。

感謝

感謝您的來(lái)訪 ，如果對(duì)于您有幫助 ，麻煩您使勁的給個(gè)Star吧 ！ ^_^

其他說(shuō)明

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

技術(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             // 項(xiàng)目不同環(huán)境的配置
├── dist               // 項(xiàng)目build目錄
├── index.html         // 項(xiàng)目入口文件
├── package.json       // 項(xiàng)目配置文件
├── mockdata.json      // 項(xiàng)目模擬數(shù)據(jù)
├── src
│   ├── common         // 公用的css樣式
│   ├── components     // 各種組件
│   ├── router         // 存放路由的文件夾
│   ├── vuex          // 存放Vuex的相關(guān)
│   ├── App.Vue        // 模板文件入口
│   └── main.js        // Webpack 預(yù)編譯入口
├── static             // css js 和圖片資源
│  

Build Setup

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

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

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

最新評(píng)論