Dsx_wechat
- 這是一個Vue 仿微信客戶端
- Github專案網址：https://github.com/GGwujun/Dsx_wechat
- 一款模仿微信的Web App，具有真實的聊天等功能，並採用前後端分離的方式來實現。前端基於Vue 2.0 框架，後端基於Node.js + Express + MongoDB，聊天功能和新增好友功能透過Websocket 實作。
- 歡迎追蹤我的公眾號：
- 前端技術堆疊: vue 2.0、vue-cli、vuex、vue-router、webpack 2.x、pug、sass、babel等；
- 後端技術堆疊：Node.js、Express、express-session、WebSocket(ws)、MongoDB、mongoose、ES6等。
Intro
- 學習vue有一段時間了，但是公司不使用vue，為了練習vue大大小小也做過幾個個人項目，模仿過微信的pc版，由於sockit.io不能刷新，導致在pc端體驗並不好，一刷新就要重新登陸才可以傳訊息給好友。
- 在公司用的多的就是ionic，一個專注於行動端webapp的偏UI框架，裡面也用到了angularjs框架。打包用的是cordova，後面就想到了用vue做一個微信客戶端，用cordova打包。
- 目前手機的硬體已經很好了，基本cordova打包的app體驗還是很流暢的，配合vue的單頁應用基本上可以無差原生app了。
- 前端部分使用vue-cli 建置、打包, 配合vue全家桶（vue、vuex、vue-router）進行編碼
- 使用axios 進行資源請求
- 後台使用Node.js的express架構開發，目前介面不多，不過會持續更新。
Server
- 使用Nodejs + Express 開發
- 實現註冊，登錄，退出登錄，查看好友，個人主頁，添加好友，一對一聊天和群聊
- Github專案地址：https://github.com/GGwujun/chatserve
Preview
下載apk
點擊這裡下載安裝apk，目前只支援android（5.0以上）系統（由於專案仍在開發中，部分功能可能不是最新、或暫不可用）。
新用戶必須透過註冊帳號進入，已註冊用戶可直接登入進入。目前佔不支援離線訊息，也不支援新增離線用戶為好友（即時通訊相關功能必須保證對方線上）
本地使用
假設你已安裝Node.js ，那麼直接克隆倉庫到本地，安裝完所有插件並啟動伺服器。 建議使用Google瀏覽器並在手機調試模式下查看(http://localhost:8808/)。
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
Tips
- 無法註冊或取得數據，因為我配置的後台介面是我的伺服器，你可以自己下載後台程式碼，部署到自己伺服器，不過一般情況是可以存取的。
- 如果你要自己搭建伺服器，你除了要安裝node相關的依賴之外，你還需要安裝MongoDB資料庫
function
該專案已實現後端伺服器的支持，具有真實的聊天功能。後端部分請轉移這裡
- 高仿微信客戶端的介面設計風格，具有push、pop、modal、dismiss等轉場動畫；
- 註冊、登陸和登出功能，可記住登入狀態，避免多次登入；
- 聊天室功能，所有線上用戶可進行群組聊天；
- 新增好友，目前必須保證對方在線上才能正確添加；
- 用戶私聊，目前必須保證對方在線上方可正常聊天；
- 目前只支援純文字聊天。
更多功能請待續...
如果您覺得該項目不錯, 歡迎star和分享！
