基于微信小程序的網上購物系統(tǒng)的設計與實現(xiàn)

◆杜雨荃 王曉菊 田立勤

基于微信小程序的網上購物系統(tǒng)的設計與實現(xiàn)

◆杜雨荃 王曉菊 田立勤

（華北科技學院 計算機學院 北京 101601）

近年來，隨著移動互聯(lián)網的高速發(fā)展與微信小程序的普及，線上購物模式日益流行，逐年創(chuàng)下銷售新高。本文系統(tǒng)主要實現(xiàn)的是用戶足不出戶即可享受線下同樣的優(yōu)質服務，以及更加便捷的用戶購物體驗。界面布局合理，用戶視覺體驗美觀。

微信小程序；網上購物商城；系統(tǒng)設計

本文設計來源于用戶實際生活中所需要的網上購物商城，它集合了服務器、寶塔面板、微信小程序以及shop商城系統(tǒng)后臺于一體，靈感來源于隨著科技的發(fā)展，線下購物由于距離的遠近以及商品種類的限制使得不同地區(qū)的人們無法享受到全世界的商品，所以隨著新媒體、電商行業(yè)的興起，網上購物在人們生活中所占據的比重越來越多，人們開始更加傾向于足不出戶就可以享受到優(yōu)質的服務與滿意的商品，因此本系統(tǒng)應運而生。

1 微信小程序現(xiàn)狀

隨著信息技術的發(fā)展以及用戶消費升級，傳統(tǒng)商超、電子商務在線上推廣和購物體驗等方面遇到了瓶頸[1]。本著“觸手可及，即用即走”的微信小程序非常適合為人們生活中的重要又低頻的需求服務，相對于原生態(tài)的APP更加切合線下快速推廣的需求[1]。本文以傳統(tǒng)線下、網上購物商城的購物方式為出發(fā)點，結合微信小程序技術，通過搭建服務器進行shop商城后臺開發(fā)，開發(fā)一種可以方便商家線下推廣、消費者線上購物的方便快捷的微信網上購物商城小程序。

在信息化社會當中，以Internet為核心的電子商務充分發(fā)揮了自身的商業(yè)價值，促進了社會經濟的發(fā)展[2]。電子商務主要有B2B（Business To Business）、B2C（Business To Customer）、C2C（Customer To Customer）等幾種形式[2]。其中B2C主要是商家與消費者之間以網絡為交易平臺開展商業(yè)往來，商家作為零售商，將商品借助于網絡平臺向消費者直接銷售，而消費者借助于網絡進行商品挑選、購物支付，然后由商家進行物流配送等相關業(yè)務，這一過程較為快捷，是當下流行的網購活動[2]。由此觀之，以PHP技術合理設計網上購物系統(tǒng)，具有至關重要的現(xiàn)實意義[2]。

2 系統(tǒng)性能需求分析

2.1 實用性

基于微信小程序的網上購物系統(tǒng)主要為了方便用戶生活，使用戶足不出戶便可以享受到購物的樂趣。用戶可以不需額外下載其余APP，僅需便捷迅速打開微信小程序即可進行商品選購。通過在首頁選購商品加入購物車，或點擊立即購買即可成功下單，此過程中不需要其他冗余復雜的手續(xù)即可實現(xiàn)。后臺管理員登錄至首頁即可在快捷操作欄找到商品、訂單、會員等進行管理操作，可以完成對訂單發(fā)貨、查看新增會員、對營業(yè)額進行財務報表統(tǒng)計等基礎功能；同時也可以發(fā)布拼團、砍價、廣告文章等使系統(tǒng)更加完善。

2.2 實時性

當用戶在前端微信小程序的網上購物商城進行驗證首次登錄時，驗證碼由服務器發(fā)送到后臺，用戶輸入驗證碼即可成功登錄。當用戶在前端微信小程序的網上購物商城成功下單后，后臺即可實時查看訂單信息，對訂單進行支付、發(fā)貨等操作。當管理員對后臺shop商城系統(tǒng)進行頁面管理時，可以對微信小程序的各個模塊進行編輯設計并管理。當管理員對后臺shop商城系統(tǒng)的商品數(shù)據、基礎數(shù)據等進行管理修改時，商品信息等可以實時同步到微信小程序。

2.3 系統(tǒng)完整性

