الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

Xiaomi (إصدار برنامج WeChat الصغير من متجر vue)

مقدمة

منذ بعض الوقت، قمت بإنشاء موقع ويب لمركز تجاري على جانب الكمبيوتر الشخصي يقلد Xiaomi Mall، وقد قرأت مؤخرًا وثائق برنامج WeChat الصغير، لذلك بدأت في إنشاء إصدار برنامج WeChat المصغر.

يوضح

يعيد هذا المشروع استخدام الواجهة الخلفية لـ vue-store ويضيف واجهة برمجة تطبيقات تسجيل الدخول لتطبيق WeChat الصغير استنادًا إلى خادم المتجر الأصلي.

أستخدم وقت فراغي في الفصول الدراسية عبر الإنترنت للتعلم والقيام بذلك في نفس الوقت، وهو أمر صعب بعض الشيء. إذا كانت لديك أي أسئلة أو اقتراحات جيدة، فلا تتردد في إرسال المشكلات.

نظرًا لأنه مصنوع باستخدام حساب اختباري، فلا يوجد إصدار للمعاينة عبر الإنترنت.

إصدار الويب للكمبيوتر الشخصي: vue-store.

الواجهة الخلفية: خادم المتجر.

إذا كنت تعتقد أن هذا المشروع جيد، يمكنك النقر على Star في الزاوية اليمنى العليا لدعمه. ^_^

مقدمة المشروع

من أجل تمييز البرنامج المصغر الرسمي لـ Xiaomi Mall، قمت بتسمية هذا المشروع Xiaomi. لا علاقة لهذا المشروع بموقع Xiaomi الرسمي، فهو مشروع شخصي بحت. إذا كنت بحاجة إلى شراء منتجات Xiaomi، فيرجى الانتقال إلى متجر Xiaomi الرسمي.

يحتوي المشروع على 4 أشرطة علامات تبويب: الصفحة الرئيسية، وصفحة الاكتشاف (أي صفحة عرض المنتج)، وعربة التسوق، وأشرطة خاصتي. هناك أيضًا صفحة تفاصيل المنتج ومجموعتي وصفحة تسوية الطلب وطلبي.

إنه يحقق عرض المنتج، واستعلام تصنيف المنتج، ومنتج البحث عن الكلمات الرئيسية، وعرض المعلومات التفصيلية للمنتج، وعربة تسوق المستخدم، وتسوية الطلب، وطلب المستخدم، وقائمة مجموعة المستخدمين.

يشير المشروع ككل إلى تطبيق vue-store وينفذ جميع وظائفه بشكل أساسي، ويمكن القول أنه إصدار برنامج WeChat الصغير.

تعيد الواجهة الخلفية استخدام الواجهة الخلفية لـ vue-store، وتضيف واجهة برمجة تطبيقات تسجيل الدخول لتطبيق WeChat الصغير استنادًا إلى خادم المتجر الأصلي.

كومة التكنولوجيا

  • الواجهة الأمامية: تطبيق WeChat الصغير الأصلي

  • الواجهة الخلفية: Node.js ، Koa框架

  • قاعدة البيانات: Mysql

وحدة الوظيفة

تسجيل الدخول

عند بدء تشغيل التطبيق الصغير، فإنه يستدعي wx.login للحصول على بيانات اعتماد تسجيل الدخول ( رمز )، ثم يرسل الرمز مرة أخرى إلى الخادم الخلفي للمشروع، ويستدعي واجهة auth.code2Session ، ويتبادل المعرف الفريد للمستخدم OpenID ومفتاح الجلسة جلسة_مفتاح . ثم قم بتسجيل OpenID في قاعدة بيانات المشروع لإنشاء معرف مستخدم فريد لهذا النظام، والذي يستخدم للتحقق من الأعمال في هذا المشروع.

الصفحة الأولى

الصفحة الرئيسية مخصصة بشكل أساسي لعرض المنتجات، مع عرض دائري للمنتجات الموصى بها، وشبكة من تسعة مربعات لفئات المنتجات الشائعة، وعرض المنتجات الشائعة حسب الفئة.

اكتشف (أي جميع المنتجات)

تدمج صفحة المنتج بالكامل عرض المنتج بالكامل واستعلام تصنيف المنتج وعرض نتائج البحث عن المنتج بناءً على الكلمات الرئيسية.

صفحة تفاصيل المنتج

تعرض صفحة تفاصيل المنتج بشكل أساسي المعلومات التفصيلية لمنتج معين، حيث يمكن للمستخدمين إضافة منتجاتهم المفضلة إلى عربة التسوق أو قائمة المفضلة.

عربة التسوق الخاصة بي

تستخدم عربة التسوق omix لإدارة الحالة العامة، والتي تتيح وظائف مثل إضافة وحذف وزيادة عدد العناصر في عربة التسوق وتحديد العناصر للتسوية وتحديد كافة العناصر في عربة التسوق للتسوية.

تسوية الطلب

بعد أن يقوم المستخدم باختيار المنتج المراد شراؤه في عربة التسوق والنقر على زر "الذهاب إلى الخروج"، سيأتي إلى هذه الصفحة. هنا يقوم المستخدم بتحديد عنوان التسليم، ويؤكد المعلومات ذات الصلة بالطلب، ثم يؤكد عملية الشراء.

مجموعتي

يمكن للمستخدمين إضافة منتجاتهم المفضلة إلى قائمة المفضلة عن طريق النقر فوق الزر "إضافة إعجاب" في صفحة تفاصيل المنتج.

طلبي

عرض جميع الطلبات المقدمة من قبل المستخدم.

مِلكِي

تشغيل المشروع 

请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可

المؤلف هاي-27

31 مارس 2020

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل