基于微信小程序的購(gòu)物商城系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

馬靜

(陜西國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)與軟件學(xué)院， 陜西 西安 710300)

0 引言

微信小程序有別于傳統(tǒng)的手機(jī)APP，它依托微信平臺(tái)不需要下載安裝，只需要掃描小程序二維碼或者在微信平臺(tái)上直接搜索，找到后就可以打開使用。微信小程序可以做到“觸手可及”“用完即走”，人們?cè)谑褂脮r(shí)不需要擔(dān)心安裝太多手機(jī)應(yīng)用而帶來(lái)的存儲(chǔ)容量問題，因此微信小程序可以無(wú)處不在，隨時(shí)可用[1]。在如今智能手機(jī)、電子商務(wù)和第三方支付工具普及的今天，利用微信小程序購(gòu)物成為了一種更為方便、快捷的途徑，它能夠給用戶帶來(lái)低負(fù)載，即用即走的新型購(gòu)物體驗(yàn)。微信小程序?qū)儆谳p量級(jí)程序平臺(tái)，在系統(tǒng)的開發(fā)和維護(hù)方面可以在很大程度上節(jié)約商品銷售經(jīng)營(yíng)者的運(yùn)營(yíng)成本，正因?yàn)槿绱私o經(jīng)營(yíng)者帶來(lái)了巨大商機(jī)。本研究設(shè)計(jì)和開發(fā)了一套用于智能電子產(chǎn)品購(gòu)物的微信小程序應(yīng)用系統(tǒng)，介紹了微信小程序應(yīng)用設(shè)計(jì)和開發(fā)的核心技術(shù)，希望能對(duì)讀者有所幫助[2]。

1 系統(tǒng)分析

1.1 需求分析

需求分析是系統(tǒng)設(shè)計(jì)和開發(fā)關(guān)鍵的第一步，整個(gè)系統(tǒng)的開發(fā)過程需要以需求分析的結(jié)果為基礎(chǔ)。筆者經(jīng)過多方調(diào)查研究后發(fā)現(xiàn)，智能電子產(chǎn)品購(gòu)物平臺(tái)需要滿足兩類人群的使用需求，包括客戶和商城經(jīng)營(yíng)者?？蛻魧?duì)商城的需求主要有，能夠便捷清晰的查看商品詳細(xì)信息、了解商品性能及購(gòu)買者的使用感受；能夠方便完成商品購(gòu)買、物流信息查看、退換貨等操作；能及時(shí)獲得商城優(yōu)惠活動(dòng)信息，享受會(huì)員禮品劵、積分等福利。商城經(jīng)營(yíng)者對(duì)系統(tǒng)的需求是高效地完成商城的日常管理，包括發(fā)布和管理商品信息、優(yōu)惠活動(dòng)信息，批量處理商品訂單業(yè)務(wù)，用戶管理和會(huì)員管理等。

1.2 系統(tǒng)總體架構(gòu)

本系統(tǒng)從總體架構(gòu)角度主要分為微信小程序客戶前端和Web服務(wù)器后端兩大部分，客戶前端使用微信小程序開發(fā)實(shí)現(xiàn)，核心功能是提供給客戶進(jìn)行商品的選購(gòu)，Web服務(wù)器后端通過Apache搭建，使用PHP語(yǔ)言和MySQL數(shù)據(jù)庫(kù)開發(fā)購(gòu)物商城管理系統(tǒng)，方便經(jīng)營(yíng)者完成商品銷售等相關(guān)管理操作，同時(shí)開發(fā)API和接口文件，能夠使微信小程序前端和服務(wù)器后端進(jìn)行數(shù)據(jù)交互和通信[3]。

