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

时间：2024-09-03

◆杜雨荃王晓菊田立勤

◆杜雨荃王晓菊田立勤

（华北科技学院计算机学院北京 101601）

近年来，随着移动互联网的高速发展与微信小程序的普及，线上购物模式日益流行，逐年创下销售新高。本文系统主要实现的是用户足不出户即可享受线下同样的优质服务，以及更加便捷的用户购物体验。界面布局合理，用户视觉体验美观。

微信小程序；网上购物商城；系统设计

本文设计来源于用户实际生活中所需要的网上购物商城，它集合了服务器、宝塔面板、微信小程序以及shop商城系统后台于一体，灵感来源于随着科技的发展，线下购物由于距离的远近以及商品种类的限制使得不同地区的人们无法享受到全世界的商品，所以随着新媒体、电商行业的兴起，网上购物在人们生活中所占据的比重越来越多，人们开始更加倾向于足不出户就可以享受到优质的服务与满意的商品，因此本系统应运而生。

1 微信小程序现状

随着信息技术的发展以及用户消费升级，传统商超、电子商务在线上推广和购物体验等方面遇到了瓶颈[1]。本着“触手可及，即用即走”的微信小程序非常适合为人们生活中的重要又低频的需求服务，相对于原生态的APP更加切合线下快速推广的需求[1]。本文以传统线下、网上购物商城的购物方式为出发点，结合微信小程序技术，通过搭建服务器进行shop商城后台开发，开发一种可以方便商家线下推广、消费者线上购物的方便快捷的微信网上购物商城小程序。

在信息化社会当中，以Internet为核心的电子商务充分发挥了自身的商业价值，促进了社会经济的发展[2]。电子商务主要有B2B（Business To Business）、B2C（Business To Customer）、C2C（Customer To Customer）等几种形式[2]。其中B2C主要是商家与消费者之间以网络为交易平台开展商业往来，商家作为零售商，将商品借助于网络平台向消费者直接销售，而消费者借助于网络进行商品挑选、购物支付，然后由商家进行物流配送等相关业务，这一过程较为快捷，是当下流行的网购活动[2]。由此观之，以PHP技术合理设计网上购物系统，具有至关重要的现实意义[2]。

2 系统性能需求分析

2.1 实用性

基于微信小程序的网上购物系统主要为了方便用户生活，使用户足不出户便可以享受到购物的乐趣。用户可以不需额外下载其余APP，仅需便捷迅速打开微信小程序即可进行商品选购。通过在首页选购商品加入购物车，或点击立即购买即可成功下单，此过程中不需要其他冗余复杂的手续即可实现。后台管理员登录至首页即可在快捷操作栏找到商品、订单、会员等进行管理操作，可以完成对订单发货、查看新增会员、对营业额进行财务报表统计等基础功能；同时也可以发布拼团、砍价、广告文章等使系统更加完善。

2.2 实时性

当用户在前端微信小程序的网上购物商城进行验证首次登录时，验证码由服务器发送到后台，用户输入验证码即可成功登录。当用户在前端微信小程序的网上购物商城成功下单后，后台即可实时查看订单信息，对订单进行支付、发货等操作。当管理员对后台shop商城系统进行页面管理时，可以对微信小程序的各个模块进行编辑设计并管理。当管理员对后台shop商城系统的商品数据、基础数据等进行管理修改时，商品信息等可以实时同步到微信小程序。

2.3 系统完整性

在登录页面，进行管理员登录后便可以查看整个后台系统，对shop商城后台系统进行管理。可以看到shop商城系统后台有八大模块：首页、会员管理、商品管理、订单管理、运营管理、促销管理、财务管理、控制面板，如图1所示。微信小程序商城前端有四大主页面：首页、分类、购物车、“我的”。其中每个模块都有对应的性能需求和功能实现。从用户登录、商品选购、商品下单、后台管理员查看、订单发货、完成订单、财务报表查看等一系列流程体现了本系统的完整性。

图1 shop商城系统后台整体功能示意图

3 系统设计

3.1 关键技术实现

本项目采用了ThinkPHP框架，包含了前端、后端、微信端三部分，使用Ajax技术可以使本系统能够更快地回应用户的操作。本项目使用MySQL作为后台数据库，按钮页面跳转采用JavaScript技术，前端采用layui框架。其中shop商城系统的财务报表通过导入Echarts实现数据可视化，ECharts是一款基于JavaScript的数据可视化图表库，可以为用户提供直观、生动、可交互的数据可视化图表。

报表统计分为财务收款、用户收藏统计、商品销量、订单销量。财务收款是使用Echarts导入图形框架并对数据做出一个分析，从而可以得到一个根据时间为轴的财务统计图表。财务收款可以选择粒度对本段时间内的报表进行查看，选择以天为粒度后，点击本月即可查看本月的财务报表统计图和财务报表统计表单，如图2所示。

