基于微信小程序的商城购物系统的设计与实现(文档+源码)

目 录
第一章 绪论
1.1开发背景
1.2所选题目意义与目的
1.3研究现状
1.4本文研究内容
第二章 关键技术介绍
2.1 NODE.JS
2.2 MYSQL
2.3 VUE
2.4 HTML
2.5 JS
2.6 CSS
2.7 小程序开发者工具
第三章 系统分析
3.1 微商城小程序设计思路
3.2 数据表
第四章 系统实现
4.1 购物流程
4.2开店流程
4.3 商城首页
4.4 发现页面
4.5 购物车
4.6 我的
4.7 商品详情
4.8 订单确认页面
4.9 添加地址、选择地址
4.10 地址列表
4.11 订单支付及密码输入
4.12 我的订单
4.14 店铺菜单及查看店铺资料
4.15 发布商品
4.16 服务器
第五章 系统测试
5.1 微信授权与微信号绑定
5.2 商品列表和详情测试
5.3 购物车测试
5.4 购物车单商品和多商品结算
5.5 添加地址和地址选择
5.6 订单测试
参 考 文 献
致谢
 
第一章 绪论
1.1开发背景   
网络购物的快速发展，催生了许多的电商平台。云的的淘宝、刘强东的京东、张近东的苏宁易购、黄峥的拼多多等等等。其中崛起最快，发展最迅速的当属拼多多。拼多多依托微信庞大的用户群体，迅速的扩张用户量，它的拼团砍价策略，鼓励用户分享传播，而分享和传播的途径正是微信小程序，无论是从App分享还是小程序中的分享，最终都打开了拼多多的小程序。
小程序有三大特点：用完即走，触手可及，不用安装和卸载；正是这三大特点，给小程序的迅猛发展提供了支持。微信小程序对中小企业来说，开发成本低，尤其是有专门开发小程序的公司，对于小程序的开发熟练且有框架可用，无需自己封装，而且企业能借助微信平台获得较大的流量。小程序不需要单独的APP推广、运营和开发。小程序提供了许多的接口，比如大家每天都在使用的扫一扫功能，拍照功能，付款功能等，这些功能都是在微信的使用过程中经常用到的功能，同样的也可以在小程序中使用。减少了开发时间和成本的同时，还能不改变用于的使用习惯，这是其他程序不能轻易做到的。
气候的多变，和环境的不稳定因素，使人们对外出有了一定的抗拒。天南地北的网购，商品的真伪和路途的消耗及退货的艰辛也使得电商的发展到了瓶颈期。越来越多的假冒伪劣产品也使人们对电商有了一些抵触情绪。不能很快的见到产品，不能很好的处理退换货，更是使人很开始对网购冷落。这是一个危机，也是一个商机。
我认为只是一个商机，一个实体店反击电商的大商机。当然这还是需要依赖网络，网络的宣传效果是不言而喻的，在现代社会，没有任何一个人能离了网络独自生活。没了网络犹如与世隔绝般痛苦是如今许多年轻人的正是写照。网购虽好，却解决不了紧急问题。
正因为如此，我想开发一款优先服务周边，再向外扩展的基于微信小程序的快捷程序。小程序的开发，使用于微信自主研发的开发工具：“微信开发者工具”，也可以使用第三方的开发工具如Hbuilder进行开发，开发完成后再打包成小程序，通过“微信开发者工具”上传即可。他使用与前段开发一样的语言，与主流的开发框架Vue有异曲同工之妙，自带丰富的Api供开发者使用，大大降低了开发者的工作量和开发难度。

