微信小程式的應用數量超過了百萬，而幾乎所有頭部網際網路公司和獨角獸企業都開發了他們對應的小程式，小程式的日活使用者達到兩億多，而其中網路購物、餐飲服務佔據了全網Top10榜單的一半，由此看出電商在小程式中應用廣泛且使用者喜愛高，而疫情的出現，也讓一種新興的電子商務成為行業創新發展的新藍海，那就是社群電商，電商在小程式的應用如此熱門，如果你也想搭建一套這樣的小程式，那就一起來動手吧~

如果說你想著重頭完整的手寫程式碼，你首先需要熟悉前端語言JS+CSS+HTML5，後端語言php或java或node認選其一，而需要開發的功能包括商城、購物車、訂單、微信支付、我的資訊以及對應的管理後臺、資料庫設計等等。但是其實我們完全沒有必要這樣做，因為GitHub給我們提供了很多優秀的開源專案，我們只需要申請好小程式賬號、部署服務、釋出專案即可，原始碼專案如：

今天給大家選的講解例子是海風小店，因為它上手簡單且完全開源免費，而①微店的框架過大，不便於新手學習，且他的後端要是真正商用是要收費的。

一、準備工作
1、申請小程式賬號
申請小程式賬號只需要按照官網文件說明操作即可，這裡我就不展開說了，地址：https://developers.weixin.qq.com/miniprogram/introduction/
2、安裝本地Git工具&拉取程式碼

新建資料夾hioshop，cd 到該資料夾下後，輸入如下命令分別拉取小程式、後臺前端、服務端程式碼，命令：

3、建立資料庫&修改配置
①資料庫使用的是mysql，推薦管理工具使用Navicat。
安裝教程參考：https://blog.csdn.net/bobo553443/article/details/81383194
②新建資料庫，名稱可為：hiolabs（注意資料庫字元編碼為utf8mb4），並匯入專案根目錄下的hioshop.sql，初始化好原始資料

④填寫微信登入和微信支付配置和其他設定，開啟 src/common/config/config.js檔案，如果微信支付、oss服務什麼的你都還沒申請，都可以先不填寫，但是微信的appid 和secret 是必填的

微信的appid 和secret 在微信小程式官網登入以後，在控制檯頁面的開發->開發設定->開發者ID中

二、啟動專案
1、啟動服務端
首先我們需要部署並啟動服務端，這樣我們的小程式和後端管理程式才能連線到本地伺服器，使用本地的資料庫。
開啟終端， cd進入hioshop-server資料夾，輸入命令：npm start
此時控制檯列印正常的綠色sql日誌資訊，說明服務端正確啟動

2、除錯小程式
①下載微信開發者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
②在工具中匯入小程式專案，填寫任意專案名稱，目錄中選擇從git上拉取下來的hioshop-miniprogram資料夾，並填寫自己的App，點選匯入

③匯入後等待約1分鐘，載入完畢

小程式的大體框架和樣式如下圖展示，非常的乾淨舒服且功能齊全。

④修改資料來源：此時小程式的資料來源還不是你本地的，我們開啟hioshop-miniprogram專案下的config資料夾，檢視api.js檔案檔案：
預設的資料來源地址是：’https://www.hiolabs.com/api/’
修改為本地的資料來源：‘http://localhost:8360/api/’
⑤儲存配置檔案後，我們直接回到小程式開發工具裡面，點選’我的‘一欄，並使用微信登入驗證，檢視資料庫有登入資訊表示除錯成功

關注作者GZH，領取更多幹貨文章
WTestin測開大喵