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

《基于微信平台的微商城小程序的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于微信平台的微商城小程序的设计与实现.doc（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、本科毕业设计（论文） 基于微信平台的微商城小程序的设计与实现 Design and implementation of wechat mall applet based on wechat platform 院 （系）计算机学院专 业软件工程班 级软工6班学 号15210120605学生姓名欧阳俊杰指导教师 商丽娟提交日期2020年 04 月 15 日毕业设计（论文）原创性声明本人郑重声明：所呈交的毕业设计（论文），是本人在指导老师的指导下，独立进行的设计（研究）工作及取得的成果，论文中引用他人的文献、数据、图件、资料均已明确标注出，论文中的结论和结果为本人独立完成，不包含他人已经发表或撰写的

2、作品及成果。对本文的研究作出贡献的个人和集体，均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承担。毕业论文作者（签字）： 签字日期： 年 月 日 成绩评定成绩项论文成绩（百分制）折合比例实得成绩（折合分）指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩系主任签字（盖章）： 年 月 日摘要随着网络的普及和发展，网络购物逐渐兴起，由此催生了许多的电商巨头。手机的普及让人与人之间的联系变得更加紧密和方便，这其中离不开QQ和微信的功劳。这两年微信小程序的出现，催生了一大批被称为“微商”的群体。他们通过微信售卖商品，在其中赚取差价以补贴家用。小程序有一套自己的开发工具，且与其

3、他前端开发语言相同，并且封装了许多Api供开发者使用，这大大降低了小程序的开发难度。本文使用node.js开发服务器，使用MySql作为数据库支持，微信开发者工具作为开发工具，使用与前端开发几乎一致的语言，对HTML加以修改和封装生成了自己的组件，再配合JS和CSS生成四个文件，采用MVVM开发模式，每个文件负责自己的部门功能。关键词：电商 微信小程序 Node.js MySql HTML CSS JS VueABSTRACTWITH THE POPULARITY AND DEVELOPMENT OF THE INTERNET, ONLINE SHOPPING HAS GRADUALLY EM

4、ERGED, WHICH HAS GIVEN BIRTH TO MANY E-COMMERCE GIANTS. THE POPULARITY OF MOBILE PHONES MAKES THE CONNECTION BETWEEN PEOPLE MORE CLOSE AND CONVENIENT, WHICH IS INSEPARABLE FROM QQ AND WECHAT. IN THE PAST TWO YEARS, THE EMERGENCE OF WECHAT APPS HAS SPAWNED A LARGE NUMBER OF GROUPS KNOWN AS WECHAT MER

5、CHANTS. THEY SELL GOODS THROUGH WECHAT, IN WHICH THEY EARN THE DIFFERENCE TO SUBSIDIZE THEIR FAMILIES. THE APPLET HAS ITS OWN DEVELOPMENT TOOL, WHICH IS THE SAME AS OTHER FRONT-END DEVELOPMENT LANGUAGES, AND ENCAPSULATES MANY APIS FOR DEVELOPERS, WHICH GREATLY REDUCES THE DEVELOPMENT DIFFICULTY OF T

6、HE APPLET.THIS PAPER USES NODE.JS DEVELOPMENT SERVER, MYSQL AS DATABASE SUPPORT, WECHAT DEVELOPER TOOL AS DEVELOPMENT TOOL, AND ALMOST THE SAME LANGUAGE AS FRONT-END DEVELOPMENT TO MODIFY AND ENCAPSULATE HTML TO GENERATE ITS OWN COMPONENTS, THEN WITH JS AND CSS TO GENERATE FOUR FILES, USING MVVM DEV

7、ELOPMENT MODE, EACH FILE IS RESPONSIBLE FOR ITS OWN DEPARTMENT FUNCTIONS.Keywords: Online retailers Wechat applet Node.js MySql Html Css Js Vue 目 录第一章 绪论11.1开发背景11.2所选题目意义与目的21.3研究现状21.4本文研究内容3第二章 关键技术介绍42.1 Node.Js42.2 mysql42.3 vue42.4 HTML52.5 JS52.6 CSS52.7 小程序开发者工具5第三章 系统分析73.1 微商城小程序设计思路73.2 数

8、据表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广东东软本科毕业设