微信小程序客戶前端使用MINA框架，MINA分為三大部分：視圖層、邏輯層和系統(tǒng)層。視圖層是所有.wxml文件與.wxss文件的集合，這兩種文件分別用來(lái)表示頁(yè)面結(jié)構(gòu)和頁(yè)面樣式。視圖層可以接收到邏輯層處理后的數(shù)據(jù)并且完成渲染后展現(xiàn)出來(lái)，具體數(shù)據(jù)展現(xiàn)是通過視圖層基本單元“組件”來(lái)進(jìn)行的；邏輯層是所有.js文件的集合，由JavaScript編寫，可以完成微信小程序的邏輯處理，并將邏輯處理完成的數(shù)據(jù)交給視圖層渲染，同時(shí)會(huì)響應(yīng)視圖層的事件處理，并將處理結(jié)果返回；系統(tǒng)層包括頁(yè)面臨時(shí)數(shù)據(jù)或緩存、本地存儲(chǔ)、網(wǎng)絡(luò)存儲(chǔ)與調(diào)用，頁(yè)面臨時(shí)數(shù)據(jù)或緩存可以借助setData函數(shù)發(fā)送數(shù)據(jù)，本地存儲(chǔ)則使用API獲取、設(shè)置和清理本地?cái)?shù)據(jù)，網(wǎng)絡(luò)存儲(chǔ)與調(diào)用也需要相應(yīng)的微信API來(lái)實(shí)現(xiàn)，如wx.uploadFile上傳文件和wx.downloadFile下載文件[4]。基于微信小程序的購(gòu)物商城系統(tǒng)總體架構(gòu)設(shè)計(jì),如圖1所示。

圖1 系統(tǒng)總體架構(gòu)設(shè)計(jì)

1.3 系統(tǒng)功能模塊

購(gòu)物商城微信小程序有五大模塊構(gòu)成，分別是首頁(yè)、分類、發(fā)現(xiàn)、購(gòu)物車、我的。在首頁(yè)模塊中可以實(shí)現(xiàn)搜索商品、活動(dòng)入口、熱門類別瀏覽、禮券領(lǐng)取、商品推薦瀏覽等功能，分類模塊主要是對(duì)商城出售的所有商品進(jìn)行分類展示，使顧客可以快速瀏覽同一類商品的信息，分類模塊又細(xì)分為新品、手機(jī)、智能家居、智能穿戴、電腦辦公等類別。發(fā)現(xiàn)模塊主要發(fā)布商城的優(yōu)惠活動(dòng)，點(diǎn)擊鏈接圖片即可查看活動(dòng)細(xì)則、參與活動(dòng)等[5]。購(gòu)物車模塊中主要包括已經(jīng)添加的購(gòu)物商品列表，并且可以顯示價(jià)格，已經(jīng)享受的優(yōu)惠等信息，同時(shí)可以完成結(jié)算、付款等功能。我的模塊主要包括個(gè)人賬號(hào)管理、我的訂單詳情、會(huì)員中心、優(yōu)惠券查看和在線客服等功能。基于微信小程序的購(gòu)物商城系統(tǒng)功能模塊設(shè)計(jì)[6]，如圖2所示。

圖2 系統(tǒng)功能模塊設(shè)計(jì)

1.4 數(shù)據(jù)庫(kù)設(shè)計(jì)

小程序系統(tǒng)的所有數(shù)據(jù)信息需要保存在后臺(tái)數(shù)據(jù)庫(kù)中，對(duì)系統(tǒng)的使用起到數(shù)據(jù)支撐作用尤為重要。本系統(tǒng)的數(shù)據(jù)庫(kù)實(shí)現(xiàn)采用關(guān)系型數(shù)據(jù)庫(kù)軟件MySQL，通過E-R建模設(shè)計(jì)后，創(chuàng)建購(gòu)物商城數(shù)據(jù)庫(kù)(Shopping)，該數(shù)據(jù)庫(kù)滿足三級(jí)范式(3NF)要求，數(shù)據(jù)庫(kù)包含的表有：Goods(商品)、Admin(管理員)、Order(訂單)、Custom(客戶)、Activity(銷售活動(dòng))等12張表，現(xiàn)以Goods表為例創(chuàng)建表的結(jié)構(gòu)[7]，如表1所示。

