tdesign miniprogram starter retail

Applet sampel templat industri ritel TDesign

Applet sampel templat ritel TDesign dibuat menggunakan solusi applet sistem desain tingkat perusahaan TDesign dan bergantung pada pustaka komponen applet TDesign WeChat untuk memenuhi persyaratan skenario ritel dasar yang lengkap.

? Pratinjau

Silakan gunakan WeChat untuk memindai kode QR berikut:

? Pengenalan proyek

1. Pengenalan bisnis

Applet templat industri ritel adalah applet e-niaga toko tunggal klasik, yang mencakup proses tautan emas e-niaga, mulai dari produk -> keranjang belanja -> penyelesaian -> pesanan, dll. Mini program ini berisi total 28 halaman lengkap, meliputi halaman dasar seperti homepage, halaman detail produk, personal center, dan proses purna jual. Menggunakan data tiruan untuk tampilan, ini menyediakan tampilan produk ritel lengkap, transaksi dan proses purna jual. Detail halaman:

Tangkapan layar halaman utama adalah sebagai berikut:

2. Komposisi proyek

Applet templat industri ritel dibuat menggunakan JavaScript dasar + WXSS + ESLint, yang menurunkan ambang batas penggunaan.

Struktur direktori proyek adalah sebagai berikut:

 |-- tdesign-miniprogram-starter
    |-- README.md
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- components	//	公共组件库
    |-- config	//	基础配置
    |-- custom-tab-bar	//	自定义 tabbar
    |-- model	//	mock 数据
    |-- pages
    |   |-- cart	//	购物车相关页面
    |   |-- coupon	//	优惠券相关页面
    |   |-- goods	//	商品相关页面
    |   |-- home	//	首页
    |   |-- order	//	订单售后相关页面
    |   |-- promotion-detail	//	营销活动页面
    |   |-- usercenter	//	个人中心及收货地址相关页面
    |-- services	//	请求接口
    |-- style	//	公共样式与iconfont
    |-- utils	//	工具库

3. Simulasi data

Program mini ritel menggunakan data antarmuka nyata untuk mensimulasikan logika pengembalian back-end, dan menampilkan skenario belanja lengkap dan logika pengalaman berbelanja dalam program mini.

4. Tambahkan halaman baru

1. Buat folder halaman yang sesuai di direktori pages
2. Tambahkan jalur halaman ke array "pages" di file app.json
3. [Opsional] Tambahkan konfigurasi halaman di bawah "miniprogram-list" di file project.config.json

? Bangun dan jalankan

1. npm install
2. Memperkenalkan proyek ke dalam alat pengembangan program kecil
3. Bangun npm

? Kontrol gaya kode

eslint prettier

Versi perpustakaan dasar

Versi perpustakaan dasar minimum ^2.6.5

masukan

Tim TDesign Grup WeChat Perusahaan akan segera merilis versi dan informasi perbaikan masalah di grup WeChat perusahaan, dan juga akan ada beberapa diskusi tentang pembangunan perpustakaan komponen. Selamat memindai kode QR di WeChat atau WeChat Perusahaan untuk bergabung dengan grup untuk komunikasi :

Surel: [email protected]

? TDesain implementasi tumpukan teknologi lainnya

• Implementasi program mini seluler: miniprogram seluler
• Implementasi Desktop Vue 2: web-vue
• Implementasi Desktop Vue 3: web-vue-next
• Implementasi Desktop React: reaksi web

?

TDesign mengikuti lisensi MIT.