9、计（论文）第一章 绪论1.1开发背景 网络购物的快速发展，催生了许多的电商平台。云的的淘宝、刘强东的京东、张近东的苏宁易购、黄峥的拼多多等等等。其中崛起最快，发展最迅速的当属拼多多。拼多多依托微信庞大的用户群体，迅速的扩张用户量，它的拼团砍价策略，鼓励用户分享传播，而分享和传播的途径正是微信小程序，无论是从App分享还是小程序中的分享，最终都打开了拼多多的小程序。小程序有三大特点：用完即走，触手可及，不用安装和卸载；正是这三大特点，给小程序的迅猛发展提供了支持。微信小程序对中小企业来说，开发成本低，尤其是有专门开发小程序的公司，对于小程序的开发熟练且有框架可用，无需自己封装，而且企业能借助微信

10、平台获得较大的流量。小程序不需要单独的APP推广、运营和开发。小程序提供了许多的接口，比如大家每天都在使用的扫一扫功能，拍照功能，付款功能等，这些功能都是在微信的使用过程中经常用到的功能，同样的也可以在小程序中使用。减少了开发时间和成本的同时，还能不改变用于的使用习惯，这是其他程序不能轻易做到的。气候的多变，和环境的不稳定因素，使人们对外出有了一定的抗拒。天南地北的网购，商品的真伪和路途的消耗及退货的艰辛也使得电商的发展到了瓶颈期。越来越多的假冒伪劣产品也使人们对电商有了一些抵触情绪。不能很快的见到产品，不能很好的处理退换货，更是使人很开始对网购冷落。这是一个危机，也是一个商机。我认为只是一个

11、商机，一个实体店反击电商的大商机。当然这还是需要依赖网络，网络的宣传效果是不言而喻的，在现代社会，没有任何一个人能离了网络独自生活。没了网络犹如与世隔绝般痛苦是如今许多年轻人的正是写照。网购虽好，却解决不了紧急问题。正因为如此，我想开发一款优先服务周边，再向外扩展的基于微信小程序的快捷程序。小程序的开发，使用于微信自主研发的开发工具：“微信开发者工具”，也可以使用第三方的开发工具如Hbuilder进行开发，开发完成后再打包成小程序，通过“微信开发者工具”上传即可。他使用与前段开发一样的语言，与主流的开发框架Vue有异曲同工之妙，自带丰富的Api供开发者使用，大大降低了开发者的工作量和开发难度。

12、1.2所选题目意义与目的随着社会的发展，网络时代的来临，手机使用的普及，交通的发达。网上的交易比传统交易更加具有优势，因为网上的交易更加便捷，动动手指滑动一下手机，就可以浏览全国各地的商品，只要看到想要心仪的商品，直接点击购买下单付款，剩下的就交给物流。我们只需要在家耐心的等待快递小哥的电话。这在一开始还是非常受欢迎的，在网上商品数量成倍增长的同时，残次品的数量也在增多，并且受季节、天气、节日等的影响，许多时候人们需要长时间的等待才能拿到商品。经过等待，拿到商品后，早已没了当初下单时的喜爱和冲动。为此电商的解决办法是布置更多的仓库和物流点，增加物流车辆以此解决路上消耗的时间，这样做的同时也增加

13、了成本。所以，为何不开发一款软件，让商家优先服务于周边，设定一个服务圈，圈内实时送达，圈外快递物流。优先为用户展示附近商家及产品，让用户能在最短的时间拿到商品，甚至用户可以根据地址自行到店选取。一方面给店家做了宣传增加了人流量，不管开在哪里，在网上都是一样的人流访问量，可以减低商家的开店成本，成本的降低意味着利润的增加，增加的利润可以反馈回用户，使双方都可获利。 1.3研究现状根据2018年3月的数据显示，微信的用户量已经超过10亿。2017年小程序上线后，当月用户量仅有200万。之后随着后期小程序的不断更新，增加更多的开放入口，包括用户通过分享到好友和朋友圈，公众号跳转等多个入口，使得小程序

