基于微信小程序的购物商城系统的设计与实现

马静

(陕西国防工业职业技术学院 计算机与软件学院， 陕西 西安 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购物系统相比有更多优势，能够满足消费者“触手可及”“用完即走”的购物需求，购物满意度得到提升，而且微信小程序属于轻量级程序系统，无论是开发还是维护成本都要低很多，这些都会给商城经营者带来无限商机，因此该系统的使用和推广无疑会带来一场新的购物热潮。系统上线后好评不断，但在使用过程中也存在一些问题有待改进，目前系统商品详情页设计较为单一，仅包含商品详情介绍、评价和添加购物车功能，为了方便客户快速浏览商品，拟增加“为您推荐”和“猜你喜欢”模块，如果客户对当前商品不满意可以立即查看同类其它商品。同时在小程序首页增加“直播”模块，通过直播使客户对商品和销售活动有更加深入的了解，希望系统改进后能带给用户更好的使用体验。