從今天開(kāi)始帶領(lǐng)大家實(shí)現(xiàn)一款云開(kāi)發(fā)版的校園二手商城小程序

技術(shù)選型

1，前端

• 微信小程序原生框架

• css

• JavaScript

2，管理后臺(tái)

• 云開(kāi)發(fā)Cms內(nèi)容管理系統(tǒng)

• web網(wǎng)頁(yè)

3，數(shù)據(jù)后臺(tái)

• 小程序云開(kāi)發(fā)

• 云函數(shù)

• 云數(shù)據(jù)庫(kù)

• 云存儲(chǔ)

效果預(yù)覽

1，小程序端

1-1，首頁(yè)

首頁(yè)有以下幾個(gè)功能點(diǎn)

• 1，頂部輪播圖

• 2，商品搜索

• 3，二手商城入口

• 4，新品推薦入口

• 5，客服

• 6，上門回收商戶入口

1-2，發(fā)布二手商品頁(yè)

這里可以上傳二手商品圖片，選擇商品類型，輸入商品信息。

1-3，二手商城頁(yè)

二手商城分左側(cè)分類欄和右側(cè)商品列表欄，可以直接添加商品到購(gòu)物車。

1-4，購(gòu)物車彈窗

首先列表頁(yè)可以直接添加商品到購(gòu)物車

購(gòu)物車彈起后可以做如下操作

• 1，增刪單個(gè)菜品

• 2，清空購(gòu)物車

• 3，刪除菜品

這些操作都和菜品列表是聯(lián)動(dòng)的，也就是菜品列表和購(gòu)物車?yán)镌鰟h個(gè)數(shù)，都是可以同步的。我會(huì)在項(xiàng)目預(yù)覽章節(jié)的視頻里做具體演示。

1-5，搜索功能

我們這里搜索有兩個(gè)觸發(fā)方式

• 1，直接點(diǎn)擊搜索圖標(biāo)

• 2，點(diǎn)擊鍵盤上的搜索鍵

1-6，搜索結(jié)果，支持模糊查詢

如我這里只搜‘小’，那么菜品中所有包含小 的都可以搜索到

1-7，新品推薦列表頁(yè)

會(huì)把最新發(fā)布的商品顯示出來(lái)

1-8，商品詳情頁(yè)

1-8-1，商品信息

商品詳情頁(yè)有頂部圖片輪播，商品信息，添加購(gòu)物車，商品描述，用戶評(píng)價(jià)，底部購(gòu)物車。

同樣商品頁(yè)添加商品也有一個(gè)和購(gòu)物車聯(lián)動(dòng)的功能。

1-9，下單頁(yè)

下單頁(yè)就是確認(rèn)訂單后進(jìn)行下單支付的。有以下功能

• 1，購(gòu)物明細(xì)

• 2，價(jià)格計(jì)算

• 3，備注

• 4，收貨地址

• 5，點(diǎn)擊下單

選擇好地址以后如下

1-10，收貨地址管理頁(yè)

1-10-1，地址列表

可以選擇默認(rèn)地址，編輯地址，刪除地址，復(fù)制地址。

1-10-2，添加和修改地址

1-10-3，訪問(wèn)通訊錄

我們填寫聯(lián)系方式的時(shí)候，可以直接從通訊錄里讀取。

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

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

1-11，支付頁(yè)

支付頁(yè)分兩種方式

• 1，模擬支付
  適合前期學(xué)習(xí)，畢業(yè)設(shè)計(jì)等演示類的場(chǎng)景。

• 2，真實(shí)微信支付
  適合商用，但是使用微信支付必須要有營(yíng)業(yè)執(zhí)照，所以前期如果只是學(xué)習(xí)的話，建議使用模擬支付。

所以我們的源碼目前提供模擬支付版本，如果需要商業(yè)使用請(qǐng)聯(lián)系石頭哥。

模擬支付

真實(shí)微信支付

1-12，我的訂單頁(yè)

我的訂單頁(yè)分以下幾個(gè)狀態(tài)

• 1，新下單待收貨

• 2，已收貨待評(píng)價(jià)

• 3，訂單完成

• 4，訂單取消
  

• 
  可以看出我們既有確認(rèn)收貨，也有取消訂單的功能。

1-13，提交評(píng)論頁(yè)

我們可以對(duì)商品進(jìn)行評(píng)論。

評(píng)論成功后會(huì)刷新列表，并且有評(píng)論成功的提示框

在已完成訂單里可以查看評(píng)價(jià)。

后期會(huì)考慮加入打分的評(píng)論，比如五星評(píng)價(jià)系統(tǒng)。

1-14，評(píng)價(jià)列表頁(yè)

可以查看所有評(píng)價(jià)

可以從評(píng)價(jià)列表里查看商品詳情頁(yè)。

1-15，個(gè)人中心

個(gè)人中心分登錄和未登錄兩種狀態(tài)

未登錄

已登錄

登錄成功后，也可以點(diǎn)擊退出登錄按鈕來(lái)退出。

1-16，微信授權(quán)登錄小程序

1-17，回收商列表頁(yè)(盈利變現(xiàn))

我們可以通過(guò)這個(gè)回收商列表來(lái)展示回收商信息，進(jìn)而收取回收商的廣告費(fèi)，也算一種盈利模式。后期用戶量大了，還可以展示別的廣告信息來(lái)收廣告費(fèi)，比如駕校啊，培訓(xùn)架構(gòu)啊。

這里可以直接調(diào)起電話進(jìn)行撥打，也可以直接復(fù)制聯(lián)系方式。

1-18，在線客服

客戶直接在小程序里發(fā)消息給客服

客服可以在網(wǎng)頁(yè)端，或者微信端管理消息

網(wǎng)頁(yè)端客服

小程序端客服

1-19，意見(jiàn)反饋

客戶可以直接在小程序端提建議，建議里可以添加圖片

管理員可以在小程序后臺(tái)，查看客戶的反饋

2，商家端

2-1，管理我發(fā)布的商品

可以刪除已發(fā)布的商品

2-2，待發(fā)貨的訂單

我發(fā)布的商品，有用戶購(gòu)買后，可以查看待發(fā)貨的訂單列表，送達(dá)后可以點(diǎn)擊已送達(dá)。

3，cms網(wǎng)頁(yè)管理后臺(tái)

我們這里的可視化網(wǎng)頁(yè)后臺(tái)使用的時(shí)云開(kāi)發(fā)自帶的cms(內(nèi)容管理)

3-1，登錄頁(yè)

3-2，管理后臺(tái)

我們可以在這里

• 1，添加輪播圖，刪除輪播圖，修改輪播圖

• 2，管理商品，上下架商品

• 3，管理訂單

• 4，查看評(píng)價(jià)

• 5，添加廣告商
  

• 
  比如我查詢某個(gè)商品的所評(píng)價(jià)
  

• 
  設(shè)置商品是否上首頁(yè)推薦位
  

查詢哪些商品上了首頁(yè)推薦位

還有更多的功能，我會(huì)在視頻課里給大家用視頻來(lái)演示，這樣更直觀。

4，數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)我們這里用云開(kāi)發(fā)自帶的云數(shù)據(jù)庫(kù)