Dsx_wechat
- Dies ist ein Vue-Imitations-WeChat-Client
- Github-Projektadresse: https://github.com/GGwujun/Dsx_wechat
- Eine Web-App, die WeChat imitiert, über echten Chat und andere Funktionen verfügt und durch die Trennung von Front- und Back-End implementiert wird. Das Front-End basiert auf dem Vue 2.0-Framework, das Back-End auf Node.js + Express + MongoDB und die Chat-Funktion und die Funktion zum Hinzufügen von Freunden werden über Websocket implementiert.
- Willkommen, um meinem öffentlichen Konto zu folgen:
- Front-End-Technologie-Stack: Vue 2.0, Vue-Cli, Vuex, Vue-Router, Webpack 2.x, Pug, Sass, Babel usw.;
- Back-End-Technologie-Stack: Node.js, Express, Express-Session, WebSocket(ws), MongoDB, Mongoose, ES6 usw.
Einführung
- Ich lerne Vue schon seit einiger Zeit, aber um Vue zu üben, habe ich auch mehrere große und kleine persönliche Projekte durchgeführt und die PC-Version von WeChat nachgeahmt , die Erfahrung auf der PC-Seite ist nicht gut, Sie müssen sich nach der Aktualisierung erneut anmelden, bevor Sie Nachrichten an Freunde senden können.
- Das im Unternehmen am häufigsten verwendete ist ionic, ein partielles UI-Framework mit Schwerpunkt auf mobilen Webanwendungen, das auch das AngularJS-Framework verwendet. Cordova wurde zum Verpacken verwendet, und später dachte ich darüber nach, mit Vue einen WeChat-Client zu erstellen und ihn mit Cordova zu verpacken.
- Derzeit ist die Hardware von Mobiltelefonen bereits sehr gut. Die App-Erfahrung mit der einfachen Cordova-Verpackung ist grundsätzlich ohne Unterschied zu nativen Apps.
- Der Front-End-Teil wird mit vue-cli erstellt und verpackt und mit dem Vue-Familien-Bucket (vue, vuex, vue-router) codiert.
- Verwenden Sie Axios, um Ressourcenanfragen zu stellen
- Das Backend wird mithilfe der Express-Architektur von Node.js entwickelt. Derzeit gibt es nicht viele Schnittstellen, diese werden jedoch kontinuierlich aktualisiert.
Server
- Entwickelt mit Nodejs + Express
- Registrieren, Anmelden, Abmelden, Anzeigen von Freunden, persönliche Homepage, Hinzufügen von Freunden, Einzel-Chat und Gruppen-Chat
- Github-Projektadresse: https://github.com/GGwujun/chatserve
Vorschau
APK herunterladen
Klicken Sie hier, um die APK herunterzuladen und zu installieren. Derzeit werden nur Android-Systeme (5.0 oder höher) unterstützt (da sich das Projekt noch in der Entwicklung befindet, sind einige Funktionen möglicherweise nicht auf dem neuesten Stand oder vorübergehend nicht verfügbar).
Neue Benutzer müssen sich anmelden, indem sie ein Konto registrieren. Registrierte Benutzer können sich direkt anmelden. Derzeit unterstützt das Konto weder Offline-Nachrichten noch das Hinzufügen von Offline-Benutzern als Freunde (Instant-Messaging-bezogene Funktionen müssen sicherstellen, dass die andere Partei online ist).
lokaler Einsatz
Vorausgesetzt, Sie haben Node.js installiert, klonen Sie das Repository direkt in Ihren lokalen Bereich, installieren Sie alle Plug-Ins und starten Sie den Server. Es wird empfohlen, Google Chrome zu verwenden und es im mobilen Debugging-Modus anzuzeigen (http://localhost:8808/).
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
Tipps
- Es ist nicht möglich, sich zu registrieren oder Daten abzurufen, da die von mir konfigurierte Backend-Schnittstelle mein Server ist. Sie können den Backend-Code selbst herunterladen und auf Ihrem eigenen Server bereitstellen, er ist jedoch allgemein zugänglich.
- Wenn Sie Ihren eigenen Server erstellen möchten, müssen Sie neben der Installation knotenbezogener Abhängigkeiten auch die MongoDB-Datenbank installieren.
Funktion
Das Projekt hat Backend-Server-Unterstützung mit echter Chat-Funktionalität implementiert. Bitte übertragen Sie den Backend-Teil hierher
- Stark nachgeahmter WeChat-Client-Schnittstellen-Designstil mit Push-, Pop-, Modal-, Dismiss- und anderen Übergangsanimationen;
- Registrierungs-, Anmelde- und Abmeldefunktionen können den Anmeldestatus merken und Mehrfachanmeldungen vermeiden;
- Chatroom-Funktion, alle Online-Benutzer können Gruppenchat führen;
- Um einen Freund hinzuzufügen, müssen Sie sicherstellen, dass die andere Partei online ist, bevor Sie einen Freund korrekt hinzufügen können.
- Benutzer können privat chatten. Derzeit muss die andere Partei online sein, bevor sie normal chatten können.
- Derzeit wird nur Nur-Text-Chat unterstützt.
Weitere Funktionen werden fortgesetzt ...
Wenn Sie denken, dass dieses Projekt gut ist, markieren Sie es bitte und teilen Sie es!
