Dsx_wechat
- هذا عميل WeChat مقلد لـ Vue
- عنوان مشروع جيثب: https://github.com/GGwujun/Dsx_wechat
- تطبيق ويب يقلد WeChat، ويحتوي على دردشة حقيقية ووظائف أخرى، ويتم تنفيذه عن طريق فصل الواجهة الأمامية والخلفية. تعتمد الواجهة الأمامية على إطار عمل 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، إلخ.
مقدمة
- لقد كنت أتعلم Vue منذ فترة، لكن الشركة لا تستخدم Vue من أجل ممارسة Vue، لقد قمت بالعديد من المشاريع الشخصية، الكبيرة والصغيرة، وقمت بتقليد إصدار WeChat للكمبيوتر الشخصي نظرًا لأنه لا يمكن تحديث sockit.io. التجربة على جهاز الكمبيوتر ليست جيدة، تحتاج إلى تسجيل الدخول مرة أخرى بعد التحديث قبل أن تتمكن من إرسال الرسائل إلى الأصدقاء.
- ما يتم استخدامه في الغالب في الشركة هو ionic، وهو إطار عمل جزئي لواجهة المستخدم يركز على تطبيقات الويب للجوال، والذي يستخدم أيضًا إطار عمل angularjs. تم استخدام Cordova للتغليف، وفكرت لاحقًا في استخدام Vue لإنشاء عميل WeChat وتعبئته باستخدام Cordova.
- في الوقت الحاضر، تعد أجهزة الهواتف المحمولة جيدة جدًا بالفعل. لا تزال تجربة التطبيق الخاصة بتغليف كوردوفا الأساسية سلسة للغاية. يمكن أن تصبح تطبيقات الصفحة الواحدة مع Vue تطبيقات أصلية بشكل أساسي.
- تم إنشاء الجزء الأمامي وتعبئته باستخدام vue-cli، وترميزه باستخدام دلو عائلة vue (vue، vuex، vue-router)
- استخدم axios لتقديم طلبات الموارد
- تم تطوير الواجهة الخلفية باستخدام البنية السريعة لـ Node.js. لا يوجد حاليًا العديد من الواجهات، ولكن سيتم تحديثها باستمرار.
الخادم
- تم تطويره باستخدام Nodejs + Express
- تحقيق التسجيل وتسجيل الدخول وتسجيل الخروج وعرض الأصدقاء والصفحة الرئيسية الشخصية وإضافة الأصدقاء والدردشة الفردية والدردشة الجماعية
- عنوان مشروع جيثب: https://github.com/GGwujun/chatserve
معاينة
تحميل apk
انقر هنا لتنزيل وتثبيت ملف apk. حاليًا، يدعم فقط أنظمة Android (5.0 أو أعلى) (لأن المشروع لا يزال قيد التطوير، وقد لا تكون بعض الوظائف هي الأحدث أو غير متوفرة مؤقتًا).
يجب على المستخدمين الجدد الدخول عن طريق تسجيل حساب، ويمكن للمستخدمين المسجلين تسجيل الدخول مباشرة. حاليًا، لا يدعم الحساب الرسائل غير المتصلة بالإنترنت، ولا يدعم إضافة مستخدمين غير متصلين كأصدقاء (يجب أن تتأكد الوظائف المتعلقة بالمراسلة الفورية من اتصال الطرف الآخر بالإنترنت)
الاستخدام المحلي
بافتراض أنك قمت بتثبيت Node.js ، انسخ المستودع مباشرة إلى منطقتك المحلية، ثم قم بتثبيت جميع المكونات الإضافية وابدأ تشغيل الخادم. يوصى باستخدام Google Chrome وعرضه في وضع تصحيح أخطاء الهاتف المحمول (http://localhost:8808/).
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
نصائح
- من المستحيل التسجيل أو الحصول على البيانات لأن الواجهة الخلفية التي قمت بتكوينها هي الخادم الخاص بي. يمكنك تنزيل رمز الواجهة الخلفية بنفسك ونشره على الخادم الخاص بك، ولكن يمكن الوصول إليه بشكل عام.
- إذا كنت ترغب في إنشاء خادم خاص بك، بالإضافة إلى تثبيت التبعيات المرتبطة بالعقدة، فأنت بحاجة أيضًا إلى تثبيت قاعدة بيانات MongoDB.
وظيفة
قام المشروع بتنفيذ دعم خادم الواجهة الخلفية مع وظيفة الدردشة الحقيقية. يرجى نقل الجزء الخلفي هنا
- أسلوب تصميم واجهة عميل WeChat عالي التقليد، مع رسوم متحركة للدفع والبوب والمشروط والرفض وغيرها من الرسوم المتحركة الانتقالية؛
- يمكن لوظائف التسجيل وتسجيل الدخول وتسجيل الخروج أن تتذكر حالة تسجيل الدخول وتجنب عمليات تسجيل الدخول المتعددة؛
- وظيفة غرفة الدردشة، يمكن لجميع المستخدمين عبر الإنترنت إجراء دردشة جماعية؛
- لإضافة صديق، يجب عليك التأكد من أن الطرف الآخر متصل بالإنترنت قبل أن تتمكن من إضافة صديق بشكل صحيح؛
- يمكن للمستخدمين الدردشة بشكل خاص حاليًا، يجب أن يكون الطرف الآخر متصلاً بالإنترنت قبل أن يتمكنوا من الدردشة بشكل طبيعي.
- حاليًا يتم دعم الدردشة النصية فقط.
المزيد من الميزات لمواصلة ...
إذا كنت تعتقد أن هذا المشروع جيد، يرجى وضع نجمة عليه ومشاركته!
