馬靜

(陜西國防工業(yè)職業(yè)技術學院 計算機與軟件學院， 陜西 西安 710300)

0 引言

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

1 系統(tǒng)分析

1.1 需求分析

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

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

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

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

圖1 系統(tǒng)總體架構設計

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

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

圖2 系統(tǒng)功能模塊設計

1.4 數(shù)據(jù)庫設計

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

表1 Goods表結(jié)構

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

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)前端設計與實現(xiàn)

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

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

圖3 文件結(jié)構圖

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

圖4 首頁頁面效果圖

首頁頁面的布局由上到下依次是：輪播圖、導航區(qū)和推薦商品列表。通過 index.wxml文件實現(xiàn)頁面內(nèi)容，其中輪播圖的實現(xiàn)需要調(diào)用組件swiper，它的indicator-dots屬性可以用于顯示輪播圖指示點，interval屬性可以用于設置輪播圖自動切換時間間隔，swiper-item標簽包含輪播圖的每一個子項，{{bnrUrl}}可以將輪播圖片存放路徑綁定在index.js文件中的data對象中，實現(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〉

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

3 系統(tǒng)后端設計與實現(xiàn)

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

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

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

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

〈?php

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

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

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

$picturefileName=$goodsPicture['name'];

$picturefiletemp=$goodsPicture["tmp_name"];

$destination="uploads/".$picturefileName;

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

$goodsSellPoint=$_post['goodsSellPoint'];//獲取商品賣點信息

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

Close_connection( );//關閉數(shù)據(jù)庫連接

?>

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

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

圖6 “賬號密碼登錄”頁面

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

5 總結(jié)

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