龍芳 吳勇靈

摘? 要：根據(jù)用戶微信購物需求，采用微信開發(fā)者工具開發(fā)前端頁面，采用云開發(fā)平臺開發(fā)后臺部件，構(gòu)建一款微信小程序購物系統(tǒng)。該系統(tǒng)由用戶（包括授權(quán)登錄、瀏覽商品、加入購物車等模塊）、前端（包括首頁、分類、購物車、個人中心等模塊）和商戶（包括商品數(shù)據(jù)表、商品管理、輪播圖管理等模塊）三個部分構(gòu)成。系統(tǒng)調(diào)試實驗結(jié)果表明，該系統(tǒng)運行穩(wěn)定可靠，為用戶和商家提供一個便捷易用的微信網(wǎng)上購銷平臺。

關(guān)鍵詞：微信小程序；購物商城；系統(tǒng)設(shè)計；云開發(fā)

中圖分類號：TP311.5? 文獻標(biāo)識碼：A? 文章編號：2096-4706（2023）23-0025-06

Design and Implementation of WeChat Mini Program Shopping System

LONG Fang， WU Yongling

（School of Physics and Electronics， Qiannan Normal University for Nationalities， Duyun? 558000， China）

Abstract： Based on users' WeChat shopping needs， a WeChat developer tool is used to develop front-end pages， and a cloud development platform is used to develop backend components to build a WeChat mini program shopping system. The system consists of three parts： users （including modules such as authorized login， browsing products， and adding to shopping carts）， front-end （including modules such as homepage， classification， shopping cart， and personal center）， and merchants （including modules such as product data table， product management， and rotation chart management）. The system debugging experiment results show that the system runs stably and reliably， providing users and merchants with a convenient and easy-to-use WeChat online shopping and sales platform.

Keywords： WeChat Mini Program; shopping mall; system design; cloud development

0? 引? 言

本文設(shè)計的微信小程序購物系統(tǒng)方便了用戶購物，用戶不用花太多的時間去下載APP，不必占用手機的內(nèi)存，用戶只需掃描二維碼登錄，即可以滿足自己的購物需求，獲得極佳的購物體驗。各微信商家可在后臺對商品、訂單、用戶進行管理，查看新用戶的基本信息。用戶完成訂單交易之后，商戶可在后臺查看訂單的狀態(tài)，對訂單進行整合和發(fā)貨。商戶在企業(yè)后臺進行網(wǎng)頁管理時，能夠完成對各個模塊的編輯、設(shè)計和管理，實現(xiàn)與應(yīng)用軟件的同步。

1? 微信小程序購物系統(tǒng)所需的關(guān)鍵技術(shù)

1.1? 微信開發(fā)者工具

這個項目的開發(fā)工具是一個軟件開發(fā)平臺，可以調(diào)試公眾號，也可以調(diào)試小程序，可以開發(fā)和調(diào)試微信的界面，也可以查看和編輯代碼，同時還可以查看和發(fā)布小程序。在原有版本的基礎(chǔ)上增加了云開發(fā)新手引導(dǎo)，支持JSON文檔編輯時的點擊跳躍，完成WXML文檔的路徑設(shè)置，支持插件的開發(fā)，對框架屏幕的功能進行了優(yōu)化。為廣大開發(fā)者提供了方便快捷的開發(fā)環(huán)境，使其能夠更加專注地開展研究，開發(fā)出更高質(zhì)量的應(yīng)用程序。

1.2? 云開發(fā)平臺

云開發(fā)平臺是阿里云為所有開發(fā)者提供的一個云端研發(fā)工作平臺，它可以實現(xiàn)工作在線化，能夠有效地共享和推廣行業(yè)架構(gòu)經(jīng)驗和服務(wù)，從而極大地提升了開發(fā)者的開發(fā)效率，降低了開發(fā)成本，免去了創(chuàng)建移動應(yīng)用所需的服務(wù)器構(gòu)建和維護，降低了應(yīng)用的開發(fā)難度，還提供有云數(shù)據(jù)庫、云存儲等云功能，不需要安裝任何服務(wù)器，也不需要通過微信進行認證，就可以自由地創(chuàng)建小程序、小游戲、H5、Web、移動APP等應(yīng)用。

2? 系統(tǒng)功能設(shè)計

