優(yōu)購微信小程序設(shè)計(jì)與實(shí)現(xiàn)

楊昭兵　楊培培

摘 要：本系統(tǒng)經(jīng)過系統(tǒng)架構(gòu)設(shè)計(jì)、系統(tǒng)需求分析、系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)，完成本系統(tǒng)開發(fā)，可以完成通過微信小程序?qū)崿F(xiàn)購物。

關(guān)鍵詞：eclipse；JDK2.0；mysql；設(shè)計(jì)；實(shí)現(xiàn)

一、開發(fā)工具和運(yùn)行環(huán)境

開發(fā)工具：（一）微信開發(fā)者工具：eclipse；（二）瀏覽器：QQ瀏覽器 （三）操作系統(tǒng)：Windows 12；（四）運(yùn)行環(huán)境：jdk2.0；（五） 數(shù)據(jù)庫：mysql。

二、系統(tǒng)架構(gòu)設(shè)計(jì)

后端主要使用Spring Boot框架。Spring Boot結(jié)構(gòu)具有封裝Servlet、提高開發(fā)效率、集成Servlet容器、配置簡(jiǎn)單、應(yīng)用靈活等優(yōu)點(diǎn)。此外還使用了MyBatis，它主要封裝JDBC，并提供靈活的SQL配置文件。我后端管理接口采用Bootstrap框架。Bootstrap的扁平設(shè)計(jì)使界面整體美觀優(yōu)雅。使用Vue.js作為JavaScript框架，它可以將數(shù)據(jù)鏈接到DOM，使其更易于操作。數(shù)據(jù)庫使用MySQL，因?yàn)樗w積小，適合本項(xiàng)目的開發(fā)。

三、系統(tǒng)需求分析

（一）用戶端

1.注冊(cè)/登錄：用戶首次進(jìn)入需先注冊(cè)，給予小程序個(gè)人信息和地址授權(quán)，可讓用戶擁有更好的購物體驗(yàn)。

2.首頁：可對(duì)想購買的商品進(jìn)行搜索，廣告活動(dòng)圖，商品類型，正在銷售產(chǎn)品，點(diǎn)擊查看詳情，可對(duì)商品下單，或加入購物車內(nèi)也可收藏商品。

3.商品分類：對(duì)于不同的產(chǎn)品類型，分類展示，客戶可根據(jù)傾向的類型進(jìn)行瀏覽，點(diǎn)擊想要的商品，可加入購物車或直接購買。

4.購物車：客戶可對(duì)其加入的商品，進(jìn)行增加或者減少，也可刪除，如果滿意商品可直接購買。

5.我的：在修改資料中可修改個(gè)人基本信息，我的訂單里可以查詢顧客的購買的商品狀態(tài)，全部訂單可查詢應(yīng)該購買的商品信息，在我的收藏里可對(duì)商品進(jìn)行刪除或購買，用戶可增加修改地址信息。

（二）后臺(tái)管理端

1.統(tǒng)計(jì)分析：對(duì)客戶，產(chǎn)品，購買數(shù)量；近7日銷售數(shù)量分析。

2.用戶管理：對(duì)登錄注冊(cè)的用戶信息，及查詢或刪除。

3.廣告管理：根據(jù)不同活動(dòng)對(duì)廣告圖進(jìn)行增加刪除更改處理。

4.分類管理：管理員根據(jù)實(shí)際情況適當(dāng)增加刪出更改商品分類類型。

5.商品管理：根據(jù)季節(jié)時(shí)間和商品庫存對(duì)商品進(jìn)行增加刪改以及上架或下架處理。

6.訂單管理：根據(jù)客戶下單信息，對(duì)訂單進(jìn)行及時(shí)的處理。

7.優(yōu)惠劵管理：根據(jù)節(jié)假日或商品活動(dòng)進(jìn)行增加或刪除優(yōu)惠劵，或修改優(yōu)惠力度。

8.管理員管理：后臺(tái)管理員增刪改查。

系統(tǒng)對(duì)數(shù)據(jù)的安全性、完整性要求表現(xiàn)在：用戶信息保密，只有管理員可見 （可査），但不能任意修改。確保用戶信息安全。以下是系統(tǒng)性能需求：

（1）準(zhǔn)確性和可靠性高。

（2）界面友好，功能齊全，且可以方便使用。

（三）技術(shù)的可行性

