基于微信平台的微商城小程序的设计与实现

基于微信平台的微商城小程序的设计与实现Designandimplementationofwechatmallappletbasedonwechatplatform的普及让人与人之间的联系变得更加紧密和方便，这其中离不开QQ和微信的功绩。这两年微信小程序的出现，催生了一大批被称为“微商”的群体。他们通过微信售卖商品，在其中赚取差价以补贴家用。小程序有一套自己的开发工具，且与其他前端开发语言相同，并且封装了许多Api供开发者使用，这大大降低了小程序的开发难度。本文使用node.js开发效劳器，使用MySql作为数据库支持，微信开发者工具作为开发工具，使用与前端开发几乎一致的语言，对HTML加以修改和封装生成了自己的组件，再配合JS和CSS生成四个文件，采用MVVM开发模式，每个文件负责自己的部门功能。关键词：电商微信小程序Node.jsMySqlHTMLCSSJSVueabstractWiththepopularityanddevelopmentoftheInternet,onlineshoppinghasgraduallyemerged,whichhasgivenbirthtomanye-commercegiants.Thepopularityofmobilephonesmakestheconnectionbetweenpeoplemorecloseandconvenient,whichisinseparablefromQQandwechat.Inthepasttwoyears,theemergenceofwechatappshasspawnedalargenumberofgroupsknownas"wechatmerchants".Theysellgoodsthroughwechat,inwhichtheyearnthedifferencetosubsidizetheirfamilies.Theapplethasitsowndevelopmenttool,whichisthesameasotherfront-enddevelopmentlanguages,andencapsulatesmanyAPIsfordevelopers,whichgreatlyreducesthedevelopmentdifficultyoftheapplet.Thispaperusesnode.jsdevelopmentserver,MySQLasdatabasesupport,wechatdevelopertoolasdevelopmenttool,andalmostthesamelanguageasfront-enddevelopmenttomodifyandencapsulateHTMLtogenerateitsowncomponents,thenwithJSandCSStogeneratefourfiles,usingMVVMdevelopmentmode,eachfileisresponsibleforitsowndepartmentfunctions.Keywords:OnlineretailersWechatappletNode.jsMySqlHtmlCssJsVue目录第一章绪论11.1开发背景11.2所选题目意义与目的21.3研究现状21.4本文研究内容3第二章关键技术介绍42.1Node.Js42.2mysql42.3vue42.4HTML52.5JS52.6CSS52.7小程序开发者工具5第三章系统分析73.1微商城小程序设计思路73.2数据表7第四章系统实现124.1购物流程124.2开店流程134.3商城首页134.4发现页面144.5购物车154.6我的164.7商品详情174.8订单确认页面184.9添加地址、选择地址194.10地址列表204.11订单支付及密码输入214.12我的订单224.14店铺菜单及查看店铺资料254.15发布商品264.16效劳器26第五章系统测试295.1微信授权与微信号绑定295.2商品列表和详情测试305.3购物车测试315.4购物车单商品和多商品结算325.5添加地址和地址选择325.6订单测试33参考文献35致谢36第一章绪论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.1Node.JsNode.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.2mysqlMySQL是一款开源的关系型数据库系统；目前已经成为最为流行的数据库系统之一，并且逐步的向原有商业数据库的市场进军。可以看到Yahoo、Google、Facebook、网易等许多大型公司都在使用MySQL数据库作为主要数据库，甚至将MySQL作为核心应用的数据库系统。2.3vue过去的十年，我们的网页变得更加动态化和强大，是因为有JavaScript，我们已经把很多传统效劳端代码放到浏览器中这样就产生了成千上万行的JavaScript代码，他们链接了各种各样的HTML和CSS文件[4]，但缺乏正规的组织形式，这也是为什么越来越多的开发者使用JavaScript框架，而vue就是当下较为流行的一个。Vue框架是一套用于构建用户界面的渐进式框架。Vue[2]的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有工程整合。Vue使用js的方式写HTML，在一定程度上减少了许多重复的代码，大大提高代码编写速率；其中典型的有v-for用与循环生成代码；v-if用来判断是否显示元素；与v-show相比一个是存在看不见不占位置；一个是完全不存在；v-model多用户获取input中的输入内容；2.4HTMLHTML是建造网站的砖石，是构建网站的根底，常用的标签有<div></div>元素，块级元素的代表，即默认占据一行,与前后元素不在一行；<span></span>元素，行内原色的代表，即如果前后有一个同样是行内元素的元素，那么会在一行中显示不会换行，行内元素设置宽高不生效，可以使用display属性修改；<a></a>元素，用户页面的跳转，自带触发样式，只需要一个地址，就可以跳转到互联网中的任何一个页面，相当好用；2.5JSJavaScript

