基于微信小程序的“助農(nóng)”銷(xiāo)售系統(tǒng)的設(shè)計(jì)與開(kāi)發(fā)

楊米娜

（山西工程科技職業(yè)大學(xué) 山西省晉中市 030600）

坐標(biāo)山西呂梁的“助農(nóng)”農(nóng)產(chǎn)品銷(xiāo)售公司，主要銷(xiāo)售呂梁本地特產(chǎn)，諸如藜麥、小米、核桃、紅棗等。山西呂梁是革命老區(qū)，也是經(jīng)濟(jì)發(fā)展滯后的地區(qū)，農(nóng)產(chǎn)品不僅產(chǎn)量低而且滯銷(xiāo)嚴(yán)重。為了幫助山西農(nóng)業(yè)發(fā)展，把農(nóng)業(yè)做“特”做“優(yōu)”，將山西呂梁的農(nóng)產(chǎn)品推向全國(guó)。 “助農(nóng)”農(nóng)產(chǎn)品銷(xiāo)售公司，設(shè)計(jì)與制作了“助農(nóng)”微信小程序，將企業(yè)農(nóng)產(chǎn)品銷(xiāo)售和移動(dòng)端互聯(lián)網(wǎng)有機(jī)的結(jié)合，讓用戶能更方便的在移動(dòng)設(shè)備中使用小程序下單，直接使用微信支付完成交易。

1 設(shè)計(jì)優(yōu)勢(shì)

微信小程序平臺(tái)，憑借的是微信10 億用戶和簡(jiǎn)單的操作，從而帶動(dòng)農(nóng)產(chǎn)品的銷(xiāo)售。使用微信小程序，有以下兩大優(yōu)勢(shì)：

（1）從用戶的角度來(lái)說(shuō)，微信小程序只需要使用時(shí)打開(kāi)，用完之后隨手關(guān)閉，不需要下載安裝。而且微信小程序也能免去注冊(cè)、登錄這些繁瑣的操作，使用時(shí)只需要對(duì)小程序授權(quán)即可，而且使用效果和APP 相同。

（2）從微信小程序開(kāi)發(fā)的角度來(lái)說(shuō)，小程序的開(kāi)發(fā)、維護(hù)以及推廣的成本都比較低[3]。在開(kāi)發(fā)過(guò)程中，小程序的兼容性強(qiáng)，不需要考慮安卓、蘋(píng)果等系統(tǒng)因素，也不需要考慮屏幕分辨率、機(jī)型，大大的降低了系統(tǒng)的開(kāi)發(fā)難度。

2 系統(tǒng)分析

在“助農(nóng)”小程序中，為了減少中間商環(huán)節(jié)，及時(shí)將滯銷(xiāo)的農(nóng)產(chǎn)品銷(xiāo)售出去，在微信上，搭建了一個(gè)和網(wǎng)上商城一樣的銷(xiāo)售系統(tǒng)，讓用戶和商家直接進(jìn)行商品買(mǎi)賣(mài)，本系統(tǒng)主要分為前臺(tái)銷(xiāo)售系統(tǒng)和后臺(tái)管理系統(tǒng)。

2.1 前臺(tái)銷(xiāo)售系統(tǒng)

前臺(tái)銷(xiāo)售系統(tǒng)主要為用戶提供管理功能，用戶在第一次使用需要對(duì)小程序進(jìn)行授權(quán)，授權(quán)登錄后開(kāi)放全部用戶功能。用戶需要在手機(jī)微信端進(jìn)行農(nóng)產(chǎn)品選擇，擁有購(gòu)物車(chē)管理、訂單信息的查詢權(quán)限。登錄后默認(rèn)為用戶頁(yè)面，可以完成下單、訂單查詢等操作。

2.2 后臺(tái)管理系統(tǒng)

后臺(tái)管理系統(tǒng)主要為商家提供管理權(quán)限，商家在系統(tǒng)中主要是維護(hù)商品數(shù)據(jù)、接單。商家擁有對(duì)商品的增加、刪除、修改、查詢等權(quán)限，以及查詢合作快遞公司配送員信息的權(quán)限[4]。

