李常寶

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

一、基于微信小程序的電子商城與傳統(tǒng)電子商城的優(yōu)劣比較

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

當前，常見的傳統(tǒng)電子商城有以下劣勢:

1.開發(fā)成本昂貴，開發(fā)生命周期長。

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

3.代碼維護成本高。

4.信息保護與數(shù)據(jù)安全維護成本高。

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

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

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

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

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

3.開發(fā)成本低廉：節(jié)省大量資金、時間、人力，從而做好自己的產(chǎn)品。

4.微信生態(tài)強大：微信生態(tài)體系、多渠道實現(xiàn)營銷推廣，節(jié)省推廣成本。

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

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

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

1.基于微信小程序開發(fā)API庫。

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

3.后臺使用基于微信的云開發(fā)數(shù)據(jù)庫技術。

三、電子商城小程序的項目整體結(jié)構(gòu)

圖1 電子商城小程序的整體結(jié)構(gòu)

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

pages: 整個項目的代碼文件

mall: 電子商城項目文件夾

goods:商品頁面

huodong:活動頁面

order:訂單頁面

record:錢包頁面

user:帳戶信息頁面

LoadUser:用戶登錄頁面

log: 項目日志統(tǒng)計

res: 項目的資源文件夾

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

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

app.json: 項目整體數(shù)據(jù)文件

app.wxss:項目整體樣式表

四、電子商城小程序的開發(fā)三層架構(gòu)設計

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

(一)視圖層

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

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

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

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

(二)業(yè)務邏輯層

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

1.頁面中的邏輯代碼

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

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

2.整個項目的邏輯代碼

整個項目的邏輯代碼是指app.js文件中的代碼。每個小程序都要在app.js中調(diào)用App 方法注冊小程序?qū)嵗?，綁定生命周期回調(diào)方法、錯誤監(jiān)聽和頁面不存在監(jiān)聽方法等。

(三)后臺數(shù)據(jù)層

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

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

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

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

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

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

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

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

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

(一)用戶登錄模塊

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

具體實現(xiàn)步驟，分層介紹如下：

1.后臺數(shù)據(jù)層：在微信云開發(fā)平臺中，創(chuàng)建數(shù)據(jù)庫Mall_DB,并創(chuàng)建用戶數(shù)據(jù)表user及其他必需的數(shù)據(jù)表。

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

∥ 初始化云

wx.cloud.init({

env: 'wubaib-9543f7',

traceUser: true

});

∥ 初始化數(shù)據(jù)庫

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.表現(xiàn)層：在LoadUser頁面中，創(chuàng)建登錄頁面相應的LoadUser.WXML文件和LoadUser.WXSS文件，登錄頁面界面如圖2所示。

圖2 登錄頁面

(二)商品列表管理模塊

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

具體實現(xiàn)步驟，分層介紹如下：

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

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

Page({

onLoad(){

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

.get()

.then(res=>{

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

this.setData({

list:res.data

})

})

.catch(err=>{

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

})

}

})

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

圖3 商品列表頁面

六、下一步的改進

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

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

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