图2 shop商城系统财务报表统计

3.2 shop商城系统功能设计

通过对shop商城系统购物流程分析，可知本项目主要涉及用户、管理员两个角色的逻辑操作，最终实现了以下几个功能：

（1）用户通过微信小程序端登录后进行商品选购；

（2）用户对购物车商品进行结算下单；

（3）用户可以对心仪商品收藏、领取优惠券、查看商品浏览足迹、修改个人收货地址等操作；

（4）管理员通过后台查看订单，对订单进行收款、发货等操作；

（5）用户收到商品后订单完成；

（6）管理员可以对会员等级、余额、验证码等进行管理；

（7）管理员可以对商品添加、上下架、修改、删除等操作；

（8）管理员可以发布广告、文章、拼团促销活动、管理微信小程序页面等；

（9）管理员可以对用户地址进行修改、对财务报表等进行统计分析，并对支付单、财务报表单等进行导入导出操作。

3.3 shop商城系统详细设计

（1）首页登录模块设计

当管理员在shop商城系统登录成功后进入后台管理界面的首页，可以清晰看到首页分为六大板块：快捷操作、待办事项、订单统计、会员统计、最近登录、操作日志。其中快捷操作是管理员根据管理需求所设计的经常查看、使用、维护的功能，有商品、订单、会员、公告、促销、配送、支付方式、平台设置八个快捷操作，如图3所示。

图3 shop商城系统首页

（2）会员管理模块设计

用户登录模块通过info（）方法可以查看用户信息，通过changeAvatar（）可以更换头像，通过addGoodsBrowsing（）方法可以添加商品浏览足迹，通过delGoodsBrowsing（）可以删除商品浏览足迹，通过goodsBrowsing（）方法可以取得商品浏览足迹，通过goodsCollection（）方法可以添加商品收藏（关注）。通过getShipDetail（）方法可以获取收货地址详情，使用editShip（）方法对收货地址进行编辑，getUserShip（）获取用户收货地址列表，getAreaList（）获取省市区信息。

短信管理就是当用户首次登录微信小程序时，微信小程序会向服务器发送一个验证码，此时shop商城后台可以收到验证码，用户输入即可成功登录，如图4所示。

图4 shop商城系统短信管理

（3）商品管理模块设计

商品管理分为七大板块：商品列表、商品分类、品牌列表、商品类型、商品属性、参数列表、商品评价。商品列表可以查看所有商品，对商品进行增加、修改、删除、查找、上下架、导入导出表单等操作。同时商品库存不足时可以及时查看库存报警。

获取商品列表使用的是getList（）方法，首先判断商品搜索，接下来获取商品分类，判断价格区间，接下来进行品牌筛选、标签筛选，通过调用即可实现查询成功。

在商品模块使用getDetial（）获取商品明细，使用getGoodsParams（）方法获取参数接口，使用getProductInfo（）获取货品相关信息，使用appGetDetail（）方法对app版获取商品明细接口，因为多规格的传值问题，导致java解析不了多规格数据，在此做了转化，使用getSkuDetial（）方法是指根据sku获取相关价格，库存等信息。通过getGoodsComment（）方法获取商品评价，通过getGoodsCatHotGoods（）方法获取某个分类的热卖商品。

通过getPickGoods（）获取推荐商品，该方法的使用首先获取用户ID，接下来获取浏览记录，通过过滤条件的筛选，依次判断商品搜索、商品分类、价格区间等信息。

shop商城系统商品列表如图5所示。

（4）订单管理模块设计

表单管理通过调用API接口使用getFormDetial（）方法获取活动商品详情，通过对用户ID、会员成功登录后所传token值及各项数据检查判断后，即可获取成功。通过使用addSubmit（）方法，经过检查过期时间、判断提交次数、获取地区数据、处理图片信息、判断支付类型等函数最终实现提交表单功能。使用getUserFormSubmit（）方法获取用户提交表单，使用getUserFormSubmitDetial（）方法获取用户提交订单详情。

购物车通过调用API接口使用add（）方法对商品进行累加加入购物车，通过使用del（）方法将商品移除购物车。使用getList（）方法获取购物车列表，使用setNums（）方法设置购物车数量接口，使用batchSetCart（）方法将商品列表页批量快速下单加入购物车，其中getListSelectAll（）方法是获取全部购物车列表。

商品分类通过调用API接口使用getTopCat（）方法获取商品顶级分类，通过使用getChildCat（）方法获取顶级分类下的子分类。使用getAllCat（）方法获取全部分类树状形式，使用getName（）方法获取分类名称。订单管理包括五大板块，有订单列表、发货单列表、提货单列表、售后单列表以及退货单列表。订单列表可以查看用户通过微信小程序下单的订单，并对各项订单进行发货、收款、编辑、查看等操作。shop商城系统订单列表如图6所示。

图5 shop商城系统商品列表

图6 shop商城系统订单列表