store miniprogram
1.0.0
少し前に、Xiaomi Mall を模倣した PC 側のモール Web サイト vue-store を作成しました。最近 WeChat ミニ プログラムのドキュメントを読んだので、WeChat ミニ プログラム版を作成し始めました。
このプロジェクトは、vue-store のバックエンドを再利用し、元のストアサーバーに基づいて WeChat アプレットのログイン API を追加します。
私はオンライン授業で空いた時間を学習と並行して行っています。質問や良い提案があれば、お気軽に問題を送信してください。
テストアカウントで作成しているため、オンラインプレビュー版はありません。
PC Web版：vue-store。
バックエンド: ストアサーバー 。
このプロジェクトが良いと思われた場合は、右上隅の
Starクリックしてサポートしてください。ありがとうございます。 ^_^
Xiaomi Mall の公式ミニプログラムと区別するために、このプロジェクトを Xiaomi と名付けました。このプロジェクトはXiaomi公式サイトとは何の関係もありません。Xiaomi製品を購入する必要がある場合は、Xiaomi公式ストアにアクセスしてください。
プロジェクトには、ホーム ページ、ディスカバリー ページ (つまり、製品表示ページ)、ショッピング カート、および私のタブ バーの 4 つのタブバーが含まれています。製品詳細ページ、マイコレクション、注文決済ページ、マイオーダーもあります。
商品表示、商品分類クエリ、商品キーワード検索、商品詳細情報表示、ユーザーショッピングカート、注文決済、ユーザー注文、ユーザーコレクションリストを実現します。
プロジェクト全体は vue-store 実装を参照し、基本的にそのすべての機能を実装します。これは、その WeChat アプレット バージョンと言えます。
バックエンドは vue-store のバックエンドを再利用し、元のストアサーバーに基づいて WeChat アプレットのログイン API を追加します。
フロントエンド:ネイティブ WeChat アプレット
バックエンド: Node.js 、 Koa框架
データベース: Mysql
アプレットが開始されると、 wx.loginを呼び出してログイン認証情報 ( code ) を取得し、そのコードをプロジェクトのバックエンド サーバーに送り返し、 auth.code2Sessionインターフェイスを呼び出して、ユーザーの一意の識別子であるOpenIDとセッション キーを交換します。セッションキー。 次に、 OpenID をプロジェクト データベースに登録して、このシステムの一意のuser_id を生成します。これは、このプロジェクトでのビジネス検証に使用されます。
このホームページは主に商品の表示を目的としており、推奨商品を表示するカルーセル、人気の商品カテゴリーを 9 マスで表示したり、カテゴリーごとに人気の商品を表示したりすることができます。
全商品ページでは、全商品表示、商品分類クエリ、キーワードによる商品検索結果表示が統合されています。
商品詳細ページには主に特定の商品の詳細情報が表示され、ユーザーはここでお気に入りの商品をショッピングカートやお気に入りリストに追加できます。
ショッピング カートではグローバル ステータス管理に omix が使用されており、ショッピング カート内の商品の追加、削除、数の増加、決済対象の商品の選択、決済対象のショッピング カート内のすべての商品の選択などの機能が可能です。
ユーザーがショッピングカートで購入する商品を選択し、「チェックアウトに進む」ボタンをクリックすると、このページが表示されます。 ここでユーザーは配送先住所を選択し、注文に関する関連情報を確認して、購入を確認します。
ユーザーは、製品詳細ページの「いいね！」ボタンをクリックして、お気に入りの製品をお気に入りリストに追加できます。
ユーザーが行ったすべての注文を表示します。
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
著者hai-27
2020年3月31日
