store miniprogram

Xiaomi (เวอร์ชันแอปเพล็ต vue-store WeChat)

คำนำ

เมื่อไม่นานมานี้ ฉันได้สร้างเว็บไซต์ vue-store ฝั่งพีซีโดยเลียนแบบ Xiaomi Mall ฉันเพิ่งอ่านเอกสารประกอบของมินิโปรแกรม WeChat ดังนั้นฉันจึงเริ่มสร้างเวอร์ชันมินิโปรแกรม WeChat

แสดงให้เห็น

โปรเจ็กต์นี้นำแบ็กเอนด์ของ vue-store มาใช้ซ้ำ และเพิ่ม API การเข้าสู่ระบบของแอปเพล็ต WeChat ตามเซิร์ฟเวอร์ร้านค้าดั้งเดิม

ฉันใช้เวลาว่างในชั้นเรียนออนไลน์เพื่อเรียนรู้และทำในเวลาเดียวกัน หากคุณมีคำถามหรือข้อเสนอแนะที่ดี โปรดส่งปัญหามาได้เลย

เนื่องจากสร้างด้วยบัญชีทดสอบ จึงไม่มีเวอร์ชันตัวอย่างออนไลน์

เวอร์ชันเว็บสำหรับพีซี: vue-store

แบ็กเอนด์: ร้านค้าเซิร์ฟเวอร์

หากคุณคิดว่าโครงการนี้ดี คุณสามารถคลิกติด Star ที่มุมขวาบนเพื่อสนับสนุนได้ ขอบคุณ! -

แนะนำโครงการ

เพื่อแยกแยะมินิโปรแกรมอย่างเป็นทางการของ Xiaomi Mall ฉันจึงตั้งชื่อโปรเจ็กต์นี้ว่า Xiaomi โปรเจ็กต์นี้ไม่เกี่ยวข้องกับเว็บไซต์อย่างเป็นทางการของ Xiaomi มันเป็นโปรเจ็กต์ส่วนตัวล้วนๆ หากคุณต้องการซื้อผลิตภัณฑ์ Xiaomi โปรดไปที่ร้านค้าอย่างเป็นทางการของ Xiaomi

โครงการประกอบด้วย 4 แถบแท็บ: หน้าแรก หน้าค้นพบ (เช่น หน้าแสดงผลิตภัณฑ์) ตะกร้าสินค้า และของฉัน นอกจากนี้ยังมีหน้ารายละเอียดสินค้า คอลเลกชันของฉัน หน้าการชำระเงินคำสั่งซื้อ และคำสั่งซื้อของฉัน

โดยสามารถรับรู้ถึงการแสดงผลิตภัณฑ์, การสอบถามการจัดหมวดหมู่ผลิตภัณฑ์, ผลิตภัณฑ์ค้นหาคำสำคัญ, การแสดงข้อมูลรายละเอียดผลิตภัณฑ์, ตะกร้าสินค้าของผู้ใช้, การชำระเงินตามคำสั่งซื้อ, คำสั่งซื้อของผู้ใช้ และรายการคอลเลกชันของผู้ใช้

โครงการโดยรวมหมายถึงการใช้งาน vue-store และใช้งานฟังก์ชันทั้งหมดโดยทั่วไป อาจกล่าวได้ว่าเป็นเวอร์ชันแอปเพล็ต WeChat

แบ็กเอนด์นำแบ็กเอนด์ของ vue-store มาใช้ซ้ำ และเพิ่ม API การเข้าสู่ระบบของแอปเพล็ต WeChat ตามเซิร์ฟเวอร์ร้านค้าดั้งเดิม

กองเทคโนโลยี

• ส่วนหน้า: แอปเพล็ต WeChat ดั้งเดิม

• แบ็กเอนด์: Node.js , Koa框架

• ฐานข้อมูล: Mysql

โมดูลฟังก์ชั่น

เข้าสู่ระบบ

เมื่อแอปเพล็ตเริ่มทำงาน ระบบจะเรียก wx.login เพื่อรับข้อมูลรับรองการเข้าสู่ระบบ ( code ) จากนั้นส่งโค้ดกลับไปยังเซิร์ฟเวอร์แบ็คเอนด์ของโปรเจ็กต์ เรียกอินเทอร์เฟซ auth.code2Session และแลกเปลี่ยนตัวระบุเฉพาะของผู้ใช้ OpenID และคีย์เซสชัน session_key จากนั้นลงทะเบียน OpenID ลงในฐานข้อมูลโปรเจ็กต์เพื่อสร้าง user_id เฉพาะสำหรับระบบนี้ ซึ่งใช้สำหรับการตรวจสอบธุรกิจในโปรเจ็กต์นี้

หน้าแรก

หน้าแรกมีไว้สำหรับแสดงผลิตภัณฑ์เป็นหลัก โดยมีภาพหมุนแสดงผลิตภัณฑ์แนะนำ ตารางเก้าตารางของหมวดหมู่ผลิตภัณฑ์ยอดนิยม และการแสดงผลิตภัณฑ์ยอดนิยมตามหมวดหมู่

ค้นพบ (เช่น ผลิตภัณฑ์ทั้งหมด)

หน้าผลิตภัณฑ์ทั้งหมดรวมการแสดงผลิตภัณฑ์ทั้งหมด การสอบถามประเภทผลิตภัณฑ์ และการแสดงผลการค้นหาผลิตภัณฑ์ตามคำหลัก

รายละเอียดสินค้าหน้า

หน้ารายละเอียดผลิตภัณฑ์จะแสดงข้อมูลโดยละเอียดของผลิตภัณฑ์บางรายการเป็นหลัก โดยผู้ใช้สามารถเพิ่มผลิตภัณฑ์โปรดลงในตะกร้าสินค้าหรือรายการโปรดได้

ตะกร้าสินค้าของฉัน

ตะกร้าสินค้าใช้ omix สำหรับการจัดการสถานะส่วนกลาง ซึ่งเปิดใช้ฟังก์ชันต่างๆ เช่น การเพิ่ม การลบ การเพิ่มจำนวนสินค้าในตะกร้าสินค้า การเลือกสินค้าสำหรับการชำระเงิน และการเลือกสินค้าทั้งหมดในตะกร้าสินค้าเพื่อการชำระเงิน

การสั่งซื้อการชำระบัญชี

หลังจากที่ผู้ใช้เลือกผลิตภัณฑ์ที่จะซื้อในตะกร้าสินค้าและคลิกปุ่ม "ไปที่การชำระเงิน" เขาจะมาที่หน้านี้ ที่นี่ผู้ใช้เลือกที่อยู่ในการจัดส่ง ยืนยันข้อมูลที่เกี่ยวข้องกับคำสั่งซื้อ จากนั้นยืนยันการซื้อ

คอลเลกชันของฉัน

ผู้ใช้สามารถเพิ่มผลิตภัณฑ์ที่ชื่นชอบลงในรายการโปรดได้โดยคลิกปุ่มเพิ่มถูกใจในหน้ารายละเอียดสินค้า

คำสั่งซื้อของฉัน

แสดงคำสั่งซื้อทั้งหมดที่ผู้ใช้ทำไว้

ของฉัน

รันโครงการ

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

ผู้เขียน ไฮ-27

31 มีนาคม 2020