微信小程序購物系統的設計與實現

2024-01-23 15:19:30龍芳吳勇靈

現代信息科技 2023年23期

龍芳吳勇靈

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

關鍵詞：微信小程序；購物商城；系統設計；云開發

中圖分類號：TP311.5? 文獻標識碼：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? 引? 言

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

1? 微信小程序購物系統所需的關鍵技術

1.1? 微信開發者工具

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

1.2? 云開發平臺

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

2? 系統功能設計

本文設計的購物系統主要體現在對前端、商家、用戶三個模塊的功能設計方面，如圖1所示。

2.1? 微信購物系統前端設計

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

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

{

"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? 登錄頁面

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

varapp=getApp（）;

Page（{

loadByWechat（）{

wx.getUserProfile（{

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

}）

.then（res=>{

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

wx.reLaunch（{

url：'../shouye/shouye'，

}）

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

}）

.catch（err=>{

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

}）

}，

}）

2.1.2? 首頁頁面

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

{{item.price}}￥129

2.1.3? 分類頁面

分別設計左邊點擊事件和右邊滑動事件，實現點擊左邊數據，滑動至右邊相應盒子的功能。部分代碼如下：

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? 購物車頁面

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

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? 個人中心頁面

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

"userAvatarUrl">

"userNickName">

2.2? 商家功能模塊設計

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

2.3? 用戶功能模塊設計

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

3? 系統調試試驗

3.1? 前端功能實現

3.1.1? 首頁頁面

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

3.1.2? 分類頁面

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

3.1.3? 購物車

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

3.1.4? 個人中心

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

3.2? 商家功能實現

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

3.3? 用戶功能實現

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

4? 結? 論

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

參考文獻：

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

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

[3] 程子珍.基于微信小程序的網上購物系統的設計與實現 [D].北京：首都經濟貿易大學，2019.

[4] 杜雨荃，王曉菊，田立勤.基于微信小程序的網上購物系統的設計與實現 [J].網絡安全技術與應用，2022（4）：60-62.

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

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

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

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

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

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

[11] 劉玉佳.微信“小程序”開發的系統實現及前景分析 [J].信息通信，2017（1）：260-261.