基于微信小程序的電子商城的設計與開發

李常寶

(山西警官職業學院，山西 太原 030006)

一、基于微信小程序的電子商城與傳統電子商城的優劣比較

(一)傳統電子商城的劣勢

當前，常見的傳統電子商城有以下劣勢:

1.開發成本昂貴，開發生命周期長。

2.運營成本隨著業務量的增長而增大，需要有強大的資金支持。

3.代碼維護成本高。

4.信息保護與數據安全維護成本高。

傳統電子商城適合于大型的企業，需要有很強的經濟實力，比較京東、蘇寧等。而近年來，隨著疫情防控形勢的日益嚴峻，小微型企業如果謀求向互聯網轉型，開發一款電子商城APP，顯然是必需的，但卻因為成本過高，讓很多小微型企業望而卻步。而基于微信小程序的電子商城的輕量化、成本低的特點則正好適合小微型企業。

(二)微信小程序的電子商城的優勢

基于微信小程序的電子商城(以下簡稱電子商城小程序)有以下優勢:

1.用戶體驗出色：便捷地獲取服務，無需安裝卸載，即用即走。

2.流量獲取快捷：背靠巨量微信用戶。

3.開發成本低廉：節省大量資金、時間、人力，從而做好自己的產品。

4.微信生態強大：微信生態體系、多渠道實現營銷推廣，節省推廣成本。

5.購物流程簡單：電子商城小程序的購物體驗與普通商城基本一致。

二、電子商城小程序使用的關鍵技術

本論文所研究的電子商城小程序是基于以下技術實現：

1.基于微信小程序開發API庫。

2.前端使用WXML+CSS+WXS。

3.后臺使用基于微信的云開發數據庫技術。

三、電子商城小程序的項目整體結構

圖1 電子商城小程序的整體結構

電子商城小程序的項目結構如下所示：(下文的縮進格式，體現模塊包含關系)

pages: 整個項目的代碼文件

mall: 電子商城項目文件夾

goods:商品頁面

huodong:活動頁面

order:訂單頁面

record:錢包頁面

user:帳戶信息頁面

LoadUser:用戶登錄頁面

log: 項目日志統計

res: 項目的資源文件夾

util:項目常用輔助代碼工具庫

app.js:項目整體后臺代碼文件

app.json: 項目整體數據文件

app.wxss:項目整體樣式表

四、電子商城小程序的開發三層架構設計

電子商城小程序的框架系統分為三部分：視圖層(View)、邏輯層(App Service)和后臺數據層(DBCloud)。小程序提供了自己的視圖層描述語言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注于數據與邏輯。而后臺數據層，則是使用微信的云開發數據庫技術來實現。

(一)視圖層

指與用戶交互的頁面設計。該層主要包括由WXML語言構建各種組件和修飾這些組件的WXSS樣式表，類似于我們在網站開發時，HTML語言和CSS的關系。

WXML(WeiXin Makeup Language)是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。它類似于通用的XML語言，相當于增強型XML語言，為了方便開發者，包含了很多微信獨有的組件。

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述WXML的組件樣式。它類似于CSS，是微信獨有的樣式語言。與CSS相比，有自己獨特的導入方式和尺寸單位。

該層主要包括Page模塊里每個頁面文件夾中的*.wxml文件和*.wxss文件。

(二)業務邏輯層

主要是處理業務方面的邏輯，如判斷用戶輸入的內容是否符合要求，負責把用戶從視圖層傳入的數據經過處理后傳輸給小程序的云數據庫后臺，并把來自后臺數據層的數據返回給用戶。該層中所有的邏輯代碼，最終都會打包成一份統一的js文件，當小程序運行的時候會加載，直到小程序退出運行狀態。本項目電子商城微信小程序中，業務邏輯層主要包括各個頁面文件夾中的*.js文件和整個項目的app.js文件。

1.頁面中的邏輯代碼

頁面中的邏輯代碼由兩部分構成，第一部分是Page(),這是一個頁面構造器。第二部分是該頁面的生命周期，里面有頁面的多個生命周期方法，比如onLoad(),onReady()等方法。

當小程序運行之時，它就會生成一個頁面，在生成頁面的時候，小程序框架就會把Page()中的data數據和*.wxml一起渲染出最終的頁面效果。

2.整個項目的邏輯代碼

