概述

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為銅川等服務(wù)建站，銅川等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為銅川企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

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

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

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

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

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

注：以上內(nèi)容都是經(jīng)過考慮，能夠較完美的實(shí)現(xiàn)的內(nèi)容，部分功能已經(jīng)在制作中，由于本項(xiàng)目是個長期的項(xià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)行對話就能重新生成聊天隊(duì)列了（可以刪除信息后再繼續(xù)與機(jī)器人進(jìn)行對話了），另外擴(kuò)大了刪除按鈕的寬度————3.28

問題反饋

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

感謝

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

其他說明

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：基于Vue2實(shí)現(xiàn)的仿手機(jī)QQ單頁面應(yīng)用功能(接入聊天機(jī)器人)-創(chuàng)新互聯(lián)
標(biāo)題來源：http://chinadenli.net/article18/hjigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站內(nèi)鏈、域名注冊、網(wǎng)站設(shè)計(jì)、微信小程序、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)