基于微信小程序的电子商城的设计与开发

李常宝

(山西警官职业学院，山西 太原 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)在下一阶段开发中要增加统计分析功能，需要使用云开发的数据可视化功能。