1.2所选题目意义与目的
随着社会的发展，网络时代的来临，手机使用的普及，交通的发达。网上的交易比传统交易更加具有优势，因为网上的交易更加便捷，动动手指滑动一下手机，就可以浏览全国各地的商品，只要看到想要心仪的商品，直接点击购买下单付款，剩下的就交给物流。我们只需要在家耐心的等待快递小哥的电话。
这在一开始还是非常受欢迎的，在网上商品数量成倍增长的同时，残次品的数量也在增多，并且受季节、天气、节日等的影响，许多时候人们需要长时间的等待才能拿到商品。经过等待，拿到商品后，早已没了当初下单时的喜爱和冲动。为此电商的解决办法是布置更多的仓库和物流点，增加物流车辆以此解决路上消耗的时间，这样做的同时也增加了成本。
所以，为何不开发一款软件，让商家优先服务于周边，设定一个服务圈，圈内实时送达，圈外快递物流。优先为用户展示附近商家及产品，让用户能在最短的时间拿到商品，甚至用户可以根据地址自行到店选取。一方面给店家做了宣传增加了人流量，不管开在哪里，在网上都是一样的人流访问量，可以减低商家的开店成本，成本的降低意味着利润的增加，增加的利润可以反馈回用户，使双方都可获利。  

1.3研究现状
根据2018年3月的数据显示，微信的用户量已经超过10亿。2017年小程序上线后，当月用户量仅有200万。之后随着后期小程序的不断更新，增加更多的开放入口，包括用户通过分享到好友和朋友圈，公众号跳转等多个入口，使得小程序用户开始不断上升。在2017年12月以“跳一跳”为代表的的微信小程序正式上线后，小程序迅速走入人们的视野，用户量也开始暴涨，数据显示当月微信小程序的用户达到了4亿之多。在小程序不断的更新中，小程序的使用场景也开始不断的增加，覆盖范围越来越广，小程序的用户人群也有形成趋势。
随着小程序的发展和使用人群的增多，许多电商平台也相继开发出了小程序版本，拼多多就是最成功的案例之一。得益于小程序的的易传播性，拼多多很快的就在微信群中走红，随便打开一个群都能在其中找到拼多多来过的痕迹。得益于微信平台的持续更新和迭代，相继开发出新的功能，每次更多都给人带来不一样的惊喜。即兼容之前的版本，又增加新的功能，近期就推出了一个直播功能，不需要自行编写代码开发，只需要在管理品台图形界面操控即可实现在小程序中实现直播功能。这大大降低了开发和维护的成本。
1.4本文研究内容
本文主要研究如何在使用微信小程序，开发多商户微商城。研究思路如下：
（1）确定需求。总体需求为：一个微信号为一个用户，每个用户可以使用同一个账号购物和开店。成为用户后，继续申请成为店主，审核通过后即可在商城中发布自己的商品；
（2）确定功能。本商城的两个主要功能为商家上架商品和用户购买商品；每一个商品的交易流程都需要经过商家和用户的共同操作完成。商家上架商品、用户浏览并购买商品、商家发货、用户收货及评价，为一个商品的交易流程。
（3）研究实现方案。使用微信唯一标识符确定每个用户的唯一性和数据的关联。使用用户id与商铺id实现用户与商品的关联；通过店铺id和商品id实现商铺信息和商品信息的关联；通过用户id和订单id及商品id，实现用户信息和订单信息及商品信息的关联；使用地址id和用户id，实现用户信息与地址信息的关联；使用用户id、商品id和购物车id，实现购物车、用户和商品的关联。
（4）页面布局及功能。首页展示商品，默认按销量排序；可增加按价格升降排序、距离远近排序、好评率排序等。发现页面用于查找商品，可查找商品类型、商品品牌、商品名称、商品描述等；购物差页面用户存放用户添加到购物车的商品，可多商品同时下单付款；我的页面用于管理我的数据，如：订单、收藏的商品、收藏的店铺、我的店铺、发布的商品及个人信息等。
（5）页面编写。页面使用腾讯提供的“微信开发者工具”及参考“微信小程序开发文档”编写，使用框架提供的API实现分享、选择图片、上传图片、查看图片、页面跳转等功能。
（6）数据对接。使用框架自带API实现异步加载数据，局部热更新数据；实时记录用户操作，反馈用户需求；隐藏关键信息如：用户id、店铺id、用户支付密码等，展示页面需要信息如：商品信息、订单信息、店铺信息等；
（7）功能测试。测试各个功能是否能正常运行，且能适应各种用户操作，如：下单时，到达付款页后用户未付款，此时应将订单变为待付款订单。购买商品时，用户将购买数量设为0，这个是不被允许的。用户余额不足时，付款应为失败，并提示用户“余额不足导致付款失败”
第二章 关键技术介绍
2.1 Node.Js
Node.js是一个运行与javascript环境中的框架。它让javascript可以开发后端程序，能实现与其他后端语言实现的大部分功能。可以与PHP、Java、Python、NET、Ruby等后端语言平起平坐。
3.3.2、node.js的优势
Node.js的语法与js的语法几乎一致，可以说学习并使用过javascript的人，学习node.js开发会非常容易。Node.js开拓了Javascript的应用范围，从浏览器到服务器的一大进步。实现前后端编程环境的统一、极大的减少了开发时间和开发成本。Node.js有超高并发的能力，使用单线程非阻塞I/O和事件驱动机制，让Node.js程序在宏观上也是并行的。