14、用户开始不断上升。在2017年12月以“跳一跳”为代表的的微信小程序正式上线后，小程序迅速走入人们的视野，用户量也开始暴涨，数据显示当月微信小程序的用户达到了4亿之多。在小程序不断的更新中，小程序的使用场景也开始不断的增加，覆盖范围越来越广，小程序的用户人群也有形成趋势。随着小程序的发展和使用人群的增多，许多电商平台也相继开发出了小程序版本，拼多多就是最成功的案例之一。得益于小程序的的易传播性，拼多多很快的就在微信群中走红，随便打开一个群都能在其中找到拼多多来过的痕迹。得益于微信平台的持续更新和迭代，相继开发出新的功能，每次更多都给人带来不一样的惊喜。即兼容之前的版本，又增加新的功能，近期就推

15、出了一个直播功能，不需要自行编写代码开发，只需要在管理品台图形界面操控即可实现在小程序中实现直播功能。这大大降低了开发和维护的成本。1.4本文研究内容本文主要研究如何在使用微信小程序，开发多商户微商城。研究思路如下：（1）确定需求。总体需求为：一个微信号为一个用户，每个用户可以使用同一个账号购物和开店。成为用户后，继续申请成为店主，审核通过后即可在商城中发布自己的商品；（2）确定功能。本商城的两个主要功能为商家上架商品和用户购买商品；每一个商品的交易流程都需要经过商家和用户的共同操作完成。商家上架商品、用户浏览并购买商品、商家发货、用户收货及评价，为一个商品的交易流程。（3）研究实现方案。使用

16、微信唯一标识符确定每个用户的唯一性和数据的关联。使用用户id与商铺id实现用户与商品的关联；通过店铺id和商品id实现商铺信息和商品信息的关联；通过用户id和订单id及商品id，实现用户信息和订单信息及商品信息的关联；使用地址id和用户id，实现用户信息与地址信息的关联；使用用户id、商品id和购物车id，实现购物车、用户和商品的关联。（4）页面布局及功能。首页展示商品，默认按销量排序；可增加按价格升降排序、距离远近排序、好评率排序等。发现页面用于查找商品，可查找商品类型、商品品牌、商品名称、商品描述等；购物差页面用户存放用户添加到购物车的商品，可多商品同时下单付款；我的页面用于管理我的数据，

17、如：订单、收藏的商品、收藏的店铺、我的店铺、发布的商品及个人信息等。（5）页面编写。页面使用腾讯提供的“微信开发者工具”及参考“微信小程序开发文档”编写，使用框架提供的API实现分享、选择图片、上传图片、查看图片、页面跳转等功能。（6）数据对接。使用框架自带API实现异步加载数据，局部热更新数据；实时记录用户操作，反馈用户需求；隐藏关键信息如：用户id、店铺id、用户支付密码等，展示页面需要信息如：商品信息、订单信息、店铺信息等；（7）功能测试。测试各个功能是否能正常运行，且能适应各种用户操作，如：下单时，到达付款页后用户未付款，此时应将订单变为待付款订单。购买商品时，用户将购买数量设为0，这

18、个是不被允许的。用户余额不足时，付款应为失败，并提示用户“余额不足导致付款失败”第二章 关键技术介绍2.1 Node.JsNode.js是一个运行与javascript环境中的框架。它让javascript可以开发后端程序，能实现与其他后端语言实现的大部分功能。可以与PHP、Java、Python、NET、Ruby等后端语言平起平坐。3.3.2、node.js的优势Node.js的语法与js的语法几乎一致，可以说学习并使用过javascript的人，学习node.js开发会非常容易。Node.js开拓了Javascript的应用范围，从浏览器到服务器的一大进步。实现前后端编程环境的统一、极大的

19、减少了开发时间和开发成本。Node.js有超高并发的能力，使用单线程非阻塞I/O和事件驱动机制，让Node.js程序在宏观上也是并行的。2.2 mysql MySQL是一款开源的关系型数据库系统；目前已经成为最为流行的数据库系统之一，并且逐步的向原有商业数据库的市场进军。可以看到Yahoo、Google、Facebook、网易等许多大型公司都在使用MySQL数据库作为主要数据库，甚至将MySQL作为核心应用的数据库系统。 2.3 vue 过去的十年，我们的网页变得更加动态化和强大，是因为有JavaScript，我们已经把很多传统服务端代码放到浏览器中这样就产生了成千上万行的JavaScript