在登錄頁面，進行管理員登錄后便可以查看整個后臺系統(tǒng)，對shop商城后臺系統(tǒng)進行管理?？梢钥吹絪hop商城系統(tǒng)后臺有八大模塊：首頁、會員管理、商品管理、訂單管理、運營管理、促銷管理、財務管理、控制面板，如圖1所示。微信小程序商城前端有四大主頁面：首頁、分類、購物車、“我的”。其中每個模塊都有對應的性能需求和功能實現(xiàn)。從用戶登錄、商品選購、商品下單、后臺管理員查看、訂單發(fā)貨、完成訂單、財務報表查看等一系列流程體現(xiàn)了本系統(tǒng)的完整性。

圖1 shop商城系統(tǒng)后臺整體功能示意圖

3 系統(tǒng)設計

3.1 關鍵技術實現(xiàn)

本項目采用了ThinkPHP框架，包含了前端、后端、微信端三部分，使用Ajax技術可以使本系統(tǒng)能夠更快地回應用戶的操作。本項目使用MySQL作為后臺數(shù)據庫，按鈕頁面跳轉采用JavaScript技術，前端采用layui框架。其中shop商城系統(tǒng)的財務報表通過導入Echarts實現(xiàn)數(shù)據可視化，ECharts是一款基于JavaScript的數(shù)據可視化圖表庫，可以為用戶提供直觀、生動、可交互的數(shù)據可視化圖表。

報表統(tǒng)計分為財務收款、用戶收藏統(tǒng)計、商品銷量、訂單銷量。財務收款是使用Echarts導入圖形框架并對數(shù)據做出一個分析，從而可以得到一個根據時間為軸的財務統(tǒng)計圖表。財務收款可以選擇粒度對本段時間內的報表進行查看，選擇以天為粒度后，點擊本月即可查看本月的財務報表統(tǒng)計圖和財務報表統(tǒng)計表單，如圖2所示。

圖2 shop商城系統(tǒng)財務報表統(tǒng)計

3.2 shop商城系統(tǒng)功能設計

通過對shop商城系統(tǒng)購物流程分析，可知本項目主要涉及用戶、管理員兩個角色的邏輯操作，最終實現(xiàn)了以下幾個功能：

（1）用戶通過微信小程序端登錄后進行商品選購；

（2）用戶對購物車商品進行結算下單；

（3）用戶可以對心儀商品收藏、領取優(yōu)惠券、查看商品瀏覽足跡、修改個人收貨地址等操作；

（4）管理員通過后臺查看訂單，對訂單進行收款、發(fā)貨等操作；

（5）用戶收到商品后訂單完成；

（6）管理員可以對會員等級、余額、驗證碼等進行管理；

（7）管理員可以對商品添加、上下架、修改、刪除等操作；

（8）管理員可以發(fā)布廣告、文章、拼團促銷活動、管理微信小程序頁面等；

（9）管理員可以對用戶地址進行修改、對財務報表等進行統(tǒng)計分析，并對支付單、財務報表單等進行導入導出操作。

3.3 shop商城系統(tǒng)詳細設計

（1）首頁登錄模塊設計

當管理員在shop商城系統(tǒng)登錄成功后進入后臺管理界面的首頁，可以清晰看到首頁分為六大板塊：快捷操作、待辦事項、訂單統(tǒng)計、會員統(tǒng)計、最近登錄、操作日志。其中快捷操作是管理員根據管理需求所設計的經常查看、使用、維護的功能，有商品、訂單、會員、公告、促銷、配送、支付方式、平臺設置八個快捷操作，如圖3所示。

圖3 shop商城系統(tǒng)首頁

（2）會員管理模塊設計

用戶登錄模塊通過info（）方法可以查看用戶信息，通過changeAvatar（）可以更換頭像，通過addGoodsBrowsing（）方法可以添加商品瀏覽足跡，通過delGoodsBrowsing（）可以刪除商品瀏覽足跡，通過goodsBrowsing（）方法可以取得商品瀏覽足跡，通過goodsCollection（）方法可以添加商品收藏（關注）。通過getShipDetail（）方法可以獲取收貨地址詳情，使用editShip（）方法對收貨地址進行編輯，getUserShip（）獲取用戶收貨地址列表，getAreaList（）獲取省市區(qū)信息。

短信管理就是當用戶首次登錄微信小程序時，微信小程序會向服務器發(fā)送一個驗證碼，此時shop商城后臺可以收到驗證碼，用戶輸入即可成功登錄，如圖4所示。

圖4 shop商城系統(tǒng)短信管理

（3）商品管理模塊設計

商品管理分為七大板塊：商品列表、商品分類、品牌列表、商品類型、商品屬性、參數(shù)列表、商品評價。商品列表可以查看所有商品，對商品進行增加、修改、刪除、查找、上下架、導入導出表單等操作。同時商品庫存不足時可以及時查看庫存報警。