2.2 mysql
   MySQL是一款开源的关系型数据库系统；目前已经成为最为流行的数据库系统之一，并且逐步的向原有商业数据库的市场进军。可以看到Yahoo、Google、Facebook、网易等许多大型公司都在使用MySQL数据库作为主要数据库，甚至将MySQL作为核心应用的数据库系统。   
2.3 vue
   过去的十年，我们的网页变得更加动态化和强大，是因为有JavaScript，我们已经把很多传统服务端代码放到浏览器中这样就产生了成千上万行的JavaScript代码，他们链接了各种各样的HTML和CSS文件[4]，但缺乏正规的组织形式，这也是为什么越来越多的开发者使用JavaScript框架，而vue就是当下较为流行的一个。Vue框架是一套用于构建用户界面的渐进式框架。Vue[2]的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue使用js的方式写HTML，在一定程度上减少了许多重复的代码，大大提高代码编写速率；其中典型的有v-for用与循环生成代码；v-if用来判断是否显示元素；与v-show相比一个是存在看不见不占位置；一个是完全不存在；v-model多用户获取input中的输入内容；
2.4 HTML
HTML是建造网站的砖石，是构建网站的基础，常用的标签有<div></div> 元素，块级元素的代表，即默认占据一行,与前后元素不在一行；<span></span> 元素，行内原色的代表，即如果前后有一个同样是行内元素的元素，则会在一行中显示不会换行，行内元素设置宽高不生效，可以使用display属性修改；<a></a>元素，用户页面的跳转，自带触发样式，只需要一个地址，就可以跳转到互联网中的任何一个页面，相当好用； 
2.5 JS
JavaScript 是一门跨平台、面向对象的脚本语言。它是网页交互必不可少的东西；没有Javascript的网站是死的，没有灵魂的，只有加入了Javascript才能赋予网站灵活，使其有生命，完成各种动作和交互；他可以动态的改变HTML标签，也可以根据用户操作改变CSS样式。总之javascript是HTML的灵魂。
Javascript可以在网站运行时做很多HTML做不了的事情；比如获取用户输入并传递给后台，再将后台返回的东西展示给用户；
2.6 CSS
CSS是层叠样式表(英文全称：Cascading Style Sheets)。是用户将HTML中的标签按想要的方式排布的工具；如果将HTML比喻为原料，那么CSS就是模具，用来规定HTML的展示；它功能强大，可以使用动画，做出意想不到的效果；简单实用是它的一大特色； 
2.7 小程序开发者工具
微信小程序，小程序的一种，英文名Mini Program。是一种比APP更小更快捷的应用，它不需要下载就可以安装使用的。它实现了程序“触手可及”的梦想，用户使用微信扫一扫或者搜一下即可打开相应的应用。还可以使用分享好友和公众号跳转、app跳转的方式进入小程序并到达小程序的指定页面。这相当于将所有小程序整合到一个项目中，在页面中跳转。做到了即是单独的个体又是一个整体。
微信小程序开发者工具提供了一个简单、高效、易学易用的应用开发框架及丰富的组件和API。这有极大的减少了开发难度和增大开发效率。
小程序使用的开发语言主要是 JavaScript ，小程序的开发流程和普通的网页开发相似。对于长期从事前端开发的工作人员而言，从网页开发迁移到小程序的开发门槛并不高，但是二者又有些许的区别。
 

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