20、代码，他们链接了各种各样的HTML和CSS文件4，但缺乏正规的组织形式，这也是为什么越来越多的开发者使用JavaScript框架，而vue就是当下较为流行的一个。Vue框架是一套用于构建用户界面的渐进式框架。Vue2的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue使用js的方式写HTML，在一定程度上减少了许多重复的代码，大大提高代码编写速率；其中典型的有v-for用与循环生成代码；v-if用来判断是否显示元素；与v-show相比一个是存在看不见不占位置；一个是完全不存在；v-model多用户获取input中的输入内容；2.4 HTMLHTML是建造网站的砖石，是构建

21、网站的基础，常用的标签有 元素，块级元素的代表，即默认占据一行,与前后元素不在一行； 元素，行内原色的代表，即如果前后有一个同样是行内元素的元素，则会在一行中显示不会换行，行内元素设置宽高不生效，可以使用display属性修改；元素，用户页面的跳转，自带触发样式，只需要一个地址，就可以跳转到互联网中的任何一个页面，相当好用； 2.5 JSJavaScript是一门跨平台、面向对象的脚本语言。它是网页交互必不可少的东西；没有Javascript的网站是死的，没有灵魂的，只有加入了Javascript才能赋予网站灵活，使其有生命，完成各种动作和交互；他可以动态的改变HTML标签，也可以根据用户操作

22、改变CSS样式。总之javascript是HTML的灵魂。Javascript可以在网站运行时做很多HTML做不了的事情；比如获取用户输入并传递给后台，再将后台返回的东西展示给用户；2.6 CSSCSS是层叠样式表(英文全称：Cascading Style Sheets)。是用户将HTML中的标签按想要的方式排布的工具；如果将HTML比喻为原料，那么CSS就是模具，用来规定HTML的展示；它功能强大，可以使用动画，做出意想不到的效果；简单实用是它的一大特色； 2.7 小程序开发者工具微信小程序，小程序的一种，英文名Mini Program。是一种比APP更小更快捷的应用，它不需要下载就可以安装

23、使用的。它实现了程序“触手可及”的梦想，用户使用微信扫一扫或者搜一下即可打开相应的应用。还可以使用分享好友和公众号跳转、app跳转的方式进入小程序并到达小程序的指定页面。这相当于将所有小程序整合到一个项目中，在页面中跳转。做到了即是单独的个体又是一个整体。微信小程序开发者工具提供了一个简单、高效、易学易用的应用开发框架及丰富的组件和API。这有极大的减少了开发难度和增大开发效率。小程序使用的开发语言主要是 JavaScript ，小程序的开发流程和普通的网页开发相似。对于长期从事前端开发的工作人员而言，从网页开发迁移到小程序的开发门槛并不高，但是二者又有些许的区别。第三章 系统分析3.1 微商

24、城小程序设计思路小程序是一个高并发，高反应的一个程序。服务器的反应速度直接影响的用户体验。由于小程序的分包大小最大为2M，总包大小不得超过12M。所以除了代码，其余的东西都需要实时的从服务器获取，所以服务器的性能直接的影响着用户的使用体验。所以我选择了单线程高并发的node.js作为服务器开发语言。他相比其他如php、java等同时处理的请求数量能成倍的增长，速度也是飞快。每接受到一个请求都会使用100%的资源去完成，所以每一个请求都是在一瞬间内完成。用户从进入小程序，无时无刻不在向服务器发送着请求，进入时下载包，加载时获取数据和图片，浏览时反馈用户操作等等。用户可以浏览商品，搜索商品，加入购

25、物车，生成自己的订单。也可以自己开店发布商品，管理商品，售卖商品，从中获取利润。商家的申请及商品的发布都可以在总后台中查看，在后台添加商品的分类及品牌后，店主就可以选择与商品对应的品牌及分类，这在商品发布后，用户搜索商品是非常用用的。用户可以根据商品名称、商品分类、商品所属品牌进行关键词搜索，还可以搜索店名等关键字。用户浏览过的商品和店铺都能在“我的记录”中找到。我的功能包括：我的订单（全部订单、待付款、已付款（待发货）、待收货（已发货）、我的收藏（收藏的商品、收藏的店铺）、我的足迹（浏览过的商品和店铺）；我的店铺：立即发布商品、查看已发布的商品类表，被用户加入购物车的商品、用户生成订单未待付

