<tr id="ieeco"><small id="ieeco"></small></tr>
<acronym id="ieeco"></acronym>

校園二手商城小程序,手把手帶你開發一款云開發版商城小程序,校園二手微信小程序,可升級社區團購小程序

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

技術選型

1,前端

  • 微信小程序原生框架
  • css
  • JavaScript

2,管理后臺

  • 云開發Cms內容管理系統
  • web網頁

3,數據后臺

  • 小程序云開發
  • 云函數
  • 云數據庫
  • 云存儲

效果預覽

1,小程序端

1-1,首頁

首頁有以下幾個功能點

  • 1,頂部輪播圖
  • 2,商品搜索
  • 3,二手商城入口
  • 4,新品推薦入口
  • 5,客服
  • 6,上門回收商戶入口

1-2,發布二手商品頁

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

1-3,二手商城頁

二手商城分左側分類欄和右側商品列表欄,可以直接添加商品到購物車。

1-4,購物車彈窗

首先列表頁可以直接添加商品到購物車

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

  • 1,增刪單個商品
  • 2,清空購物車
  • 3,刪除商品

這些操作都和商品列表是聯動的,也就是商品列表和購物車里增刪個數,都是可以同步的。我會在項目預覽章節的視頻里做具體演示。

1-5,搜索功能

我們這里搜索有兩個觸發方式

  • 1,直接點擊搜索圖標
  • 2,點擊鍵盤上的搜索鍵

1-6,搜索結果,支持模糊查詢

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

1-7,新品推薦列表頁

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

1-8,商品詳情頁

1-8-1,商品信息

商品詳情頁有頂部圖片輪播,商品信息,添加購物車,商品描述,用戶評價,底部購物車。

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

1-9,下單頁

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

  • 1,購物明細
  • 2,價格計算
  • 3,備注
  • 4,收貨地址
  • 5,點擊下單


選擇好地址以后如下

1-10,收貨地址管理頁

1-10-1,地址列表

可以選擇默認地址,編輯地址,刪除地址,復制地址。

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

1-10-3,訪問通訊錄

我們填寫聯系方式的時候,可以直接從通訊錄里讀取。

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

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

1-11,支付頁

支付頁分兩種方式

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

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

模擬支付

真實微信支付

1-12,我的訂單頁

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

  • 1,新下單待收貨
  • 2,已收貨待評價
  • 3,訂單完成
  • 4,訂單取消

    可以看出我們既有確認收貨,也有取消訂單的功能。

1-13,提交評論頁

我們可以對商品進行評論。

評論成功后會刷新列表,并且有評論成功的提示框

在已完成訂單里可以查看評價。

后期會考慮加入打分的評論,比如五星評價系統。

1-14,評價列表頁

可以查看所有評價

可以從評價列表里查看商品詳情頁。

1-15,個人中心

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

未登錄

已登錄

登錄成功后,也可以點擊退出登錄按鈕來退出。

1-16,微信授權登錄小程序

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

我們可以通過這個回收商列表來展示回收商信息,進而收取回收商的廣告費,也算一種盈利模式。后期用戶量大了,還可以展示別的廣告信息來收廣告費,比如駕校啊,培訓架構啊。

這里可以直接調起電話進行撥打,也可以直接復制聯系方式。

1-18,在線客服

客戶直接在小程序里發消息給客服

客服可以在網頁端,或者微信端管理消息

網頁端客服

小程序端客服

1-19,意見反饋

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

管理員可以在小程序后臺,查看客戶的反饋

2,商家端

2-1,管理我發布的商品

可以刪除已發布的商品

2-2,待發貨的訂單

我發布的商品,有用戶購買后,可以查看待發貨的訂單列表,送達后可以點擊已送達。

3,cms網頁管理后臺

我們這里的可視化網頁后臺使用的時云開發自帶的cms(內容管理)

3-1,登錄頁

3-2,管理后臺


我們可以在這里

  • 1,添加輪播圖,刪除輪播圖,修改輪播圖
  • 2,管理商品,上下架商品
  • 3,管理訂單
  • 4,查看評價
  • 5,添加廣告商

    比如我查詢某個商品的所評價

    設置商品是否上首頁推薦位

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

還有更多的功能,我會在視頻課里給大家用視頻來演示,這樣更直觀。

4,數據庫

數據庫我們這里用云開發自帶的云數據庫

配套資料

1,講解視頻

視頻課我會在B站免費提供給大家,歡迎關注,歡迎三連。
https://space.bilibili.com/419474640/video

2,配套筆記

配套筆記分在線版和離線電子書版。
在線筆記會在csdn上免費給到大家,歡迎關注,筆記會持續更新。
http://www.peter8000.cn/qiushi_1990

3,支持石頭哥😊

3-1,源碼和配套資源獲取

目前源碼和配套資源暫時不免費,畢竟創作不易,如果有需要的同學可以私聊石頭哥,拿米來換。

3-2,筆記電子書

筆記我也有整理一套電子書,大家也可以私聊石頭哥獲取電子書版的配套筆記。電子書筆記方便后期查詢知識點,當然也要拿米來換。