通過(guò)系統(tǒng)分析，基于微信小程序的“助農(nóng)”銷(xiāo)售系統(tǒng)設(shè)置前臺(tái)和后臺(tái)兩種角色，第一種角色具有用戶信息管理、購(gòu)物車(chē)商品添加刪除、訂單信息管理等功能，第二種角色具有商品分類(lèi)管理、商品信息管理、訂單管理等功能。系統(tǒng)總體功能模塊設(shè)計(jì)如圖1所示。

圖1：系統(tǒng)功能模塊圖

3 微信小程序設(shè)計(jì)與制作

3.1 前端開(kāi)發(fā)

微信小程序開(kāi)發(fā)之前需要先注冊(cè)小程序賬號(hào)。注冊(cè)后，登錄小程序后臺(tái)，選擇“開(kāi)發(fā)”菜單中的“開(kāi)發(fā)設(shè)置”，查看獲取的AppID[1]。這里的AppID 和身份證一樣，每一個(gè)小程序唯一擁有，是微信平臺(tái)允許小程序開(kāi)發(fā)的授權(quán)。注冊(cè)之后，可以對(duì)小程序的基本信息進(jìn)行填充，比如微信小程序標(biāo)志、名稱及服務(wù)范圍等。

使用授權(quán)的AppID 打開(kāi)“微信開(kāi)發(fā)者工具”，創(chuàng)建“項(xiàng)目”，編寫(xiě)代碼制作微信小程序，開(kāi)發(fā)期間可以利用“調(diào)試”模擬小程序在客戶端的效果。完成小程序開(kāi)發(fā)后，提交代碼審核，審核通過(guò)即可以在微信平臺(tái)上發(fā)布小程序。

3.2 界面設(shè)計(jì)

要想取得更好的銷(xiāo)售和營(yíng)銷(xiāo)效果，小程序用戶界面設(shè)計(jì)就非常重要。布局合理、內(nèi)容清晰、操作便捷的UI 設(shè)計(jì)才能吸引更多的用戶，小程序才能被廣泛應(yīng)用。

微信小程序框架中提供了一系列的UI 組件，構(gòu)成了視圖層（View）的組成單元[2]。視圖層位于前臺(tái)負(fù)責(zé)與用戶的視覺(jué)交互，由微信提供的WXML 和WXSS 語(yǔ)言編寫(xiě)完成界面布局設(shè)計(jì)和數(shù)據(jù)渲染，構(gòu)造良好的用戶體驗(yàn)。

3.3 后臺(tái)開(kāi)發(fā)

在系統(tǒng)中使用Linux 系統(tǒng)作為服務(wù)器系統(tǒng)，由Naginx 加上Tomcat 搭建的集群作為應(yīng)用服務(wù)器，并且使用MySQL 來(lái)作為后臺(tái)的數(shù)據(jù)庫(kù)。后臺(tái)開(kāi)發(fā)使用了Java 高級(jí)程序設(shè)計(jì)語(yǔ)言，主要開(kāi)發(fā)框架使用的是SpringBoot，集成開(kāi)發(fā)環(huán)境（IDE）采用的是JetBrains軟件公司的IntelliJ IDEA。

3.4 平臺(tái)運(yùn)行效果

在平臺(tái)開(kāi)發(fā)完成后反復(fù)測(cè)試，最終此平臺(tái)能夠很好的完成預(yù)期設(shè)計(jì)目標(biāo)。試用時(shí)平臺(tái)運(yùn)行流暢穩(wěn)定，各項(xiàng)功能均能正常、不卡頓的運(yùn)行。

3.4.1 “助農(nóng)”微信小程序logo 標(biāo)志