實(shí)現(xiàn)配送小程序的開發(fā)用到的三種技術(shù)：Java、MySQL和微信開發(fā)者工具。Java一種面向?qū)ο蟮木幊陶Z言，有用法簡(jiǎn)單，容易學(xué)習(xí)、操作靈活，方便等益處；MySQL一種安全牢靠的數(shù)據(jù)庫系統(tǒng)，并且支持面向?qū)ο笤O(shè)計(jì)，易于使用和維護(hù)；小程序采用原生組件進(jìn)行開發(fā)，而小程序官方網(wǎng)站提供了每個(gè)組件的用例，學(xué)習(xí)成本也較低。通過學(xué)習(xí)和掌握J(rèn)ava、MySQL和小程序的相關(guān)知識(shí)，開發(fā)生鮮配送小程序總體難度并不高，技術(shù)上可行。

四、設(shè)計(jì)與實(shí)現(xiàn)

（一）系統(tǒng)功能結(jié)構(gòu)

本系統(tǒng)主要實(shí)現(xiàn)兩大模塊：客戶前端和管理員后端管理。其中微信小程序前端就有商品首頁、商品分類、購物車、個(gè)人中心、商品詳情、我的訂單等等。后端管理包括團(tuán)長(zhǎng)管理、分類管理、廣告管理、訂單管理、優(yōu)惠券管理等，具體功能結(jié)構(gòu)如圖1所示：

（二）系統(tǒng)業(yè)務(wù)流程圖

本系統(tǒng)簡(jiǎn)易流程圖如例圖2。

（三）程序數(shù)據(jù)庫設(shè)計(jì)

（四）系統(tǒng)實(shí)現(xiàn)

1. 商品詳情

客戶在對(duì)他想購買或知道的商品點(diǎn)擊后，轉(zhuǎn)向產(chǎn)品的細(xì)節(jié)，展示商品的圖片，產(chǎn)品名稱和產(chǎn)品價(jià)格，以及產(chǎn)品介紹等，用戶可以點(diǎn)擊商品立刻購買，也可點(diǎn)擊加入購物車.

{{cartnum}}

購物車

加入購物車

立即購買

2.提交訂單

客戶選擇想要的商品進(jìn)行購買，提交訂單顯示購買的商品，以及該訂單的價(jià)格，客戶能夠選擇商家配送或者自提，選擇商家配送，提交訂單時(shí)需選擇客戶的收貨地址，然后再點(diǎn)擊提交并付款，就可購買該商品。

//用函數(shù)setpice方法設(shè)置金額，獲取原始總價(jià)，優(yōu)惠金額，優(yōu)惠后金額，用if判斷有無優(yōu)惠劵，如果有的話，用$th.setData獲取用優(yōu)惠劵以后的優(yōu)惠金額！

3.購物車

購物車內(nèi)顯示產(chǎn)品的圖片，名稱，價(jià)格，數(shù)量，每個(gè)商品有個(gè)單選按鈕，也可點(diǎn)擊全選按鈕，更能方便顧客選擇想要的產(chǎn)品，點(diǎn)擊去支付會(huì)轉(zhuǎn)到提交訂單頁面。

4.登錄/注冊(cè)

想要購買商品并查看其個(gè)人資料的用戶必須首先注冊(cè)或登錄，并且需要您的許可才能按下它們。提示是否允許給予和人信息位置授權(quán)，點(diǎn)擊同意則給予授權(quán)，就可成功登陸。

重要代碼：

wx.showModal（{

title： “請(qǐng)求授權(quán)當(dāng)前位置”

content： '需要獲取您的地理位置 請(qǐng)確認(rèn)授權(quán)'，

success： function （res） {

if （res.cancel） {

wx.showToast（{

title： '拒絕授權(quán)'

icon： 'none'，

duration： 1000

}）

} else if （res.confirm） {

wx.openSetting（{

success： function （dataAu） {

if （dataAu.authSetting["scope.userLocation"] == true） {

wx.showToast（{

title： '授權(quán)成功'，

icon： 'success'，

duration： 1000

}）

//wx.showModal自定義展示地理位置信息，用wx.showToast方法，彈出彈框拒絕授權(quán)或者授權(quán)成功

五、后臺(tái)管理頁面

后臺(tái)管理主要實(shí)現(xiàn)了商品管理、分類管理、訂單管理，廣告管理，優(yōu)惠劵管理，團(tuán)長(zhǎng)管理等。

六、小結(jié)

本文闡述了優(yōu)購微信小程序系統(tǒng)的需求分享、技術(shù)背景、項(xiàng)目設(shè)計(jì)、項(xiàng)目實(shí)現(xiàn)，以及到最終實(shí)現(xiàn)功能，為行業(yè)需求成功提供了解決方案。

參考文獻(xiàn)：

[1]王宇倫_基于微信小程序的二手交易商城系 2021

[2]基于JSP的戶外運(yùn)動(dòng)產(chǎn)品網(wǎng)上購物系統(tǒng) 王旭輝2022

[3]許佳豪-基于微信小程序的校園”咸魚“交易 平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)2019

[4]閆爍. 基于微信小程序的商品展示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].大連海事大學(xué)，2019.