本文設(shè)計的購物系統(tǒng)主要體現(xiàn)在對前端、商家、用戶三個模塊的功能設(shè)計方面，如圖1所示。

2.1? 微信購物系統(tǒng)前端設(shè)計

系統(tǒng)前端由登錄、首頁、分類、購物車和個人中心等模塊組成。

具體實現(xiàn)：在app.json進行全局配置，即建立所需的頁面，利用tabBar標(biāo)簽創(chuàng)建一個底部索引欄，呈現(xiàn)首頁、分類、購物車、個人中心字樣，部分代碼如下：

{

"pages"：[

"pages/geren/geren"，

"pages/shouye/shouye"，

"pages/address/address"，

"pages/fenlei/fenlei"，

"pages/dizhi/dizhi"，

"pages/jilu/jilu"，

"pages/yaoqing/yaoqing"，

"pages/pingjia/pingjia"，

"pages/dingdan/dingdan"，

"pages/shangpinxiangqingye/shangpinxiangqingye"，

"pages/myOrder/myOrder"，

"pages/shoucang/shoucang"，

"pages/gouwuche/gouwuche"，

"pages/gerenzhongxin/gerenzhongxin"

]，

"tabBar"：{

"list"：[{

"pagePath"："pages/shouye/shouye"，

"text"："首頁"，

"iconPath"："./icon/_home.png"，

"selectedIconPath"："./icon/home.png"

}，

{

"pagePath"："pages/fenlei/fenlei"，

"text"："分類"，

"iconPath"："./icon/_fenlei.png"，

"selectedIconPath"："./icon/fenlei.png"

}，

{

"pagePath"："pages/gouwuche/gouwuche"，

"text"："購物車"，

"iconPath"："./icon/_gouwuche.png"，

"selectedIconPath"："./icon/gouwuche.png"

}，

{

"pagePath"："pages/gerenzhongxin/gerenzhongxin"，

"text"："個人中心"，

"iconPath"："./icon/_my.png"，

"selectedIconPath"："./icon/my.png"

}]

}，

2.1.1? 登錄頁面

設(shè)置微信授權(quán)登錄按鈕，調(diào)用微信接口文檔，獲取用戶的頭像和昵稱進行異常捕獲，若允許登錄則跳轉(zhuǎn)至首頁，且將用戶頭像和昵稱傳遞到個人中心頁面，反之則退出，部分代碼如下：

varapp=getApp（）;

Page（{

loadByWechat（）{

wx.getUserProfile（{

desc：'用戶完善會員資料'，

}）

.then（res=>{

console.log（"用戶允許了微信授權(quán)登錄"，res.userInfo）;

wx.reLaunch（{

url：'../shouye/shouye'，

}）

wx.setStorageSync（'userInfo'，res.userInfo）

}）

.catch（err=>{

console.log（"用戶拒絕了微信授權(quán)登錄"，err）;

}）

}，

}）

2.1.2? 首頁頁面

分別構(gòu)架搜索、輪播圖、福利專場和精選推薦四個部分的盒子及內(nèi)容，設(shè)置盒子的大小，在云開發(fā)平臺中創(chuàng)建輪播圖和商品表，將輪播圖表中的圖片和商品表中的商品信息放入數(shù)組，調(diào)用數(shù)組中的信息，將其嵌入到相應(yīng)的盒子中。在每個商品的左下方增加一個購物車圖標(biāo)，設(shè)置點擊事件，使其跳轉(zhuǎn)至購物車頁面，點擊商品圖片，使其跳轉(zhuǎn)至商品詳情頁。在輪播圖部分設(shè)置滑動事件，實現(xiàn)自動滑動功能。部分代碼如下：

{{item.cpname}}

{{item.price}}￥129

2.1.3? 分類頁面

分別設(shè)計左邊點擊事件和右邊滑動事件，實現(xiàn)點擊左邊數(shù)據(jù)，滑動至右邊相應(yīng)盒子的功能。部分代碼如下：

left_tap：function（e）{

console.log（e.currentTarget.dataset.index）

this.setData（{

select_index：'select_index'+e.currentTarget.dataset.index

}）

console.log（this.data.select_index）

}，

scroll：function（e）{

varh=e.detail.scrollTop

varscroll_height=0

varselect_index;

2.1.4? 購物車頁面

設(shè)置購物車列表，判斷列表中是否有數(shù)據(jù)，總價初始為0，默認為全選狀態(tài)，綁定加減數(shù)量事件、計算總價和選中商品事件。部分代碼如下：

Page（{

data：{

carts：[]，

hasList：false，

totalPrice：0，

selectAllStatus：true，

obj：{

name："hello"

}

}，

*計算總價*/

getTotalPrice（）{

letcarts=this.data.carts;

lettotal=0;

for（leti=0;i

if（carts[i].selected）{

total+=carts[i].num*carts[i].price;

}

}

2.1.5? 個人中心頁面

把從登錄頁面獲取的頭像和昵稱調(diào)用到該頁面，將其放入盒子中，設(shè)置點擊事件，使其進入我的訂單、收貨地址、我的評價等頁面。部分代碼如下：

"userAvatarUrl">

"userNickName">

2.2? 商家功能模塊設(shè)計

商家功能模塊設(shè)計主要包括商品數(shù)據(jù)表、商品管理兩個模塊的設(shè)計。商品數(shù)據(jù)表模塊可用于商家根據(jù)需求添加內(nèi)容類型，如圖2所示；商品管理模塊可用于根據(jù)人們的需求上、下架商品。操作過程如圖3所示。

2.3? 用戶功能模塊設(shè)計

用戶功能模塊設(shè)計主要包括瀏覽商品、商品放入、移除購物車和登錄四大模塊的設(shè)計，用戶可以跟隨導(dǎo)航索引瀏覽各種商品，如其在瀏覽商品的過程中發(fā)現(xiàn)自己感興趣的物品可以按順序添加到購物車中，經(jīng)過進一步的篩選，將不中意的物品從購物車中刪除。用戶購買商品過程如圖4所示。

3? 系統(tǒng)調(diào)試試驗

3.1? 前端功能實現(xiàn)

3.1.1? 首頁頁面

小程序首頁通過onload（）函數(shù)及云數(shù)據(jù)庫API接口獲取商品信息，并將其以搜索、輪播圖、福利專場、精選推薦的形式展現(xiàn)出來。點擊商品右下角的小購物車圖標(biāo)，可以將商品添加至購物車頁面，如圖5所示。

3.1.2? 分類頁面

為了便于用戶瀏覽商品，使用戶可以更加直觀地選擇所需購買的物品，將分類頁面劃分為左右導(dǎo)航欄兩個部分，實現(xiàn)在左邊的導(dǎo)航條上選擇一個項目。點擊左邊的一個選項，就可以獲得這個項目所包含的ID，并將其發(fā)送到右邊的菜單欄中，這樣點擊這個元素就可以移動設(shè)置至右邊的菜單欄，如圖6所示。

3.1.3? 購物車

該頁面顯示商品加入購物車后的信息，可以對商品進行選擇，也能預(yù)覽所選商品的價格，確定購買后可以進行結(jié)算，如圖7所示。用戶可以增加、減少和刪除單個項目，該頁面具備單選、全選和取消功能，能夠根據(jù)所選項目的價值來計算總金額，在購物車為空的情況下，該網(wǎng)頁將成為一個空購物車的布局。

3.1.4? 個人中心

該頁面顯示用戶登錄后的頭像和昵稱信息，還有我的訂單、查看全部訂單。我的訂單包含待付款、待發(fā)貨、待收貨、待評價四個部分，此外還有我的收藏、收貨地址、售后記錄、我的評價、推廣邀請，如圖8所示。

3.2? 商家功能實現(xiàn)

在云開發(fā)內(nèi)容管理平臺中，根據(jù)商家所需展示的信息建立內(nèi)容模型，如圖9所示。添加內(nèi)容類型，建立商品數(shù)據(jù)表，如圖10所示。將商品信息逐一填入商品數(shù)據(jù)表，如圖11所示。商品實時更新至小程序頁面，商家可對商品執(zhí)行添加、刪除、修改、查詢等操作。在云數(shù)據(jù)庫建立輪播圖集合，將輪播圖圖片地址加入集合，在小程序端調(diào)用輪播圖圖片即可更換，如圖12所示。

3.3? 用戶功能實現(xiàn)

用戶通過掃描二維碼或搜索小程序找到小程序，點擊小程序，進入小程序微信授權(quán)頁面，如圖13所示，點擊微信授權(quán)登錄，彈出獲取昵稱、頭像窗口，如圖14所示，獲得登錄權(quán)限后，跳轉(zhuǎn)至首頁，就能在首頁頁面和分類頁面滑動瀏覽商品，找到自己喜歡的商品，點擊商品右下角的購物車圖標(biāo)，即可將選中的商品加入購物車，在購物車頁面可看到加入的商品，并可對其執(zhí)行數(shù)量增減、刪除、全選、單選、取消的操作。

4? 結(jié)? 論

該文設(shè)計的微信小程序購物系統(tǒng)由用戶、前端、商戶三部分構(gòu)成。采用微信開發(fā)者工具和云開發(fā)平臺對前端頁面、商家和用戶功能進行開發(fā)，實現(xiàn)了購物系統(tǒng)的部分基本功能。相比傳統(tǒng)APP，微信平臺擁有巨大的用戶基數(shù)群，且微信小程序的開發(fā)成本較低。商家能夠在后臺對商品數(shù)據(jù)表、商品信息和輪播圖等進行管理，根據(jù)用戶需求上下架商品，發(fā)布福利專場的商品，用戶無須花費額外的時間和流量去下載更新，直接掃碼進入使用，用完退出即可，不占用用戶自有設(shè)備的內(nèi)存，不僅方便了用戶購物，而且還給商家提供了更好的運營平臺。

參考文獻：

[1] 席濤，潘長學(xué).基于情感識別的信息傳播設(shè)計方法 [J].創(chuàng)意與設(shè)計，2021（2）：15-24.

[2] 孫路玲.微信小程序的場景應(yīng)用研究 [D].長沙：湖南師范大學(xué)，2022.

[3] 程子珍.基于微信小程序的網(wǎng)上購物系統(tǒng)的設(shè)計與實現(xiàn) [D].北京：首都經(jīng)濟貿(mào)易大學(xué)，2019.

[4] 杜雨荃，王曉菊，田立勤.基于微信小程序的網(wǎng)上購物系統(tǒng)的設(shè)計與實現(xiàn) [J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2022（4）：60-62.

[5] 王國營，馬芳.基于服裝吊牌信息解讀的微信小程序設(shè)計 [J].天津紡織科技，2021（3）：24-27.

[6] 李哲，周靈.微信小程序的架構(gòu)與開發(fā)淺析 [J]. 福建電腦，2019，35（12）：66-69.

[7] 羅正蓉，范靈.應(yīng)用HTML和CSS制作網(wǎng)頁 [J].科技展望，2016，26（26）：10.

[8] 趙露.基于HTML+CSS+JavaScript實現(xiàn)Web頁中多功能焦點圖輪播效果 [J].九江學(xué)院學(xué)報：自然科學(xué)版，2017，32（4）：84-87.

[9] 郝風(fēng)平.Web前端開發(fā)技術(shù)特征與完善策略探討[J].軟件，2022，43（11）：12-14.

[10] 張穎.網(wǎng)頁中簡易輪播圖案例解析 [J].信息記錄材料，2021，22（9）：231-233.

[11] 劉玉佳.微信“小程序”開發(fā)的系統(tǒng)實現(xiàn)及前景分析 [J].信息通信，2017（1）：260-261.

[12] 隋遠琦，潘靜，那月光，等.基于天氣預(yù)警信息服務(wù)的微信小程序設(shè)計 [J].現(xiàn)代信息科技，2023，7（10）：6-9.

[13] 韋超英.MySQL數(shù)據(jù)庫備份及恢復(fù)方法解析 [J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2019（10）：73-74.

[14] 張楊帆，郝鈺鑫，李隱峰，等.基于圖像識別的失物招領(lǐng)微信小程序設(shè)計 [J].電子科技，2022，35（10）：33-38.

[15] 馬靜.基于微信小程序的購物商城系統(tǒng)的設(shè)計與實現(xiàn) [J].微型電腦應(yīng)用，2021，37（3）：31-34.

作者簡介：龍芳（2000.07—），女，苗族，貴州晴隆縣人，本科在讀，研究方向：軟件編程；通訊作者：吳勇靈（1976.05—），男，苗族，貴州惠水縣人，教授，博士，研究方向：信息技術(shù)與物理教學(xué)融合研究、數(shù)據(jù)挖掘。