3-3,配置商業版商城小程序

可以聯系石頭哥配置商業版的商城小程序

4,問題解答(●’?’●)

另外石頭哥提供配套解答服務。當然了,知識付費時代石頭哥解答是要米的,畢竟石頭哥精力有限,石頭哥也是要吃面包的。石頭哥有推出包月,包年解答服務。你在學習過程中有任何問題,或者工作中遇到任何編程問題,都可以來找石頭哥
石頭哥目前可以解答如下問題

  • 小程序方面的問題
  • 云開發方面的問題
  • Java,springboot,Javaweb方面的問題
  • 畢設方面的問題
  • 安卓app開發方面的問題
  • html+css+JavaScript方面的問題
  • 前端開發的問題
  • 后端開發的問題
  • 面試找工作方面的問題

源碼版本

我目前提供下面兩個版本的源碼,不同的源碼適合不同的場景。目前重點對模擬支付版做講解,所以后面源碼導入部分一定要認真看。
因為商業版需要營業執照,好多同學因為滿足不了這個條件,所以我這里以模擬支付版為主。

1,模擬支付版

  • 這個版本適合畢業設計,初級學習等演示性的場合
  • 不需要營業執照

2,真實微信支付版

  • 這個版本適合商業場景使用
  • 必須有營業執照才可以

一,源碼導入和云開發的初始化

我源碼會在配套資料里給到付費用戶,年卡用戶也可以獲取到

1-1,源碼的下載

前期學習,只下載模擬支付版的源碼

1-2,源碼的導入

導入源碼的時候一定要把appid換成你自己的。appid需要注冊小程序才有的,所以學習這門課之前建議你先去看下我云開發基礎課:《零基礎人入門小程序云開發》

appid獲取的位置如下圖。

1-3,云開發的初始化

初始化云開發之前,必須先開通云開發。

1-3-1,初始化云開發環境id

點擊云開發,進入云開發控制臺。如果沒有這個圖標,說明你上面導入源碼時用的不是自己的appid。所以一定要用自己的appid

獲取環境id

把環境id復制到app.js里,把下面部分替換成你自己的環境id

1-3-2,云函數選擇環境

這里要注意,選擇的環境,必須和你app.js里填入的環境id保持一致。

1-4,云函數的部署

cloud目錄下的云函數都要部署一下

二,開通Cms可視化網頁管理后臺

我們上面源碼導入成功,并把云開發環境初始化成功以后,接下來就來開通cms可視化網頁后臺

2-1,進入云開發控制臺開通內容管理(CMS)

如下圖所示,直接點擊開通內容管理(CMS)即可

點擊完開通以后,會有如下彈窗,直接點擊確定即可。不要被付費嚇著,官方每月會送我們一定的免費額度的。學習得話基本上夠用了。

上面點完確定后,我們只是開啟了按量付費功能,因為cms得使用必須要開通按量付費才可以得。所以還要再點一次開通。如下圖

點完開通后,會有如下彈窗,直接點擊下一步即可。

然后我們需要設置登錄內容管理后臺得賬號和密碼,然后點擊確定即可

然后我們就等待內容管理功能得開通了,需要等幾分鐘。

開通成功以后,我們就可以通過下面這個地址進入管理后臺了。

2-2,登錄Cms可視化管理后臺

上面開通好以后,就可以通過后臺地址登錄管理后臺了。如下

2-3,創建項目

第一次登錄,我們還需要創建一個項目

自己輸入項目名和項目id即可

然后點擊進入剛剛創建的項目

到這里我們的cmd可視化網頁管理后臺就創建好了,下面教大家如何導入數據。

三,導入數據并修改數據庫權限

3-1,在cms后臺導入內容模型


把我為大家提前準備好的內容模型.json文件導入即可

導入完以后,可以看到多了以下幾個表

3-2,新建輪播圖數據


這里只需要上傳你想要顯示在小程序首頁輪播圖的圖片即可。

上傳好以后,不要忘記點擊下創建

可以看到我們小程序首頁的輪播圖就替換了你傳的這個。

3-3,添加回收商

這里沒什么說的,你按自己需求添加數據即可。

3-4,修改輪播圖和回收商數據表的權限

把lunbotu這個表的權限改為所有用戶可讀,僅創建者可讀寫。

把huishou這個表的權限改為 所有用戶可讀,僅創建者可讀寫。

3-5,修改商品表的權限

把goods這個表的權限改為 所有用戶可讀,僅創建者可讀寫。

四,源碼的大致講解(選看)

首先來給大家說下pages里的每個頁面

cloud云函數如下

我會在視頻里把每個頁面的代碼快速大致的給大家講解下。這節可以作為選看,后面會手把手的教大家寫一款屬于自己的校園二手商城小程序。

五,首頁的開發

六,首頁輪播圖的開發

七,搜索功能的開發

編程小石頭 Python PHP MySQL
碼農一枚,非著名全棧開發人員。分享自己的一些經驗,學習心得,希望后來人少走彎路,少填坑。編程小石頭和你一起快樂的學編程。
已標記關鍵詞 清除標記
相關推薦
彩票送彩金