store miniprogram

Xiaomi (versi applet WeChat toko vue)

Kata pengantar

Beberapa waktu lalu, saya membuat website vue-store PC-side mall yang meniru Xiaomi Mall. Saya baru saja membaca dokumentasi program mini WeChat, jadi saya mulai membuat versi program mini WeChat.

menjelaskan

Proyek ini menggunakan kembali backend vue-store, dan menambahkan API login applet WeChat berdasarkan server toko asli.

Saya menggunakan waktu luang saya di kelas online untuk belajar dan melakukannya pada saat yang bersamaan. Jika Anda memiliki pertanyaan atau saran bagus, silakan kirimkan Masalah.

Karena dibuat dengan akun uji, tidak ada versi pratinjau online.

Versi web PC: vue-store.

Backend: server-toko .

Jika menurut Anda proyek ini bagus, Anda dapat mengklik Star di pojok kanan atas untuk mendukungnya. Terima kasih! ^_^

Pengenalan proyek

Untuk membedakan program mini resmi Xiaomi Mall, saya menamai proyek ini Xiaomi. Proyek ini tidak ada hubungannya dengan situs resmi Xiaomi. Ini murni proyek pribadi. Jika Anda perlu membeli produk Xiaomi, silakan kunjungi toko resmi Xiaomi.

Proyek ini berisi 4 tabBar: halaman beranda, halaman penemuan (yaitu halaman tampilan produk), keranjang belanja, dan milik saya. Ada juga halaman detail produk, koleksi saya, halaman penyelesaian pesanan, dan pesanan saya.

Ini mewujudkan tampilan produk, permintaan klasifikasi produk, produk pencarian kata kunci, tampilan informasi detail produk, keranjang belanja pengguna, penyelesaian pesanan, pesanan pengguna, dan daftar koleksi pengguna.

Proyek ini secara keseluruhan mengacu pada implementasi vue-store dan pada dasarnya mengimplementasikan semua fungsinya. Dapat dikatakan sebagai versi applet WeChat-nya.

Backend menggunakan kembali backend vue-store, dan menambahkan API login applet WeChat berdasarkan server toko asli.

tumpukan teknologi

• Front-end: applet WeChat asli

• Backend: Node.js , Koa框架

• Basis Data: Mysql

Modul fungsi

Masuk

Ketika applet dimulai, ia memanggil wx.login untuk mendapatkan kredensial login ( code ), kemudian mengirimkan kode kembali ke server back-end proyek, memanggil antarmuka auth.code2Session , dan menukar pengidentifikasi unik pengguna OpenID dan kunci sesi sesi_kunci . Kemudian daftarkan OpenID ke dalam database proyek untuk menghasilkan user_id unik untuk sistem ini, yang digunakan untuk verifikasi bisnis dalam proyek ini.

halaman depan

Halaman beranda terutama untuk tampilan produk, dengan carousel yang menampilkan produk yang direkomendasikan, kotak sembilan persegi kategori produk populer, dan tampilan produk populer berdasarkan kategori.

Temukan (yaitu semua produk)

Halaman semua produk mengintegrasikan semua tampilan produk, kueri klasifikasi produk, dan tampilan hasil pencarian produk berdasarkan kata kunci.

Halaman detail produk

Halaman detail produk terutama menampilkan informasi detail produk tertentu, di mana pengguna dapat menambahkan produk favoritnya ke keranjang belanja atau daftar favorit.

Keranjang belanja saya

Keranjang belanja menggunakan omix untuk manajemen status global, yang mengaktifkan fungsi seperti menambah, menghapus, menambah jumlah item di keranjang belanja, memilih item untuk penyelesaian, dan memilih semua item di keranjang belanja untuk penyelesaian.

Penyelesaian pesanan

Setelah pengguna memilih produk yang akan dibeli di keranjang belanja dan mengklik tombol "Pergi ke Checkout", dia akan dibawa ke halaman ini. Di sini pengguna memilih alamat pengiriman, mengonfirmasi informasi yang relevan tentang pesanan, dan kemudian mengonfirmasi pembelian.

koleksi saya

Pengguna dapat menambahkan produk favoritnya ke daftar favorit dengan mengklik tombol Tambah Suka di halaman detail produk.

pesanan saya

Menampilkan semua pesanan yang dilakukan oleh pengguna.

milikku

Jalankan proyek

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

Penulis hai-27

31 Maret 2020