基于微信小程序的購物商城系統的設計與實現

馬靜

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

0 引言

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

1 系統分析

1.1 需求分析

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

1.2 系統總體架構

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

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

圖1 系統總體架構設計

1.3 系統功能模塊

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

圖2 系統功能模塊設計

1.4 數據庫設計

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

表1 Goods表結構

創建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 系統前端設計與實現

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

購物商城小程序實現的文件結構,如圖3所示。

圖3 文件結構圖

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

圖4 首頁頁面效果圖

首頁頁面的布局由上到下依次是：輪播圖、導航區和推薦商品列表。通過 index.wxml文件實現頁面內容，其中輪播圖的實現需要調用組件swiper，它的indicator-dots屬性可以用于顯示輪播圖指示點，interval屬性可以用于設置輪播圖自動切換時間間隔，swiper-item標簽包含輪播圖的每一個子項，{{bnrUrl}}可以將輪播圖片存放路徑綁定在index.js文件中的data對象中，實現代碼分離和優化，最終wx:for控制屬性可以將圖片等數據遍歷渲染到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〉

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

3 系統后端設計與實現

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

圖5 系統后端操作頁面

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

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

〈?php

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

$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( );//關閉數據庫連接

?>

4 小程序前端和服務器后端數據通信

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

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

具體的代碼實現如下。

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

5 總結

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