26、款的商品、用户已付款的商品、我已点击发货的商品、用户已收货的商品、用户已评价的商品、修改店铺信息等功能； 3.2 数据表用户信息表：用于存储用户填写的个人信息及修改记录。结构如下表：表3-1 用户信息表名称类型长度小数点非空主键备注user_idInt2550非空1用户idopenidvarchar2550非空2微信唯一标识符passwordvarchar2550非空登录密码phonevarchar2550非空手机号码(账号)ava_imgvarchar2550非空头像gendervarchar2550非空性别,1男2女birthdayvarchar2550非空生日walletvarchar2

27、550非空钱包余额payPasswordvarchar2550非空支付密码create_timevarchar2550非空注册时间用户地址信息表：主要用来存放用户添加的收货人信息与收货地址信息。结构如下表：表3-2 用户地址表名称类型长度小数点非空主键备注add_idInt2550非空1地址iduser_idInt2550非空2用户idadd_namevarchart2550非空收货人名称add_phonevarchar2550非空收货人电话add_detailvarchar2550非空详细地址add_fullvarchar2550非空全地址provincevarchar2550非空省city

28、varchar2550非空市areavarchar2550非空区is_defaultvarchar2550非空默认地址, add_timevarchar2550非空创建时间地址数据表。结构如下表：表3-3 地址数据表名称类型长度小数点非空主键备注address_idInt2550非空1地址idparent_namevarchar2550非空上级名称parent_codevarchar2550非空上级idself_namevarchar2550非空当前名称self_codevarchar2550非空当前idtypevarchar2550非空类型,0省,1市,2区 商品品牌列表,与商品分类表关联。

29、结构如下表： 表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非空最新修改时间商品分类表,与商品品牌表关联，

30、结构如下表：表3-6商品分类表名称类型长度小数点非空主键备注class_idInt2550非空1分类idtextvarchar2550非空分类名称商品收藏表,存储用户添加收藏的商品。关联商品表和用户表。结构如下表：表3-7用户收藏的商品表名称类型长度小数点非空主键备注collect_idInt2550非空1收藏iduser_idInt2550非空2用户idgoods_idInt2550非空3商品idcreate_timeDatetime2550非空收藏时间商品评论表,与用户表、商品表关联。结构如下表：表3-8商品评论表名称类型长度小数点非空主键备注Comment_idInt2550非空1评论i

31、dUser_idInt2550非空2用户idGoods_idInt2550非空3被评论商品idUser_avaImgVarchar2550非空评论者头像User_nicknameVarchar2550非空评论者昵称Comment_textVarchar2550非空评论内容Comment_imgVarchar2550非空评论图片Comment_timedateTime2550非空评论时间商品表,关联商家表。结构如下表：表3-9商品表名称类型长度小数点非空主键备注goods_idInt2550非空1商品idstore_idInt2550非空2商铺idcreatetimeDatetime2550非空

32、上架时间goods_namevarcahr2550非空商品名称goods_descvarcahr2550非空商品介绍goods_brandvarcahr2550非空商品品牌goods_classifyvarcahr2550非空商品分类goods_imagesvarcahr2550非空商品图片goods_pricefloat2552非空商品价格goods_flash_priceFloat2552非空商品折扣价goods_send_priceFloat2550非空满多少包邮goods_sales_volumeInt2550非空商品销量goods_paymentsint2550非空商品购买人数商品订

33、单表,关联地址表、用户表、商品表、商铺表。结构如下表：表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非空订单状态af

34、ter_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_phone

35、Varcaar2550非空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 购物流

36、程1、打开小程序，可先体验小程序功能后选择授权登录，登录后会生成一个用户。2、选择心仪的商品，立即购买（或将多个商品添加到购物车，在购物车中统一付款），在确认订单页中需要填写收货地址、联系人电话、姓名等信息。3、信息确认后，到达付款页，付款成功后到达已付款一面；4、待商家发货后，用户可选择收货，收货后的订单可以发表评价和申请售后。至此，完成一个简单的购物流程；4.2开店流程1、用户授权后，仅做为一个普通用户使用小程序，在我的页面有一个我要开店按钮；2、点击“我要开店”，按照要求填写：店铺名称、开店人姓名、开店人身份证号、店铺地址等信息并提交即可生成自己的店铺；3、点击“发布商品”，按提示添加商

