微信鮮花銷售小程序的設計與實現(xiàn)

張婭妮 余茂銳

摘? 要：隨著人們生活水平的不斷提高，鮮花消費近年來呈上升趨勢。為解決鮮花實體店庫存周期問題，設計開發(fā)了一款鮮花銷售微信小程序，在“互聯(lián)網+”的信息時代，為鮮花銷售行業(yè)提供了一個便捷的銷售渠道。所設計小程序操作簡單，界面清晰，管理方便，功能完善，具有很高的使用價值。用戶通過小程序可以瀏覽、下單購買鮮花商品，具有很強的實用性，應用前景廣闊。

關鍵詞：鮮花；小程序；云開發(fā)；微信開發(fā)

中圖分類號：TP311? 文獻標識碼：A? ? 文章編號：2096-4706（2023）18-0051-05

Design and Implementation of WeChat Mini Program for Flower Sales

ZHANG Yani， YU Maorui

（School of Computer and Information， Qiannan Normal University for Nationalities， Duyun? 558000， China）

Abstract： With the continuous improvement of people's living level， flower consumption has become more and more prosperous in recent years. In order to solve the problem of inventory cycle of flower physical stores， a WeChat Mini Program for flower sales is designed and developed， which provides a convenient distribution channel for this industry in the information age of “Internet + ”. The Mini Program has simple operation， clear interface， convenient management， perfect function and high use value. Through this Mini Program， users can browse and order to buy flowers， and it has strong practicability and broad application prospects.

Keywords： flower; Mini Program; cloud development; WeChat development

0? ?引? ?言

使用微信小程序設計鮮花銷售這一服務平臺，旨在為購買鮮花的用戶帶來更多便利。開發(fā)設計使用云開發(fā)技術作為后臺數(shù)據(jù)的支撐，管理員能夠方便快捷地對數(shù)據(jù)進行管理。使用微信開發(fā)者工具開發(fā)出來的微信小程序具有人性化、合理化的界面，功能滿足用戶需求與使用。

1? 程序功能設計

1.1? 功能需求分析

微信賣花小程序主要由普通用戶模塊和后臺管理員模塊組成。下面分別介紹這兩個模塊的功能和需求分析。

1.1.1? 后臺管理員模塊功能需求

輪播圖管理功能：對首頁的輪播圖進行管理，可添加或減少輪播圖；

鮮花分類管理功能：對鮮花種類進行分類管理，該分類是否在首頁顯示；

鮮花商品管理功能：對鮮花商品的標題，價格，分類，圖片，商品詳情的描述及圖片是否在首頁推薦該商品，商品的上架和下架、銷量和庫存進行管理；

鮮花訂單管理功能：對普通用戶購買的鮮花訂單的訂單明細、收貨地址等進行管理；

用戶管理功能：對登錄注冊的用戶進行管理；

評論管理功能：對用戶評價進行管理；

收藏管理功能：對用戶收藏進行管理。

1.1.2? 普通用戶模塊功能需求

瀏覽商品功能：普通用戶可以瀏覽小程序上面的鮮花商品及其詳情信息；

今日熱銷功能：能根據(jù)銷售量給用戶推銷今日熱銷鮮花商品；

搜索功能：在首頁搜索框根據(jù)關鍵詞搜索鮮花商品；

收藏功能：對商品可進行收藏和取消收藏操作；

分享功能：對商品可進行分享操作；

登錄功能：用戶授權微信賬號登錄；

加入購物車功能：將看中的商品添加到購物車；

提交訂單功能：提示訂單已支付和未支付，并能限時取消支付；

備注地址功能：可在訂單頁面?zhèn)渥⑹肇浀刂罚?/p>

購物明細功能：在訂單頁面可查看購物明細及總計消費，增加和減少購買商品的數(shù)量，及備注信息；

分類功能：可根據(jù)商品分類快速找到想要的商品種類；

購物車功能：管理加入購物車的商品列表，增加、減少、刪除和全選功能；當數(shù)量減少到最低數(shù)量1時，繼續(xù)點擊減號會出現(xiàn)提示從購物車刪除此商品；

結算功能：在購物車頁面選擇了商品點擊結算能跳入訂單頁面；

待評價功能：查看商品的支付狀態(tài)，可進行支付功能；

待發(fā)貨功能：查看支付成功后商品的發(fā)貨狀態(tài)，可進行取消訂單功能；

待收貨功能：查看和確認商品的收貨狀態(tài)，可進行已收貨功能；

待評價功能：確認收到商品后去評價商品；

已完成功能：查看已完成的商品并對其進行評價；

我的收藏功能：查看收藏商品的列表，具有刪除功能；

在線客服功能：聯(lián)系客服；

意見反饋功能：意見反饋；

退出登錄功能：退出用戶登錄。

1.2? 云開發(fā)需求分析

在本項目中云開發(fā)將用于存儲輪播圖的圖片、商品詳情信息的圖片、用戶頭像信息的圖片，以及建立集合用于存儲商品內容記錄、鮮花訂單記錄、收藏記錄、評論記錄和用戶信息記錄，從而可以實現(xiàn)頁面的動態(tài)商品列表獲取、商品信息獲取、收藏列表獲取、評論信息獲取以及用戶的個人信息的獲取。