摘　要
随着信息技术的发展和用户消费的升级，传统超市、电子商务在线促销和购物体验都遇到了瓶颈。无人超市已经加入了消费者购物行为的高科技体验，但有了这种酷炫的黑色科技体验，也就有了高额的店铺成本投资和维护，如果社会普遍复制这种模式，技术和成本门槛就会更高。为传统的在线商户开发更广泛的应用程序，为消费者提供多功能和方便。微信applet“触手可及”，非常适合人们生活中重要的低频需求。与原APP相比，更适合快速提升线下需求。本文以传统社区便利店的购物方式为出发点，结合微信小程序技术，采用面向对象的开发方法，开发出一套方便快捷的微信小程序购物系统，可以方便消费者进行线下促销和在线购物。
本系统主要由微信applet客户端、服务器和数据管理终端组成。服务器采用ThinkPHP5框架技术，客户端使用微信applet的MINA框架，数据管理终端采用CMS的框架。客户机的页面实现通过网络和服务器REST API接口获取MySQL。
主要从事微信小程序网上购物系统客户端、服务器和数据库的设计、开发和测试。
在系统的设计和实现过程中，对客户端代码进行了MVC模式的设计控制。该模板用于提高代码的可重用性，创建了客户端用户的令牌管理机制，用于用户身份验证和权限分级。本文重点研究了小程序购物系统客户端产品信息显示、产品分类、购物车、订单支付、个人信息管理和数据库设计六个模块的设计与实现过程。

关键词：微信小程序网上购物；AJAX语言；Browse/server体系构成 
DESIGN AND IMPLEMENTATION OF ONLINE MALL
ABSTRACT
With the development of information technology and the upgrading of user consumption, traditional supermarkets, e-commerce online promotion and shopping experience have encountered bottlenecks. Unmanned supermarkets have joined the high-tech experience of consumer shopping behavior, but with this cool black technology experience, there is a high amount of store cost investment and maintenance, if the society generally replicates this model, technology and The cost threshold will be higher. Develop a wider range of applications for traditional online merchants, providing consumers with versatility and convenience. The WeChat applet is “at your fingertips” and is ideal for the low frequency needs of people in their lives. Compared with the original APP, it is more suitable for quickly improving offline demand. This article takes the shopping method of traditional community convenience store as the starting point, combines WeChat small program technology, adopts object-oriented development method, and develops a convenient and fast WeChat applet shopping system, which can facilitate consumers to carry out offline promotion and online shopping.
The system is mainly composed of WeChat applet client, server and data management terminal. The server adopts the ThinkPHP5 framework technology, the client uses the MINA framework of the WeChat applet, and the data management terminal adopts the CMS framework. The client's page implementation gets MySQL through the web and server REST API interfaces.
Mainly engaged in the design, development and testing of online shopping system clients, servers and databases.
In the design and implementation process of the system, the design and control of the MVC mode is performed on the client code. This template is used to improve code reusability and creates a token management mechanism for client users for user authentication and permission grading. This paper focuses on the design and implementation process of the six modules of the small program shopping system client product information display, product classification, shopping cart, order payment, personal information management and database design.
Key words: Online shopping; WeChat small program; Browse/server system composition 

目录
第一章 绪论
1.1 项目研究的背景和意义
1.2国内研究现状分析
1.3 论文的主要研究工作
第二章 系统相关技术研究
2.1 可行性研究
2.2 系统需求分析
第三章 微信小程序网上购物数据库设计
3.1 数据表的设计
3.2 数据库信息的保护
第四章 微信小程序网上购物系统总体设计
4.1 系统总体构成设计
4.2 系统界面设计
4.3 系统功能模块设计
第五章微信小程序网上购物微信小程序的详细设计
5.1 用户操作界面的详细设计
5.2 界面设计使用的元素
第六章 微信小程序网上购物系统的测试
6.1 系统测试概述
6.2 系统测试规则
6.3 系统测试方式
 结论
参考文献
 
