前段時間模仿小米商城做了一個PC端的商城網站vue-store,最近看了下微信小程式的文檔,所以就動手做了個微信小程式版的。
本專案重複使用了vue-store 的後端,在store-server 原來的基礎上新增了微信小程式的登入api。
利用網課的空閒時間邊學邊做,略為粗糙,有問題或有好的建議歡迎提Issues。
由於是用測試號做的,沒有線上預覽版。
PC端Web版:vue-store。
後端: store-server 。
如果覺得這個項目還不錯,您可以點右上角
Star
支持一下, 謝謝! ^_^
為區分小米商城官方小程序,該專案我命名為小小米。此專案與小米官方沒有關係,純屬個人瞎搞,若需要購買小米產品請到小米官方商城。
項目包含4個tabBar:首頁、發現頁(即商品展示頁)、購物車、我的。另有商品詳情頁、我的收藏、訂單結算頁面、我的訂單。
實現了商品的展示、商品分類查詢、關鍵字搜尋商品、商品詳細資訊展示、用戶購物車、訂單結算、用戶訂單、用戶收藏清單。
該專案整體參考了vue-store 實現,基本實現了其所有功能,可以說是其的微信小程式版。
後端重複使用了vue-store 的後端,在store-server 原來的基礎上加入了微信小程式的登入api。
前端:原生微信小程式
後端: Node.js
、 Koa框架
資料庫: Mysql
小程式在啟動的時候呼叫wx.login取得登入憑證( code ),然後把code回傳到專案的後端伺服器,呼叫auth.code2Session接口,換取使用者唯一標識OpenID和會話金鑰session_key 。 然後把OpenID註冊到專案資料庫生成本系統的唯一user_id ,用於本專案的業務驗證。
首頁主要是商品的展示,有輪播圖展示推薦的商品,熱門商品分類九宮格、分類別對熱門商品進行展示。
全部商品頁面整合了全部商品展示、商品分類查詢,以及根據關鍵字搜尋商品結果展示。
商品詳情頁主要是將某件商品的詳細資料展示,使用者可以將喜歡的商品加入購物車或收藏清單。
購物車採用omix進行全域狀態管理,實現了購物車商品的新增、刪除、增加商品數量、選擇結算商品、全選購物車商品結算等功能。
用戶在購物車選擇了準備購買的商品後,點選「去結算」按鈕,會來到該頁面。 用戶在這裡選擇收貨地址,確認訂單的相關訊息,然後確認購買。
用戶在商品的詳情頁,可以點擊加入喜歡按鈕,把喜歡的商品加入收藏清單。
對用戶的所有訂單進行展示。
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
作者hai-27
2020年3月31日