在本項目中云開發(fā)還用于后臺管理模塊的信息管理，主要是在云開發(fā)里的內容管理中，根據(jù)新建的集合里面的記錄和字段對輪播圖信息、商品信息、商品分類信息、訂單信息、收藏信息、評論信息和用戶信息進行管理。

1.3? 流程圖設計

不同用戶擁有的權限不同，則進入小程序獲得的功能不同。如圖1和圖2所示。

2? 信息存入云數(shù)據(jù)庫

在本小程序設計中，用戶使用的功能模塊，都是存入云數(shù)據(jù)庫中進行保存的，因此我們需要在前端js文件中通過代碼來對云數(shù)據(jù)庫中的數(shù)據(jù)進行更新。首先我們在云開發(fā)數(shù)據(jù)庫中新建了一個名為“shop_types”的集合用于存放鮮花商品分類信息，并將該集合的權限設置為“自定義安全規(guī)則”。其次在該集合中添加新的記錄，此時系統(tǒng)會為該記錄默認生成一個文檔ID，該文檔ID存儲在該記錄的字段“_id”中。我們?yōu)橛涗浱砑有碌淖侄?，分別為：

1）“images”（類型為string，用于記錄商品分類圖片，該路徑通常為云存儲中的文件屬性中的“File ID”）；

2）“isShowOnHome”（類型為boolean，用于控制此商品分類是否在首頁顯示）；

3）“name”（類型為string，用于展示商品分類的名稱）；

4）“_createTime”（類型為number，該字段是系統(tǒng)自動生成的，用于記錄商品信息的創(chuàng)建時間）；

5）“_updateTime”（類型為number，該字段是系統(tǒng)自動生成的，用于記錄商品信息的修改時間）。

最后設置小程序頁面獲取鮮花分類列表：

1）在index文件夾下新建一個typeDetail頁面文件夾；

2）打開文件夾的js文件，在onLoad：（options）{}中定義一個this.getTypeGoodsList（options.id）的字段來根據(jù)傳過來的id來獲取分類商品列表的數(shù)據(jù)；

3）新建一個函數(shù)，命名為getTypeGoodsList

（typeId）{}和toGoodDetail（event）{}分別用于獲取商品分類列表和獲取商品詳情。接著在其下方寫入wx.cloud.database（）.collection（“集合名稱”）.get（）語句，該語句中colud.database（）為獲取數(shù)據(jù)庫引用，而collection（“集合名稱”）用于引用指定名稱的集合，get（）方法則會觸發(fā)網絡請求，從數(shù)據(jù)庫中獲取數(shù)據(jù)。

具體代碼片段如下：

getTypeGoodsList（typeId）{

wx.cloud.database（）.collection（'shop_goods'）

.where（{

type：typeId，

status：true，

stockNumber：wx.cloud.database（）.command.gt（0）? ? // 庫存數(shù)量必須大于0才會查詢顯示

}）

.get（）

.then（res=>{

console.log（res）

this.setData（{

goodsList：res.data

}）

}）

}，

// 獲取商品詳情

toGoodDetail（event）{

console.log（event.currentTarget.dataset.id）

let id = event.currentTarget.dataset.id

wx.navigateTo（{

url： '/pages/goodDetail/goodDetail？id=' + id，

}）

}

3? 小程序功能模塊實現(xiàn)

3.1? 首頁實現(xiàn)

首頁功能包括搜索框、輪播圖自動切換、分類、今日熱銷?；瑒邮醉?，即可查看商品列表、購買、商品評價等功能。具體設置如下：

首先，打開該index頁面文件夾的wxml文件，在制作過程中，我們主要用到以下幾個組件：

1）標簽，該標簽只接受控制語句，不做任何渲染，為其添加一個wx：for = “{}”屬性，該屬性用于綁定數(shù)組，從而實現(xiàn)對該數(shù)組中的數(shù)據(jù)進行頁面渲染；

2）組件，該組件用于渲染分類圖片；

3）組件，該組件用于添加視圖容器，如分類名稱：{{item.name}}；

以上的組件在wxml中進行調用。

其次，打開首頁文件夾的index.wxml，分別逐層添加、和標簽。通過js獲取并在wxml頁面中展示。如圖3所示。

3.2? 小程序分類頁及底航欄實現(xiàn)

進入小程序，在底航欄切換到分類頁，底航欄分類圖標從灰色變成紅色，實現(xiàn)選中是圖標的切換。

首先，小程序的底部導航欄可以通過app.json進行配置；

其次，打開app.json文件，并新增一個“tarBar”；

再次，在“tarBar”中添加一個“l(fā)ist”屬性，該屬性用于配置小程序頁面中底部導航欄所擁有的選項?！發(fā)ist”中的每一項都應包含有以下屬性：

1）“color”：該屬性用于設置選項下方所顯示的文字顏色；

2）“pagePath”：該屬性必須存在的，否則直接報錯，該屬性為設置選項所指向的頁面文件加配置；