表1 Goods表結(jié)構(gòu)

創(chuàng)建Goods表的SQL語(yǔ)句如下。

DROP TABLE IF EXISTS 'Goods';

Create table 'Goods' (

'goodsNo' Int not null auto_increment constraint pk_Goods primary key,

'goodsName' nvarchar(50) not null,

'orderNo' Int constraint fk_Goods_Order foreign key(orderNo) references Order (orderNo),

'goodsClass' nvarchar(30) not null,

'goodsPicture' nvarchar(50) not null,

'goodsSellPoint' nvarchar(50) not null,

'price' real not null,

'quantity' Int not null

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2 系統(tǒng)前端設(shè)計(jì)與實(shí)現(xiàn)

本系統(tǒng)的前端開發(fā)采用微信小程序MINA框架。該框架封裝了微信客戶端提供的基礎(chǔ)功能，包括文件系統(tǒng)、網(wǎng)絡(luò)通信、任務(wù)管理等，開發(fā)者可以使用API快速完成應(yīng)用開發(fā)。系統(tǒng)前端所使用的技術(shù)主要有：JSON、WXML、WXSS和JAVASCRIPT。JSON主要用于保存小程序的全局配置信息和系統(tǒng)各頁(yè)面配置信息;WXML即微信標(biāo)記語(yǔ)言用來(lái)表現(xiàn)小程序頁(yè)面結(jié)構(gòu)和內(nèi)容，類似于HTML但卻和HTML有很大的區(qū)別，因?yàn)閃XML有自己的組件和語(yǔ)法;WXSS即微信樣式表用來(lái)表現(xiàn)小程序頁(yè)面樣式，它與Web前端開發(fā)中的CSS幾乎完全相同，可以通用;JAVASCRIPT用來(lái)表現(xiàn)小程序的邏輯結(jié)構(gòu)，包含頁(yè)面操作處理和小程序的API調(diào)用等[8-9]。

購(gòu)物商城小程序?qū)崿F(xiàn)的文件結(jié)構(gòu),如圖3所示。

圖3 文件結(jié)構(gòu)圖

系統(tǒng)五大功能模塊文件保存在pages目錄下，index目錄中的js、json、wxml和wxss文件用來(lái)實(shí)現(xiàn)首頁(yè)模塊;classification、find、Shopping cart、my目錄中的相應(yīng)文件分別用來(lái)實(shí)現(xiàn)分類模塊、發(fā)現(xiàn)模塊、購(gòu)物車模塊和我的模塊。app.json文件用來(lái)保存小程序全局配置信息，其中pages屬性中的頁(yè)面路徑列表用來(lái)規(guī)定小程序頁(yè)面加載順序，Windows屬性用來(lái)設(shè)置小程序全局默認(rèn)窗口，包括導(dǎo)航欄和窗口的參數(shù)設(shè)置，屬性tabBar用來(lái)實(shí)現(xiàn)小程序窗口中頂部或底部的頁(yè)面切換。由于系統(tǒng)的功能模塊較多，現(xiàn)以首頁(yè)模塊為例介紹購(gòu)物商城前端開發(fā)，首頁(yè)頁(yè)面效果圖，如圖4所示。

圖4 首頁(yè)頁(yè)面效果圖

首頁(yè)頁(yè)面的布局由上到下依次是：輪播圖、導(dǎo)航區(qū)和推薦商品列表。通過 index.wxml文件實(shí)現(xiàn)頁(yè)面內(nèi)容，其中輪播圖的實(shí)現(xiàn)需要調(diào)用組件swiper，它的indicator-dots屬性可以用于顯示輪播圖指示點(diǎn)，interval屬性可以用于設(shè)置輪播圖自動(dòng)切換時(shí)間間隔，swiper-item標(biāo)簽包含輪播圖的每一個(gè)子項(xiàng)，{{bnrUrl}}可以將輪播圖片存放路徑綁定在index.js文件中的data對(duì)象中，實(shí)現(xiàn)代碼分離和優(yōu)化，最終wx:for控制屬性可以將圖片等數(shù)據(jù)遍歷渲染到view視圖層中，具體代碼[10]如下。