第一章 绪论
基于微信applet的微信小程序网上购物系统是O2O、电子商务和微信applet的共同产物。它集成了微信applet开发、ThinkPHP5服务器开发、数据库、网络等多种流行技术。消费者只需扫一扫小程序代码就可以快速获取商店和产品信息，方便用户随时随地购买商品。小程序购物客户端的加入为电子商务的发展增添了新的活力。
1.1项目研究的背景和意义 
近年来随着我国网络基础设施的不断完善，信息技术和第三方支付工具的不断发展微信小程序网上购物的普及，已经成为人们生活的重要组成部分。基于PC平台的购物系统，让人们足不出户就能享受购物的乐趣。基于手机的微信小程序网上购物使便携式终端便携化，使公众可以随时随地购买自己喜爱的产品。社区导向购物模式的产生O2O将线下商业机会与互联网相结合，使互联网成为线下交易的平台。这个购买物资系统是以互联网为基础，以社区为基本单元，充分利用社区的信息基础设施，将社区的小型实体店与网上商城相结合的一种新型电子商务模式。突破。更多的强调线上是为了满足消费者的便捷性和会员互动营销的需要，以及实体店的分流。线下更加便捷，为用户提供更加便捷的现代智能购物体验服务。
同时，在信息技术、消费升级、竞争态势等诸多因素的推动下，中国零售业迎来了新的变革机遇，即“线上+线下+物流”的“新零售”。致力于推动线上线下一体化进程，推动价格消费时代向价值消费时代的全面转型。技术的核心是实现全面接入以消费者为中心的会员、支付、库存、服务等方面。促进消费者购物体验的提升，促进消费者购物方式的转变。
新零售发展的核心是客户满足特定购物场景的需求。在客户信息化、技术和移动互联网的趋势下，快速购物、快速配送、快速销售的购物方式受到用户的青睐。然而，对于传统零售业来说，为线下商店提供便捷的微信小程序网上购物渠道是提升顾客体验、提高零售效率的重要途径。为此，近年来，国内外零售商普遍提供线上和线下的社区购买组合。
在主流的微信小程序网上购物系统中，主要有pc端购物系统、APP购物系统和依赖第三方应用的购物门户。2017年初，微信applet正式推出，进一步激活了微信生态系统。最大的功能微信applet与本地应用是用户不需要下载和安装,并可以扫描代码或搜索一个小程序,可以看到基于微信,一个现成的轻量级applet更好的线下服务的平台 。
1.2 国内研究现状分析
近几年来，随着互联网的高速发展，移动互联网以及手机支付的普及给人们的生活带来了翻天覆地的变化。电子商务伴随着互联网的快速发展也在更新改变，从电脑 PC端到手机移动端的智能化应用普及，使得人们的生活更加依赖于手机，基于淘宝、京东等的大型 APP 购物系统在人们生活中的使用频率越来越高，人们在这些大型的购物 APP上可以买到全国各地乃至全球各地的商品，方便了人们生活，加速了商品的流通效率。但随着网络购物模式和范围的不断扩大，传统的电子商务的瓶颈也日益显现，比如物流时间的相对滞后和“最后一公里”的配送问题，用户收到实物与网上产品介绍相差很大的问题，售后维权顾客要自己付高额邮费等问题。这些问题降低了用户的购物体验。
新零售的出现将微信小程序网上购物的范围缩小，着眼于线上线下购物相结合的方式，为用户打造更可靠、高品质的购物服务，这为线下的大型商超的发展带来了新的活力与机遇。伴随着移动互联网的发展，购物方式变得更加移动化、便捷化，注重线上购物与线下购物的结合的社交性，借助于社交平台的购物模式应运而生。微信作为国内最大的社交平台，目前微信的月活跃用户量达十亿，微信已变成人们生活和交往的重要组成部分。微信于 2012 年 8 月推出的微信公众平台，发展至今不仅形成了获取用户流量的新媒体渠道，也促使了基于微信公众号的生活服务平台的成长，其中“美丽说”、“京东商城团购”等通过微信平台运营大大增加了用户量。这些案例的成功表明了微信借助其社交性质可以很好的联通其他生活服务。2017 年 1 月 9 日微信正式发布了微信小程序，张小龙将小程序定位为一款即用即走的轻量级应用。小程序作为一款区别于 PC 端和
APP 端的新物种，借助于微信的海量用户，更适合于连接线下用户。对于中小型的传统线下零售行业，在新零售电子商务的第二次冲击下，小程序定位为其参与到这场变革提供了重要的技术驱动力。
1.3论文的主要研究工作
本文研究的购物系统主要是针对社区居民的在线购物系统。结合社区小型实体店的新型零售，实现覆盖周边地区的线上线下销售模式，拓展销售渠道。该系统由后台服务器、微信applet购物客户端和数据管理系统组成。由于系统中有很多系统模块，本文的主要工作是设计和实现微信applet客户端与后台服务的交互以及数据库设计。结合微信applet技术的购物系统旨在将联通社区商店的线上和线下购物方式结合起来。用户可以到商店购买商品，亲自检查产品的外观和质量，然后满意后购买并离开。如果用户是在商店购物不方便,用户还可以获得微信applet的商店,并通过小程序购买微信小程序网上购物购物系统客户端,完成整个购物流程的浏览产品,将产品添加到购物车,订单和结算,和用户帐户信息,可以修改送货地址,订单信息可以在小程序购物系统的个人信息管理页面上查看。
根据以上要求，整个微信applet购物系统项目采用B2C架构，开发方法采用服务器、客户端和数据管理的架构模式。服务器使用ThinkPHP5和MySQL。
构建REST API;客户端实现微信applet，通过向服务器API发送http通信请求，获取函数通信数据;数据管理系统作为管理人员或操作人员的数据管理后台，并传递给服务器。请求数据来管理产品信息、订单数据和状态。
本文的主要工作是在微信applet购物客户端系统中获取用户信息，产品信息(包括广告产品、特殊产品、新品如商品)，产品分类检索，购物车功能，订单支付功能。、个人信息管理功能(电话、地址管理等)、订单管理功能等。本文重点研究了商品信息显示模块、商品分类检索模块、购物车模块、订单支付模块、个人信息管理模块和数据库设计六个模块的设计与实现。