是一门跨平台、面向对象的脚本语言。它是网页交互必不可少的东西；没有Javascript的网站是死的，没有灵魂的，只有参加了Javascript才能赋予网站灵活，使其有生命，完成各种动作和交互；他可以动态的改变HTML标签，也可以根据用户操作改变CSS样式。总之javascript是HTML的灵魂。Javascript可以在网站运行时做很多HTML做不了的事情；比方获取用户输入并传递给后台，再将后台返回的东西展示给用户；2.6CSSCSS是层叠样式表(英文全称：CascadingStyleSheets)。是用户将HTML中的标签按想要的方式排布的工具；如果将HTML比喻为原料，那么CSS就是模具，用来规定HTML的展示；它功能强大，可以使用动画，做出意想不到的效果；简单实用是它的一大特色；2.7小程序开发者工具微信小程序，小程序的一种，英文名MiniProgram。是一种比APP更小更快捷的应用，它不需要下载就可以安装使用的。它实现了程序“触手可及”的梦想，用户使用微信扫一扫或者搜一下即可翻开相应的应用。还可以使用分享好友和公众号跳转、app跳转的方式进入小程序并到达小程序的指定页面。这相当于将所有小程序整合到一个工程中，在页面中跳转。做到了即是单独的个体又是一个整体。微信小程序开发者工具提供了一个简单、高效、易学易用的应用开发框架及丰富的组件和API。这有极大的减少了开发难度和增大开发效率。小程序使用的开发语言主要是JavaScript，小程序的开发流程和普通的网页开发相似。对于长期从事前端开发的工作人员而言，从网页开发迁移到小程序的开发门槛并不高，但是二者又有些许的区别。第三章系统分析3.1微商城小程序设计思路小程序是一个高并发，高反响的一个程序。效劳器的反响速度直接影响的用户体验。由于小程序的分包大小最大为2M，总包大小不得超过12M。所以除了代码，其余的东西都需要实时的从效劳器获取，所以效劳器的性能直接的影响着用户的使用体验。所以我选择了单线程高并发的node.js作为效劳器开发语言。他相比其他如php、java等同时处理的请求数量能成倍的增长，速度也是飞快。每接受到一个请求都会使用100%的资源去完成，所以每一个请求都是在一瞬间内完成。用户从进入小程序，无时无刻不在向效劳器发送着请求，进入时下载包，加载时获取数据和图片，浏览时反响用户操作等等。用户可以浏览商品，搜索商品，参加购物车，生成自己的订单。也可以自己开店发布商品，管理商品，售卖商品，从中获取利润。商家的申请及商品的发布都可以在总后台中查看，在后台添加商品的分类及品牌后，店主就可以选择与商品对应的品牌及分类，这在商品发布后，用户搜索商品是非常用用的。用户可以根据商品名称、商品分类、商品所属品牌进行关键词搜索，还可以搜索店名等关键字。用户浏览过的商品和店铺都能在“我的记录”中找到。我的功能包括：我的订单〔全部订单、待付款、已付款〔待发货〕、待收货〔已发货〕〕、我的收藏〔收藏的商品、收藏的店铺〕、我的足迹〔浏览过的商品和店铺〕；我的店铺：立即发布商品、查看已发布的商品类表，被用户参加购物车的商品、用户生成订单未待付款的商品、用户已付款的商品、我已点击发货的商品、用户已收货的商品、用户已评价的商品、修改店铺信息等功能；3.2数据表用户信息表：用于存储用户填写的个人信息及修改记录。结构如下表：表3-1用户信息表名称类型长度小数点非空主键备注user_idInt2550非空1用户idopenidvarchar2550非空2微信唯一标识符passwordvarchar2550非空登录密码phonevarchar2550非空号码(账号)ava_imgvarchar2550非空头像gendervarchar2550非空性别,1男2女birthdayvarchar2550非空生日walletvarchar2550非空钱包余额payPasswordvarchar2550非空支付密码create_timevarchar2550非空注册时间用户地址信息表：主要用来存放用户添加的收货人信息与收货地址信息。结构如下表：表3-2用户地址表名称类型长度小数点非空主键备注 add_idInt2550非空1地址iduser_idInt2550非空2用户idadd_namevarchart2550非空收货人名称add_phonevarchar2550非空收货人add_detailvarchar2550非空详细地址add_fullvarchar2550非空全地址provincevarchar2550非空省cityvarchar2550非空市areavarchar2550非空区is_defaultvarchar2550非空默认地址,add_timevarchar2550非空创立时间地址数据表。结构如下表：表3-3地址数据表名称类型长度小数点非空主键备注address_idInt2550非空1地址idparent_namevarchar2550非空上级名称parent_codevarchar2550非空上级idself_namevarchar2550非空当前名称self_codevarchar2550非空当前idtypevarchar2550非空类型,0省,1市,2区商品品牌列表,与商品分类表关联。结构如下表：表3-4商品品牌表名称类型长度小数点非空主键备注brand_idInt2550非空1品牌idclass_idInt2550非空2分类idtextvarchar2550非空品牌名称购物车数据表与用户表、商品表关联。结构如下表：表3-5购物车数据表名称类型长度小数点非空主键备注cart_idInt2550非空1购物车iduser_idInt2550非空2用户idgoods_idInt2550非空2商品idcart_numInt2550非空参加数量cart_priceFloat2552非空参加单价cart_changvarchar2550非空最新修改时间商品分类表,与商品品牌表关联，结构如下表：表3-6商品分类表名称类型长度小数点非空主键备注class_idInt2550非空1分类idtextvarchar2550非空分类名称商品收藏表,存储用户添加收藏的商品。关联商品表和用户表。结构如下表：表3-7用户收藏的商品表名称类型长度小数点非空主键备注collect_idInt2550非空1收藏iduser_idInt2550非空2用户idgoods_idInt2550非空3商品idcreate_timeDatetime2550非空收藏时间商品评论表,与用户表、商品表关联。结构如下表：表3-8商品评论表名称类型长度小数点非空主键备注Comment_idInt2550非空1评论idUser_idInt2550非空2用户idGoods_idInt2550非空3被评论商品idUser_avaImgVarchar2550非空评论者头像User_nicknameVarchar2550非空评论者昵称Comment_textVarchar2550非空评论内容Comment_imgVarchar2550非空评论图片Comment_timedateTime2550非空评论时间商品表,关联商家表。结构如下表：表3-9商品表名称类型长度小数点非空主键备注goods_idInt2550非空1商品idstore_idInt2550非空2商铺idcreatetimeDatetime2550非空上架时间goods_namevarcahr2550非空商品名称goods_descvarcahr2550非空商品介绍goods_brandvarcahr2550非空商品品牌goods_classifyvarcahr2550非空商品分类goods_imagesvarcahr2550非空商品图片goods_pricefloat2552非空商品价格goods_flash_priceFloat2552非空商品折扣价goods_send_priceFloat2550非空满多少包邮goods_sales_volumeInt2550非空商品销量goods_paymentsint2550非空商品购置人数商品订单表,关联地址表、用户表、商品表、商铺表。结构如下表：表3-10商品订单表名称类型长度小数点非空主键备注order_idint2550非空1订单iduser_idInt2550非空2用户idstore_idInt2550非空3商品idaddress_idInt2550非空4地址idorder_note2550非空下单备注order_createtime2550非空下单时间order_goods_idInt2550非空5商品idorder_pay_priceFloat2552非空付款价格order_total_numInt2550非空商品数量order_statusInt2550非空订单状态after_sellInt2550非空售后,0非,1是order_pay_timeDatetime2550非空付款时间order_send_dateDatetime2550非空发货时间order_take_timeDatetime2550非空收货时间is_commentint2550非空是否已评论商铺表、关联用户表。结构如下表：表3-11商铺表名称类型长度小数点非空主键备注store_idInt2550非空1商品iduser_idInt2550非空2用户idstore_imgvarcaar2550非空商铺图片store_createtimeDatetime2550非空创立时间store_phoneVarcaar2550非空I联系store_concat_nameVarcaar2550非空身份证名称store_concat_IDVarcaar2550非空身份证号store_nameVarcaar2550非空商铺名称store_provinceVarcaar2550非空省store_cityVarcaar2550非空市store_areaVarcaar2550非空区store_address_detialVarcaar2550非空详细地址store_sell_numInt2550非空商品总销售数量store_goods_numint2550非空上架商品数量第四章系统实现4.1购物流程1、翻开小程序，可先体验小程序功能后选择授权登录，登录后会生成一个用户。2、选择心仪的商品，立即购置〔或将多个商品添加到购物车，在购物车中统一付款〕，在确认订单页中需要填写收货地址、联系人、姓名等信息。3、信息确认后，到达付款页，付款成功后到达已付款一面；4、待商家发货后，用户可选择收货，收货后的订单可以发表评价和申请售后。至此，完成一个简单的购物流程；4.2开店流程1、用户授权后，仅做为一个普通用户使用小程序，在我的页面有一个我要开店按钮；2、点击“我要开店”，按照要求填写：店铺名称、开店人姓名、开店人身份证号、店铺地址等信息并提交即可生成自己的店铺；3、点击“发布商品”，按提示添加商品图片、商品名称、商品描述、选择商品分类、商品所属品牌等必要信息，点击”发布“；4、客户购置商品后，可在我的店铺订单中查看已售出商品，并为商品发货；5、商品发出后，由用户点击收货，收货完成后，当前订单交易完成；4.3商城首页由两个控件组成，上方使用最受欢送的轮播图，每一张轮播图携带一个热销商品的id，点击后可跳转至指定商品详情页；下方使用商品列表组件，触底加载，每次加载10条数据，加载和没有更多商品都有提示，使用户知道当前在执行的操作，增加用户使用体验；点击商品跳转至对应的商品详情页；图4-1商城首页(加载中)图4-2商城首页(没有跟多数据了)4.4发现页面可搜索商品名称、商品分类、商品品牌、商铺名称。每次搜索后自动保存搜索记录，下次进入时通过缓存获取搜索记录，方便用户搜索内容图4-3发现(首次搜索)图4-4发现(搜索结果)图4-5发现(二次搜索)4.5购物车勾选商品时，自动计算商品价格及数量；每勾选一个商品，都计算一次总金额和选中的商品数量，当购物车中的最后一个商品被选中时，触发全选事件，选中全选按钮；当其中任何一个商品取消勾选时，全选按钮跟着取消勾选；点击全选按钮时，所有商品与全选按钮状态一致；选择商品后，可以点击“结算”按钮，到达订单确认页面；此时，所有选中的商品将从购物车中删除；如果在订单确认中点击了返回，选中商品将变为待付款状态；假设付款成功，那么变为已付款订单，等待商家发货即可；也可以点击右上角“编辑”按钮，进入购物车编辑状态，在编辑状态时，可以对勾选的商品进行“全部收藏”和“全部删除”操作；选择收藏后，所有商品将被收藏，已收藏商品不受影响；选择删除后，选中商品将从购物车中移除；图4-6购物车〔选中购物车中的局部商品〕图4-7购物车〔选中购物车中的所有商品〕图4-8购物车〔编辑状态〕图4-9购物车〔编辑状态-删除商品〕4.6我的首次进入，需要用户授权，获取微信信息进行用户注册；之后进入，不需要授权即可自动获取用户微信信息即可实现登录；授权方式为，用户点击“注册/登录”按钮，触发开发者工具api，弹出授权框，点击“允许”后，监听成功方法，将其中携带的“code”参数发送至后台，后台将code通过微信预留链接换取“微信用户唯一标识符”，以此创立用户；授权登录后，根据用户信息判断用户是否已开通店铺功能；如果没有开通，仅显示“我的”和“我要开店”操作；如果用户已经开通店铺，那么增加显示对店铺的错作接口；图4-10我的〔未授权登录状态〕图4-11我的〔授权登录〕图4-12我的〔已登录-未开通商铺〕图4-13我的〔已登录-已开通商铺〕4.7商品详情点击任意商品，都可以跳转至商品详情页；在商品详情页面中需要显示的信息包括：商品轮播图、商品信息、价格、商品销量、店铺信息等，已卖出的商品有商品销量和购置人数，被评论或的商品可显示评论列表。在商品详情中点击轮播图，可以预览商品图片；点击“进店逛逛”可以查看当前商品所属店铺的全部商品；点击“收藏商品”可以将商品收藏，并在“我的-我的收藏”中查看商品；点击“参加购物车”，将当前商品参加购物车。参加成功后，可在“购物车”页面中以列表的形式将已添加到购物车的商品展示给用户，每次获取十条数据，用户下滑触底后判断是否有跟多数据，有那么继续加载，没有那么提醒用户没有更多数据了；点击“立即购置”，会先将当前商品参加购物车，然后从购物车中取得该商品在购物车中的id，并生成一条代付款订单，后台返回该订单信息，并显示在“确认订单”页面；图4-14商品详情〔未收藏商品〕图4-15商品详情〔已收藏商品〕4.8订单确认页面订单确认页面，可以从商品详情页底部点击“立即购置”进入，也可以从购物车中选择一个或多个商品点击底部“结算”进入订单确认页面，此页面将根据当前订单的商品数量显示订单中的商品列表；进入此页面时，会获取订单信息、当前用户的地址列表；假设地址列表存在且设置了默认地址，那么使用默认地址；没有设置默认地址那么使用地址列表中的第一个地址做为默认地址。假设地址列表为空，那么“显示暂无地址”在提交订单时，会判断是否有地址，没有地址无法提交订单，需要先添加地址；无地址时点击，到达添加地址页面，添加的地址自动设置为默认地址；有地址时，点击到达地址列表，可修改默认地址；点击“确定”时，将订单id及地址id传到后台进行订单和地址的绑定；图4-16确认订单-单商品无地址图4-17确认订单-多商品结算4.9添加地址、选择地址 添加地址页面，可以从确认订单页面中无地址时点击“添加地址”进入、有地址时点击地址，进入地址列表再点击“添加地址”进入；也可以直接到我的-设置-我的地址-添加地址进入； 地址信息包括：收货人姓名、收货人联系、省市区及详情地址、默认地址为可选项；提交信息时判断所有必填信息是否以填写，未填写提示用户填写。都填写完成后，提交数据到后台，进行数据保存；图4-18添加地址图4-19添加地址-选择省市区4.10地址列表进入页面，获取我的地址列表；可对地址进行删除、编辑和设为默认地址操作；默认地址即每次购物自动选择的地址；删除地址时，提示用户是否要删除，用户点击确定后，将选中的地址id传给后台，后台根据id将地址信息删除；点击编辑时，将选中的地址id传递至“添加地址”页面，页面接收到id，通过接口从后台获取当前地址的信息，并显示到页面中。用户可自由修改所有信息。点击“设为默认”，将选中地址id传递至后台，后台将当前用户的所有地址项设为非默认地址，再将根据上传的id找对应的地址设置为默认地址，以此实现默认地址的替换；图4-20地址列表图4-21地址列表-删除地址4.11订单支付及密码输入此页面可由“确认订单”页点击“确认”进入，进入时传递订单id；进入页面后，通过订单id从后台中后去订单价格；用户可通过余额支付，并输入密码完成支付；支付密码为六位数，当用户输入六位数字后，将订单id和用户输入的密码传递给后台，后台判断密码是否正确。不正确返回错误信息；正确后，从用户余额中减去当前商品的价格，并将该订单设置为已付款订单；图4-22付款页面图4-23付款-密码输入4.12我的订单图4-24我的订单-全部订单图4-25我的订单-待付款图4-26我的订单-已付款图4-27我的订单-待收货图4-28我的订单-待收货-收货图4-29我的订单-已收货图4-30我的订单-待收货-收货图4-31我的订单-发布评论已收货商品可以执行删除订单操作，删除后将不再显示,后台中仍保存记录；收货后可对当前订单发表评论，评论内容包括：评语、图片、与描述相符、配送效劳、效劳态度等；4.13开店页面。图4-32填写店铺信息图4-33开店成功进入页面自动获取用户当前地址信息并显示于页面上，用户需要按要求填写店铺图片、店铺名称、开店人真实姓名、身份证号码、店里、店铺地址等信息，填写完成后提交即可完成开店操作；完成开店后，我的页面显示店铺订单管理选项；4.14店铺菜单及查看店铺资料`图4-34店铺菜单图4-35修改店铺信息4.15发布商品图4-36发布商品需要填写商品图片，商品名称、商品描述、商品价格、折扣价〔选填〕、商品分类、商品品牌等4.16效劳器使用phpstudy与NavicatforMySql配合搭建本地效劳器和数据库连接。使用node.js架设局域网可访问的效劳器；使用nodemon运行效劳器，每次更改或报错后自动重新运行，拟补了node.js单线程，报错后不运行的缺点，保证了单个错误不影响整个效劳器的运行和使用。允许跨域请求，方便调试接口。配置数据库参数，为后面的数据库连接提供链接参数；图4-37设置请求跨域开启一个局域网效劳器，使局域网内可访问效劳器及查询数据库信息。图4-38开启一个局域网效劳器将同类接口分类存放于不同的文件，方便管理和排查错误；主要包括商品接口、用户接口、地址接口、商铺接口、订单接口等；图4-39各个接口模块图4-38开启一个局域网效劳器封装查询数据库方法，这样做的好处的方便查询数据；每次调用发起新的数据库连接，查询成功返回后，断开连接；这样做的好处是分开各个请求，即能节省资源，当一个查询出错后不影响其他查询。第五章系统测试5.1微信授权与微信号绑定测试结果如下：表5-1微信授权及微信号绑定测试测试项操作步骤预期结果数据实际结果结果比拟说明微信授权与用户绑定1进入小程序，点击“我的”进入我的页面；2、点击“授权注册/登录”；3、点击“立即登录”；4、点击“允许”，完成授权；5、授权成功后，提交用户微信信息及code到后台；后台将code提交微信提供的接口换取用户唯一标识符，并保存用户信息；每个微信号都可正常授权，授权成功后，提交用户微信信息及code，由后台添加用户；每个微信号有唯一的标识符，作为区分用户的标识；与预期结果一致新用户的添加功能正常二次进入授权登录1进入小程序，点击“我的”进入我的页面；2、点击“授权注册/登录”；3、点击“立即登录”；4、点击“允许”，完成授权；5、授权后提交code，后台根据code换取回来的唯一标识符，查找数据库并返回用户信息；用户授权后返回用户已存在的信息；每个微信号有唯一的标识符，作为区分用户的标识；与预期结果一致用户数据的获取正常5.2商品列表和详情测试测试结果如下：表5-2商品列表和详情测试测试项操作步骤预期结果数据实际结果结果比拟说明获取商品列表，触底加载更多1、进入小程序“热销商品页面”，显示商品列表；2、下滑触底后，加载更多商品；1、显示商品列表、每页10条；2、每次触底后再获取10条数据；无与预期结果一致商品列表，加载更多可正常使用；商品详情在商品列表中，随意点击多个商品；页面中需要展示商品图片、商品名称、商品描述、商品价格、是否包邮等数据；底部显示类似商品类表；无与预期结果一致商品详情页能正常显示商品信息和相似商品5.3购物车测试测试结果如下：表5-3购物车模块测试测试项操作步骤预期结果数据实际结果结果比拟说明添加商品到购物车1、随意选择多个商品；2、进入商品详情页后，点击参加购物车；1、点击参加购物车后，会提示参加成功；2、在购物车中增加相应的商品；无与预期结果一致参加购物车功能可正常使用；在购物车中修改商品数量1、进入购物车；2、为某个商品增减商品数量1、点击增加按钮，商品数量加一，合计价格和商品数量自动增加；2、当商品水量大于一时显示减少按钮；3、当点击减少按钮时，商品数量及合计价格自动减少；4、当商品数量等于一时，隐藏减少按钮；无与预期结果一致购物车中商品数量可自由增减，总价及总商品数量自动计算；批量收藏或删除购物车1、点击右上角“编辑”按钮，切换购物车状态；2、选择需要操作的商品后，点击“收藏”或“删除”按钮。1、选择全部商品后，全选按钮自动勾选；2、勾选商品并点击收藏，收藏所有勾选的商品，并提示“收藏成功”；3、勾选商品并点击“删除”按钮，将所有勾选的商品从购物车中移除，并提示“移除成功”无与预期结果一致购物车中商品能批量收藏或移除；5.4购物车单商品和多商品结算测试结果如下：表5-4购物车单商品和多商品结算模块测试测试项操作步骤预期结果数据实际结果结果比拟说明单商品结算1、添加商品到购物车；2、勾选一个商品，点击“结算”；选择商品并点击结算后，生成一个待付款订单；付款后变为已付款订单；购物车中选择单个商品与预期结果一致购物车能结算单个商品多商品结算1、添加多个商品到购物车中。2、选中多个商品，点击“结算”确认订单页显示选中的所有商品，并计算总价；生成多个待付款订单；付款成功，生成的订单转为已付款订单；购物车中选择多个商品与预期结果一致购物车能一次结算多个商品，生成多个订单；5.5添加地址和地址选择测试结果如下：表5-5购添加地址和地址选择模块测试测试项操作步骤预期结果数据实际结果结果比拟说明添加地址1、进入确认订单页面；2、无地址时点击“添加地址”；3、进入添加地址页面，填写信息并提交；根据用户选择动态加载地址数据，所有数据填写并提交后，为当前用户增加一条地址信息；全国省市区地址信息与预期结果一致可以正常添加地址；选择默认地址1、进入添加地址页面