〈view class="first-top"〉

〈swiper indicator-dots="true" autoplay="true" interval="3 000" circular="true"〉

〈block wx:for="{{bnrUrl}}" wx:key="key" wx:for-index="index"〉

〈swiper-item〉

〈image src='{{item.url}}' class="photo"〉〈/image〉

〈/swiper-item〉

〈/block〉

〈/swiper〉

〈/view〉

導(dǎo)航區(qū)和推薦商品列表部分的wxml實(shí)現(xiàn)使用view視圖容器組件，其中的bindtap是view組件中可以使用的點(diǎn)擊事件，用來(lái)處理單擊導(dǎo)航后的頁(yè)面跳轉(zhuǎn)。wxss實(shí)現(xiàn)采用彈性布局flex，使用該布局需要確定主軸的類型和方向，導(dǎo)航區(qū)設(shè)置flex-direction屬性值為row可以用來(lái)設(shè)置主軸為水平，方向?yàn)閺淖笾劣遥扑]商品列表設(shè)置flex-direction屬性值為column可以用來(lái)設(shè)置主軸為垂直，方向?yàn)閺纳现料?，justify-content用來(lái)設(shè)置內(nèi)容在主軸上的對(duì)齊方式，其中取值為center和space-around可以將內(nèi)容兩側(cè)的間隔設(shè)為居中和相等值[11]。

3 系統(tǒng)后端設(shè)計(jì)與實(shí)現(xiàn)

本系統(tǒng)后端的功能主要是方便管理和經(jīng)營(yíng)者進(jìn)行后臺(tái)管理和系統(tǒng)的維護(hù)，包括管理員、商品管理、訂單管理、用戶管理等模塊。操作頁(yè)面，如圖5所示。

圖5 系統(tǒng)后端操作頁(yè)面

其中管理員模塊是指管理人員賬戶的添加刪除，管理人員角色分配等；商品管理是指商品信息的增加、修改、刪除和查找，以及商品分類和商品狀態(tài)的設(shè)置；訂單管理主要是指前端客戶訂單信息的匯總，可實(shí)現(xiàn)訂單導(dǎo)出和批量發(fā)貨功能；用戶管理是對(duì)系統(tǒng)客戶的管理，功能有客戶詳細(xì)信息查看和會(huì)員等級(jí)的設(shè)置等。后端開發(fā)使用的核心技術(shù)主要有Apache服務(wù)器、數(shù)據(jù)庫(kù)MySQL5.1、開發(fā)語(yǔ)言PHP5.4。下面以商品管理為例介紹系統(tǒng)后端的實(shí)現(xiàn)[12]。

商品管理模塊是通過Web頁(yè)面將商品信息提交到后臺(tái)，由Apache服務(wù)器處理，最終將商品信息保存到MySQL數(shù)據(jù)庫(kù)中的Goods表中，具體實(shí)現(xiàn)的核心代碼[13-14]如下。

〈?php

$database_connection=@mysql_connect($hostname,$username,$password); //連接數(shù)據(jù)庫(kù)服務(wù)器

$goodsName=$_post['goodsName']; //獲取商品名稱信息

$goodsClass=$_post['goodsClass'];//獲取商品分類信息

$picturefileName=$goodsPicture['name'];

$picturefiletemp=$goodsPicture["tmp_name"];

$destination="uploads/".$picturefileName;

move_uploaded_file($picturefiletemp,$destination); //圖片文件上傳

$goodsSellPoint=$_post['goodsSellPoint'];//獲取商品賣點(diǎn)信息

$upSQL="insert into Goods values(null, 'goodsName', 'goodsClass', '$destination', 'goodsSellPoint')";//將獲取到的商品信息插入到Goods表中

Close_connection( );//關(guān)閉數(shù)據(jù)庫(kù)連接

?>

4 小程序前端和服務(wù)器后端數(shù)據(jù)通信