第二章 系统相关技术研究
2.1 微信小程序
微信applet是一种连接用户和服务的新方法。这个小程序为用户提供了一种轻量级的服务，您只需动动手指就可以使用它。主要体现在用户获取小程序、使用小程序的服务理念上。用户可以扫描与小程序代码关联的在线或公共号码来获得applet应用程序，也可以在微信发现页面上搜索小程序。由于小程序的整个文件占用很小的内存空间，所以用户下载并安装小程序。它几乎是听不清的，所以从用户那里得到applet到点击开始是非常快的。小程序的多入口接入和生命终结体验，降低了设备传播和获取用户的成本，可以实现原生APP的基本功能，更适合商店线下生活服务类和非急需的低频。应用程序。MINA框架是微信团队为小型程序开发提供的框架名称。MINA框架通过封装微信客户机提供的文件系统、网络通信、任务管理和数据安全的基本功能，为上层提供了一组PHPScript api。使用微信客户机提供的各种基本功能和功能快速构建应用程序非常方便。简而言之，MINA实际上是一组工具的集合，使开发微信applet变得很容易。
框架提供了自己的特定于视图层的描述语言WXML、WXSS和基于PHPscript的逻辑层，并提供了视图层和逻辑层之间的数据传输和事件机制。这种数据传输和事件机制是一个响应用户交互的数据绑定系统，使得数据和视图保持同步非常简单。当您需要更新页面数据时，您只需要调用逻辑层的相应方法将结果返回给视图层。
2.2 系统功能总体功能分析
在分析网购和购物基本需求的基础上，对比分析了手机购物app和PC购物微信小程序的主要功能模块。小程序开发与设计的三大原则:从功能上讲，小程序要比原生APP更加单一;applet coin原生app更简洁;在使用场景上，applet应该比原生app更加明确。这个小程序购物系统的主要定位是在线购物渠道，对于传统的面向社区的小商店来说，在线购物渠道易于传播和使用。基于小程序的主要定位，小程序应该与线下商店相结合，为用户提供更清晰的主题。购物服务将与购物无关的不必要的功能模块最小化，为用户提供方便快捷的使用体验。根据上述分析,小程序购物系统的业务逻辑模块分为用户登录、产品信息显示、分类检索产品,购物车,订单付款、个人信息管理功能模块,整个系统功能模块如下图所示,本章详细需求分析将为每个功能模块执行。