整個項目的邏輯代碼是指app.js文件中的代碼。每個小程序都要在app.js中調用App 方法注冊小程序實例，綁定生命周期回調方法、錯誤監聽和頁面不存在監聽方法等。

(三)后臺數據層

當前，小程序后臺云開發業務主要有微信云開發和阿里云兩種方式。以微信云開發為例，微信云開發是微信團隊聯合騰迅云推出的專業的小程序開發服務。開發者無需搭建服務器，可免鑒權直接使用平臺提供的API進行后臺數據庫開發。

本文所研究的電子商城小程序的后臺數據層，不同于其他Web應用程序，它采用微信云開發數據庫的方式搭建。

五、電子商城微信小程序的主要模塊的設計與實現

微信小程序的前端設計以頁面為模塊進行組織，每個頁面文件夾中包含以下四種類型的文件：

*.wxml:此類文件屬于視圖層，是小程序頁面的界面設計文件，相當于網頁開發中的HTML文檔。

*.wxss: 此類文件屬于視圖層，是小程序頁面的樣式表文件，相當于網頁開發中的CSS文檔。

*.js: 此類文件屬于邏輯層，是小程序頁面的后臺代碼文件，相當于網頁開發中的javascript文檔。

*.json: 此類文件屬于邏輯層，是小程序頁面的配置文件。

現將電子商城小程序的主要模塊設計與功能分析如下：

(一)用戶登錄模塊

該模塊的功能是先獲取到用戶輸入的登錄名和密碼，再根據用戶名(username)到數據庫中查詢密碼是否正確，如果正確，就把用戶信息保存到全局變量中。

具體實現步驟，分層介紹如下：

1.后臺數據層：在微信云開發平臺中，創建數據庫Mall_DB,并創建用戶數據表user及其他必需的數據表。

2.邏輯層:在LoadUser頁面中，創建登錄頁面相應的LoadUser.js中實現登錄邏輯代碼。具體代碼邏輯如下所示：

∥ 初始化云

wx.cloud.init({

env: 'wubaib-9543f7',

traceUser: true

});

∥ 初始化數據庫

const db = wx.cloud.database();

db.collection('userInformation').where({

userName: bindName

}).get().then(res => {

console.log(res.data);

if (res.data[0].userPassword === bindPassword) {

console.log("登錄成功");

∥ 保存手機號，真實姓名，身份證號，郵箱 保存用戶名

that.setData({

userName: res.data[0].userName,

phone: res.data[0].phone,

realName: res.data[0].realName,

card: res.data[0].card,

email: res.data[0].email,

userId: res.data[0]._id

})

app.appData.userinfo = {

phone: that.data.phone,

realName: that.data.realName,

card: that.data.card,

email: that.data.email

}

app.appData.account = {

userName: that.data.userName

}

app.appData.userId = {

userId: that.data.userId

}

wx.switchTab({

url: '../personalCenter/personalCenter',

})

} else {

wx.showToast({

title: '用戶名或密碼錯誤',

icon: 'none',

duration: 2000

})

}

3.表現層：在LoadUser頁面中，創建登錄頁面相應的LoadUser.WXML文件和LoadUser.WXSS文件，登錄頁面界面如圖2所示。

圖2 登錄頁面

(二)商品列表管理模塊

該模塊的功能是將存放到數據庫的商品信息以列表的方式顯示到頁面中。

具體實現步驟，分層介紹如下：

1.后臺數據層：在微信云開發平臺中，創建商品信息數據表goods及其他必需的數據表,在該數據表中有imge_url字段，該字段中存儲在微信云存儲中的商品的圖片所對應的url。

2.邏輯層:在List頁面中，創建商品列表頁面相應的List.js中實現商品列表顯示邏輯代碼。具體邏輯代碼如下所示：

Page({

onLoad(){

wx.cloud.database().collection("goods")

.get()

.then(res=>{

console.log("成功",res);

this.setData({

list:res.data

})

})

.catch(err=>{

console.log("失敗",err);

})

}

})

3.表現層：在List頁面中，創建商品列表頁面相應的List.WXML文件和List.WXSS文件，登錄頁面界面如圖3所示。

圖3 商品列表頁面

六、下一步的改進

電子商城小程序的頁面設計與業務邏輯還有幾點需要改進。

(1)支付功能的實現非常煩瑣，需要進一步改進。

(2)在下一階段開發中要增加統計分析功能，需要使用云開發的數據可視化功能。