獲取商品列表使用的是getList（）方法，首先判斷商品搜索，接下來獲取商品分類，判斷價格區(qū)間，接下來進行品牌篩選、標簽篩選，通過調用即可實現(xiàn)查詢成功。

在商品模塊使用getDetial（）獲取商品明細，使用getGoodsParams（）方法獲取參數(shù)接口，使用getProductInfo（）獲取貨品相關信息，使用appGetDetail（）方法對app版獲取商品明細接口，因為多規(guī)格的傳值問題，導致java解析不了多規(guī)格數(shù)據，在此做了轉化，使用getSkuDetial（）方法是指根據sku獲取相關價格，庫存等信息。通過getGoodsComment（）方法獲取商品評價，通過getGoodsCatHotGoods（）方法獲取某個分類的熱賣商品。

通過getPickGoods（）獲取推薦商品，該方法的使用首先獲取用戶ID，接下來獲取瀏覽記錄，通過過濾條件的篩選，依次判斷商品搜索、商品分類、價格區(qū)間等信息。

shop商城系統(tǒng)商品列表如圖5所示。

（4）訂單管理模塊設計

表單管理通過調用API接口使用getFormDetial（）方法獲取活動商品詳情，通過對用戶ID、會員成功登錄后所傳token值及各項數(shù)據檢查判斷后，即可獲取成功。通過使用addSubmit（）方法，經過檢查過期時間、判斷提交次數(shù)、獲取地區(qū)數(shù)據、處理圖片信息、判斷支付類型等函數(shù)最終實現(xiàn)提交表單功能。使用getUserFormSubmit（）方法獲取用戶提交表單，使用getUserFormSubmitDetial（）方法獲取用戶提交訂單詳情。

購物車通過調用API接口使用add（）方法對商品進行累加加入購物車，通過使用del（）方法將商品移除購物車。使用getList（）方法獲取購物車列表，使用setNums（）方法設置購物車數(shù)量接口，使用batchSetCart（）方法將商品列表頁批量快速下單加入購物車，其中getListSelectAll（）方法是獲取全部購物車列表。

商品分類通過調用API接口使用getTopCat（）方法獲取商品頂級分類，通過使用getChildCat（）方法獲取頂級分類下的子分類。使用getAllCat（）方法獲取全部分類樹狀形式，使用getName（）方法獲取分類名稱。訂單管理包括五大板塊，有訂單列表、發(fā)貨單列表、提貨單列表、售后單列表以及退貨單列表。訂單列表可以查看用戶通過微信小程序下單的訂單，并對各項訂單進行發(fā)貨、收款、編輯、查看等操作。shop商城系統(tǒng)訂單列表如圖6所示。

圖5 shop商城系統(tǒng)商品列表

圖6 shop商城系統(tǒng)訂單列表

4 結論

本系統(tǒng)解決了基于微信小程序的網上購物系統(tǒng)的設計與實現(xiàn)，部署在阿里云服務器，通過設計前端微信小程序界面和后端管理員界面最終實現(xiàn)了具有實用性的基于微信小程序的網上購物系統(tǒng)，實現(xiàn)足不出戶、更加便捷的用戶購物體驗。

[1]程子珍. 基于微信小程序的網上購物系統(tǒng)的設計與實現(xiàn)[D].首都經濟貿易大學，2018.

[2]李淑娣.基于PHP技術的網上購物系統(tǒng)的設計與實現(xiàn)[J].科學咨詢（科技·管理），2019（03）：50.

[3]陳楠，王艷，朱洪根.基于行為分析的用戶身份信息安全驗證研究[J].華北科技學院學報，2020，17（04）：49-54+60.

[4]劉儀，張雪冰.大數(shù)據背景下微信小程序的應用與分析[J].無線互聯(lián)科技，2021，18（07）：45-46.

[5]申晨彥.基于微信小程序的網上購物系統(tǒng)設計模式[J].信息與電腦（理論版），2019，31（19）：90-92.

[6]齊艷麗. 基于微信公眾平臺的商城系統(tǒng)的設計與實現(xiàn)[D].西安電子科技大學，2017.

[7]張曉燕.微信“小程序”開發(fā)的系統(tǒng)實現(xiàn)及前景[J].電子技術與軟件工程，2018（12）：49-50.

[8]謝甜甜，謝軍.微信小程序在電子商務中的應用分析[J].信息與電腦（理論版），2018（06）：98-100.

[9]沈蘊梅.基于PHP+MySQL的網上購物系統(tǒng)的設計與開發(fā)[J].計算機時代，2018（12）：22-24.