將“農(nóng)”漢字與互聯(lián)網(wǎng)用語(yǔ)“@”結(jié)合到一起，使用了綠色為標(biāo)準(zhǔn)色，設(shè)計(jì)制作了“助農(nóng)”小程序的logo，方便用戶查找和記憶，“助農(nóng)”微信小程序logo 標(biāo)志見(jiàn)圖2。

圖2：“助農(nóng)”微信小程序logo 標(biāo)志

3.4.2 小程序運(yùn)行主頁(yè)面

當(dāng)用戶進(jìn)入小程序并且獲得微信授權(quán)之后，將會(huì)跳轉(zhuǎn)至首頁(yè)。首頁(yè)還沒(méi)有加載出來(lái)時(shí)設(shè)計(jì)制作的閃屏頁(yè)，將“助農(nóng)”logo 及廣告語(yǔ)添加進(jìn)去。

當(dāng)首頁(yè)打開(kāi)時(shí)，用戶可以選擇首頁(yè)中推薦的農(nóng)產(chǎn)品，或者搜索想要購(gòu)買(mǎi)的農(nóng)產(chǎn)品；還可以進(jìn)入分類(lèi)頁(yè)面，從不同的分類(lèi)中選擇所需農(nóng)產(chǎn)品，加入購(gòu)物車(chē)下單購(gòu)買(mǎi)?！爸r(nóng)”微信小程序首頁(yè)及分類(lèi)頁(yè)效果如圖3所示。

圖3：微信小程序“首頁(yè)”及“分類(lèi)”頁(yè)面

在這些主頁(yè)面中，重點(diǎn)突出、減少了無(wú)關(guān)的設(shè)計(jì)元素對(duì)用戶目標(biāo)的干擾，流程明確、導(dǎo)航清晰、各頁(yè)面之間盡量使用一致的控件和交互方式，讓用戶有良好的用戶體驗(yàn)。

3.4.3 后臺(tái)管理系統(tǒng)運(yùn)行效果

在后臺(tái)管理系統(tǒng)使用了“助農(nóng)”微信小程序的綠色作為主色調(diào)。商家具有后臺(tái)系統(tǒng)的管理權(quán)限，可以在該平臺(tái)對(duì)商品、訂單、用戶等進(jìn)行管理。如圖4所示。

圖4：后臺(tái)管理平臺(tái)

4 結(jié)論

本系統(tǒng)以農(nóng)產(chǎn)品銷(xiāo)售為核心， 采用WXML、WXSS、SpringBoot 及MySQL 數(shù)據(jù)庫(kù)設(shè)計(jì)開(kāi)發(fā)了“助農(nóng)”微信小程序。設(shè)計(jì)制作的“助農(nóng)”微信小程序具有以下特點(diǎn)：

4.1 開(kāi)發(fā)難度低

小程序在制作上使用了比較方便、容易操作的開(kāi)發(fā)技術(shù)。這些技術(shù)相對(duì)來(lái)說(shuō)比較成熟，這就使得整個(gè)系統(tǒng)實(shí)現(xiàn)的難度降低。

4.2 操作簡(jiǎn)單

微信小程序不需要像APP 一樣下載和安裝，通過(guò)關(guān)鍵字搜索小程序或掃描二維碼即可直接使用，減少了手機(jī)內(nèi)存的占用。

4.3 運(yùn)營(yíng)成本低

對(duì)于企業(yè)來(lái)說(shuō)，小程序的開(kāi)發(fā)、運(yùn)營(yíng)維護(hù)及推廣成本比開(kāi)發(fā)一款A(yù)PP 成本要低得多。同時(shí)為企業(yè)省掉一大筆平臺(tái)抽點(diǎn)費(fèi)用，還能實(shí)現(xiàn)線上線下相融合，完成網(wǎng)絡(luò)轉(zhuǎn)型。

但是系統(tǒng)在安全性、內(nèi)容涵蓋面、用戶交互性等方面還需要進(jìn)一步完善和優(yōu)化，在后期還可以使用公眾號(hào)+小程序的方法，打造微信生態(tài)圈，從而使其功能更加豐富全面。