37、品图片、商品名称、商品描述、选择商品分类、商品所属品牌等必要信息，点击”发布“；4、客户购买商品后，可在我的店铺订单中查看已售出商品，并为商品发货；5、商品发出后，由用户点击收货，收货完成后，当前订单交易完成； 4.3 商城首页由两个控件组成，上方使用最受欢迎的轮播图，每一张轮播图携带一个热销商品的id，点击后可跳转至指定商品详情页；下方使用商品列表组件，触底加载，每次加载10条数据，加载和没有更多商品都有提示，使用户知道当前在执行的操作，增加用户使用体验；点击商品跳转至对应的商品详情页； 图4-1 商城首页(加载中) 图4-2 商城首页(没有跟多数据了)4.4 发现页面可搜索商品名称、商品分

38、类、商品品牌、商铺名称。每次搜索后自动保存搜索记录，下次进入时通过缓存获取搜索记录，方便用户搜索内容图4-3 发现(首次搜索) 图4-4 发现(搜索结果) 图4-5 发现(二次搜索)4.5 购物车勾选商品时，自动计算商品价格及数量；每勾选一个商品，都计算一次总金额和选中的商品数量，当购物车中的最后一个商品被选中时，触发全选事件，选中全选按钮；当其中任何一个商品取消勾选时，全选按钮跟着取消勾选；点击全选按钮时，所有商品与全选按钮状态一致；选择商品后，可以点击“结算”按钮，到达订单确认页面；此时，所有选中的商品将从购物车中删除；如果在订单确认中点击了返回，选中商品将变为待付款状态；若付款成功，则变

39、为已付款订单，等待商家发货即可；也可以点击右上角“编辑”按钮，进入购物车编辑状态，在编辑状态时，可以对勾选的商品进行“全部收藏”和“全部删除”操作；选择收藏后，所有商品将被收藏，已收藏商品不受影响；选择删除后，选中商品将从购物车中移除； 图4-6 购物车（选中购物车中的部分商品） 图4-7 购物车（选中购物车中的所有商品） 图4-8 购物车（编辑状态） 图4-9 购物车（编辑状态-删除商品）4.6 我的首次进入，需要用户授权，获取微信信息进行用户注册；之后进入，不需要授权即可自动获取用户微信信息即可实现登录；授权方式为，用户点击“注册/登录”按钮，触发开发者工具api，弹出授权框，点击“允许”

40、后，监听成功方法，将其中携带的“code”参数发送至后台，后台将code通过微信预留链接换取“微信用户唯一标识符”，以此创建用户；授权登录后，根据用户信息判断用户是否已开通店铺功能；如果没有开通，仅显示“我的”和“我要开店”操作；如果用户已经开通店铺，则增加显示对店铺的错作接口； 图4-10我的（未授权登录状态） 图4-11 我的（授权登录） 图4-12我的（已登录-未开通商铺） 图4-13 我的（已登录-已开通商铺）4.7 商品详情点击任意商品，都可以跳转至商品详情页；在商品详情页面中需要显示的信息包括：商品轮播图、商品信息、价格、商品销量、店铺信息等，已卖出的商品有商品销量和购买人数，被评

41、论或的商品可显示评论列表。在商品详情中点击轮播图，可以预览商品图片；点击“进店逛逛”可以查看当前商品所属店铺的全部商品；点击“收藏商品”可以将商品收藏，并在“我的-我的收藏”中查看商品；点击“加入购物车”，将当前商品加入购物车。加入成功后，可在“购物车”页面中以列表的形式将已添加到购物车的商品展示给用户，每次获取十条数据，用户下滑触底后判断是否有跟多数据，有则继续加载，没有则提醒用户没有更多数据了；点击“立即购买”，会先将当前商品加入购物车，然后从购物车中取得该商品在购物车中的id，并生成一条代付款订单，后台返回该订单信息，并显示在“确认订单”页面； 图4-14商品详情（未收藏商品） 图4-15商品详情（已收藏商品） 4.8 订单确认页面订单确认页面，可以从商品详情页底部点击“立即购买”进入，也可以从购物车中选择一个或多个商品点击底部“结算”进入订单确认