從今天開始帶領大家實現一款雲開發版的校園二手商城小程式

技術選型1，前端微信小程式原生框架cssJavaScript2，管理後臺雲開發Cms內容管理系統web網頁3，資料後臺小程式雲開發雲函式雲資料庫雲端儲存效果預覽1，小程式端1-1，首頁

首頁有以下幾個功能點

1，頂部輪播圖2，商品搜尋3，二手商城入口4，新品推薦入口5，客服6，上門回收商戶入口1-2，釋出二手商品頁

這裡可以上傳二手商品圖片，選擇商品型別，輸入商品資訊。

1-3，二手商城頁

二手商城分左側分類欄和右側商品列表欄，可以直接新增商品到購物車。

1-4，購物車彈窗

首先列表頁可以直接新增商品到購物車

購物車彈起後可以做如下操作

1-5，搜尋功能

我們這裡搜尋有兩個觸發方式

1，直接點選搜尋圖示2，點選鍵盤上的搜尋鍵1-6，搜尋結果，支援模糊查詢

如我這裡只搜‘小’，那麼菜品中所有包含小 的都可以搜尋到

1-7，新品推薦列表頁

會把最新發布的商品顯示出來

1-8，商品詳情頁1-8-1，商品資訊

商品詳情頁有頂部圖片輪播，商品資訊，新增購物車，商品描述，使用者評價，底部購物車。

同樣商品頁新增商品也有一個和購物車聯動的功能。

1-9，下單頁

下單頁就是確認訂單後進行下單支付的。有以下功能

1，購物明細2，價格計算3，備註4，收貨地址5，點選下單

選擇好地址以後如下

1-10-2，新增和修改地址1-10-3，訪問通訊錄

我們填寫聯絡方式的時候，可以直接從通訊錄裡讀取。

1-10-4，地圖上選擇地址

可以直接從地圖上選擇收貨地址。

1-11，支付頁

支付頁分兩種方式

1，模擬支付適合前期學習，畢業設計等演示類的場景。2，真實微信支付適合商用，但是使用微信支付必須要有營業執照，所以前期如果只是學習的話，建議使用模擬支付。

所以我們的原始碼目前提供模擬支付版本，如果需要商業使用請聯絡石頭哥。

模擬支付

1-12，我的訂單頁

我的訂單頁分以下幾個狀態

在已完成訂單裡可以檢視評價。

1-14，評價列表頁

可以檢視所有評價

可以從評價列表裡檢視商品詳情頁。

1-15，個人中心

個人中心分登入和未登入兩種狀態

未登入

已登入

1-17，回收商列表頁(盈利變現)

我們可以透過這個回收商列表來展示回收商資訊，進而收取回收商的廣告費，也算一種盈利模式。後期使用者量大了，還可以展示別的廣告資訊來收廣告費，比如駕校啊，培訓機構啊。

這裡可以直接調起電話進行撥打，也可以直接複製聯絡方式。

1-18，線上客服

客戶直接在小程式裡發訊息給客服

網頁端客服

小程式端客服

1-19，意見反饋

客戶可以直接在小程式端提建議，建議裡可以新增圖片

管理員可以在小程式後臺，檢視客戶的反饋

2，商家端

3，cms網頁管理後臺

我們這裡的視覺化網頁後臺使用的是雲開發自帶的cms(內容管理)

3-1，登入頁3-2，管理後臺

我們可以在這裡

1，新增輪播圖，刪除輪播圖，修改輪播圖2，管理商品，上下架商品3，管理訂單4，檢視評價5，新增廣告商比如我查詢某個商品的評價設定商品是否上首頁推薦位

查詢哪些商品上了首頁推薦位

還有更多的功能，我會在影片課裡給大家用影片來演示，這樣更直觀。

4，資料庫

資料庫我們這裡用雲開發自帶的雲資料庫