tdesign miniprogram starter retail

TDesign 小売業界テンプレート サンプル アプレット

TDesign 小売テンプレート サンプル アプレットは、TDesign エンタープライズ レベルのデザイン システム アプレット ソリューションを使用して構築されており、TDesign WeChat アプレット コンポーネント ライブラリに依存して、基本的な小売シナリオの要件をすべてカバーします。

プレビュー

WeChat を使用して次の QR コードをスキャンしてください。

プロジェクト紹介

1. 事業紹介

小売業界テンプレート アプレットは、製品 -> ショッピング カート -> 決済 -> 注文などの電子商取引のゴールデン リンク プロセスをカバーする、古典的な単一店舗の電子商取引アプレットです。ミニ プログラムには、ホームページ、製品詳細ページ、パーソナル センター、アフター プロセスなどの基本ページを網羅した、合計 28 ページの完全版が含まれています。表示用のモックデータを使用して、小売製品の表示、取引、アフターセールスのプロセスを完全に提供します。ページの詳細:

メインページのスクリーンショットは次のとおりです。

2. プロジェクトの構成

小売業界のテンプレート アプレットは、基本的な JavaScript + WXSS + ESLint を使用して構築されているため、使用の敷居が低くなります。

プロジェクトのディレクトリ構造は次のとおりです。

 |-- 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. データシミュレーション

小売ミニ プログラムは、実際のインターフェイス データを使用してバックエンド返品ロジックをシミュレートし、ミニ プログラムで完全なショッピング シナリオとショッピング エクスペリエンス ロジックを表示します。

4. 新しいページを追加する

1. pagesディレクトリに対応するページフォルダーを作成します。
2. app.jsonファイルの"pages"配列にページ パスを追加します。
3. [オプション] project.config.jsonファイルの"miniprogram-list"の下にページ構成を追加します。

ビルドして実行する

1. npm install
2. プロジェクトを小規模プログラム開発ツールに導入する
3. npmをビルドする

? コードスタイルコントロール

eslint prettier

基本ライブラリのバージョン

基本ライブラリの最小バージョン^2.6.5

フィードバック

エンタープライズ WeChat グループ TDesign チームは、エンタープライズ WeChat グループでバージョンと問題修正情報を速やかにリリースします。また、コンポーネント ライブラリの構築に関するディスカッションも行われます。WeChat または Enterprise WeChat で QR コードをスキャンして、コミュニケーションのためにグループに参加してください。 :

電子メール: [email protected]

? TDesign のその他のテクノロジー スタックの実装

• モバイル ミニ プログラムの実装: mobile-miniprogram
• デスクトップ Vue 2 実装: web-vue
• Desktop Vue 3 実装: web-vue-next
• デスクトップ React 実装: web-react

オープンソース契約

TDesign は MIT ライセンスに従います。