3）“text”：該屬性用于設置選項下方所顯示的文字標識；

4）“iconPath”：該屬性用于設置選項所顯示的圖片圖標；

5）“selectedIconPath”：為了方便辨認當前所選擇的選項，可以添加該屬性來改變選項被選中時的圖標顏色。如圖4所示。

3.3? ?購物車功能實現(xiàn)

進入小程序，在底航欄切換到購物車頁，查看加入購物車的商品列表，增加、減少、刪除和全選功能，當數(shù)量減少到最低數(shù)量1時，繼續(xù)點擊減號會出現(xiàn)提示從購物車刪除此商品，如圖5所示。在訂單頁備注收貨地址，備注信息，如圖6所示。

3.4? “我的”頁面功能實現(xiàn)

登錄成功之前，用戶只能瀏覽首頁和分類頁，點擊購物車頁，商品詳情頁的加入購物車和立即購買功能是會跳轉到我的頁，并提示“請登錄”，授權登錄成功之后正常使用所有功能顯示。如圖7所示。

3.5? 我的訂單功能實現(xiàn)

進入小程序，在底航欄切換到我的頁，授權登錄成功，點擊（待發(fā)貨、待收貨、待評價、已完成）四個中任意一個進入我的訂單頁查看（待支付、待發(fā)貨、待收貨、待評價、已完成）對應下的商品狀態(tài)信息。如圖8所示。

3.6? 后臺管理功能實現(xiàn)

該微信小程序的后臺管理利用的是云開發(fā)的內容管理功能，進入內容管理用管理員賬號登錄，創(chuàng)建新的項目即可對該微信小程序的數(shù)據(jù)庫表進行管理，新建管理模型，管理對應的數(shù)據(jù)庫，分別是：“shop_banners”“shop_collects”“shop_comments”“shop_goods”“shop_orders”“shop_types”“shop_users”

再根據(jù)數(shù)據(jù)庫的相應字段，在管理模型中添加，就可以對數(shù)據(jù)庫進行管理。后臺管理員有以下功能模塊：輪播圖管理、鮮花分類管理、鮮花商品管理、鮮花訂單管理、用戶管理、評論管理，收藏管理。管理員在后臺內容集合中對數(shù)據(jù)庫進行增刪查改。如圖9所示。

4? 結? 論

隨著計算機及網絡技術的飛速發(fā)展，信息自動化的作用也越來越大，提高了我們的工作效率。我國互聯(lián)網行業(yè)發(fā)展迅速，上網人數(shù)基數(shù)大，目前網上購買鮮花正在被消費者普遍接受，國內各大型綜合門戶網站也開展有鮮花電子商務。微信小程序具有無須安裝和卸載，易擴展、成本低的特點，作為輕型應用代表著今后移動APP的發(fā)展方向，這種輕型應用雖然不會替代所有的獨立APP，但也會是未來移動互聯(lián)網應用的主要形式，相信以微信小程序作為載體的信息平臺將會成為未來幾年里的主流。

參考文獻：

[1] 王艷君，高宇乾.講座管理微信小程序的設計與實現(xiàn) [J].自動化技術與應用，2022，41（9）：153-156.

[2] 楊建敏，伏健，鄭珊珊.基于微信小程序的大學生成長紀實平臺的設計與實現(xiàn) [J].現(xiàn)代電子技術，2022，45（22）：101-106.

[3] 宋龍生，倪勝巧.校園失物招領微信小程序的設計與實現(xiàn) [J].計算機時代，2021（10）：86-89.

[4] 陸霞.基于LBS云平臺的微信小程序二維碼區(qū)域定位系統(tǒng)設計 [J].現(xiàn)代電子技術，2020，43（4）：180-182+186.

[5] 李霞.基于微信小程序的高校新生預報到系統(tǒng)設計與實現(xiàn) [J].微型電腦應用，2022，38（7）：12-15.

[6] 陳靜嫻.基于二維碼技術·微信小程序技術的實驗室設備管理的設計與實現(xiàn) [J].計算機科學，2020，47（S2）：673-677.

[7] 張妮，郭治豪，楊盈圖.職業(yè)教育移動學習小程序的設計與實現(xiàn) [J].現(xiàn)代信息科技，2022，6（16）：18-21.

[8] 韓蕾.航天通信中心微信營業(yè)廳的設計與實現(xiàn) [J].計算機仿真，2021，38（11）：148-152.

[9] 賈保敏.基于微信小程序的高校人事辦公服務平臺設計與實現(xiàn) [J].軟件工程，2022，43（7）：34-38.

[10] 雷文禮，張鑫，包佳偉，等.基于微信平臺的智能澆花系統(tǒng)設計 [J].現(xiàn)代電子技術，2022，45（11）：73-76.

作者簡介：張婭妮（1980—），女，滿族，四川成都人，副教授，工程碩士，主要研究方向：計算機信息管理、信息技術教育；余茂銳（1998—），女，蒙古族，貴州畢節(jié)人，本科在讀，主要研究方向：計算機應用。