本系統(tǒng)小程序前端和服務(wù)器后端的數(shù)據(jù)通信通過小程序的網(wǎng)絡(luò)API實(shí)現(xiàn)，具體是使用wx.request( )方法，其工作原理是從小程序端向服務(wù)器發(fā)起HTTPS網(wǎng)絡(luò)請(qǐng)求、傳遞數(shù)據(jù)參數(shù)，并將服務(wù)器接口處理結(jié)果返回。下面以賬號(hào)密碼登錄模塊為例具體介紹前端和后端的數(shù)據(jù)通信過程，該模塊在小程序端的操作過程為，進(jìn)入小程序“我的”頁(yè)面，點(diǎn)擊“登錄”圖標(biāo)，打開“賬號(hào)密碼登錄”頁(yè)面，如圖6所示。

圖6 “賬號(hào)密碼登錄”頁(yè)面

具體的代碼實(shí)現(xiàn)如下。

Login:function() {

wx.request({

url: 'https://www.gouwushangcheng.com/php/login.php',

data: {

phone: this.data.phone_number,

passWord: this.data.password,

},

method: 'POST',

header: {

'content-type': 'application/json'

},

success: function (res) {

console.log(res.data);

}, }) },

代碼中的url屬性用來(lái)指定系統(tǒng)服務(wù)器接口地址，data屬性可存放傳遞數(shù)據(jù)參數(shù)，程序會(huì)將小程序頁(yè)面中客戶錄入的電話號(hào)碼和密碼發(fā)送給服務(wù)器接口，method屬性指定了HTTP請(qǐng)求方式為POST，它是一種比GET更為安全的方式。success: function ( )是回調(diào)函數(shù)，可以將服務(wù)器端的用戶名、命名驗(yàn)證結(jié)果返回給小程序端[15-16]。

5 總結(jié)

在微信平臺(tái)的廣泛應(yīng)用和電子商務(wù)普及下，本研究設(shè)計(jì)了一套基于微信小程序的購(gòu)物商城系統(tǒng)，該系統(tǒng)采用了WXML、WXSS、JAVASCRIPT、PHP和MySQL等多種開發(fā)技術(shù)，在Web服務(wù)器后端能夠高效完成商城的經(jīng)營(yíng)和管理，在微信小程序客戶前端實(shí)現(xiàn)了商品瀏覽、商品選購(gòu)、活動(dòng)參與、商品支付等功能。系統(tǒng)上線后通過實(shí)踐證明，基于微信小程序的購(gòu)物系統(tǒng)與傳統(tǒng)的PC端和手機(jī)APP購(gòu)物系統(tǒng)相比有更多優(yōu)勢(shì)，能夠滿足消費(fèi)者“觸手可及”“用完即走”的購(gòu)物需求，購(gòu)物滿意度得到提升，而且微信小程序?qū)儆谳p量級(jí)程序系統(tǒng)，無(wú)論是開發(fā)還是維護(hù)成本都要低很多，這些都會(huì)給商城經(jīng)營(yíng)者帶來(lái)無(wú)限商機(jī)，因此該系統(tǒng)的使用和推廣無(wú)疑會(huì)帶來(lái)一場(chǎng)新的購(gòu)物熱潮。系統(tǒng)上線后好評(píng)不斷，但在使用過程中也存在一些問題有待改進(jìn)，目前系統(tǒng)商品詳情頁(yè)設(shè)計(jì)較為單一，僅包含商品詳情介紹、評(píng)價(jià)和添加購(gòu)物車功能，為了方便客戶快速瀏覽商品，擬增加“為您推薦”和“猜你喜歡”模塊，如果客戶對(duì)當(dāng)前商品不滿意可以立即查看同類其它商品。同時(shí)在小程序首頁(yè)增加“直播”模塊，通過直播使客戶對(duì)商品和銷售活動(dòng)有更加深入的了解，希望系統(tǒng)改進(jìn)后能帶給用戶更好的使用體驗(yàn)。