软件工程 基于微信的微商城小程序的设计与实现.docx

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

1、本科毕业设计（论文）基于微信的微商城小程序的设计与实现Development and Implementation of Tourism Information and Light Social Small Program Based on WeChat Public Platform院 （系）计算机学院专 业软件工程班 级2班学 号16210120226学生姓名彭晓锋指导教师李可可提交日期2020年 月 日毕业设计（论文）原创性声明本人郑重声明：所呈交的毕业设计（论文），是本人在指导老师的指导下，独立进行的设计（研究）工作及取得的成果，论文中引用他人的文献、数据、图件、资料均已明确标注出，论

2、文中的结论和结果为本人独立完成，不包含他人已经发表或撰写的作品及成果。对本文的研究作出贡献的个人和集体，均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承担。毕业论文作者（签字）： 签字日期： 年 月 日成绩评定成绩项论文成绩（百分制）折合比例实得成绩（折合分）指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩注：毕业设计（论文）成绩按百分制评定。答辩成绩不及格的（评分低于60分的），则该毕业设计（论文）总评成绩为答辩成绩。中文摘要当前信息技术的发展及其迅猛，各方面的发展，用户消费升级，传统电商等方面的线上推广遇到了瓶颈。高额的店铺成本投入以及维护，加上技术和成本的门槛

3、高也是比较高的。这时选择微信小程序，开发的微信小程序，对于传统商品通用，而且在消费者方面，需能够体验到方便快捷，应用范围更广。本论文是实现基于微信的微商城小程序，充分利用面向对象的开发思路。基于微信的微商城小程序旨在实现以下功能模块。 首页模块：其中有轮播图，商品展示及搜索功能。商品分类模块，将商品实现分类，点击可达对应的分类页面。购物车模块，实现购物车商品具备一些基本的操作，比如增删操作。除此之外，还有的就是订单及地址管理模块。 该系统在布局方面利用了移动端最常用的flex布局，该布局方式容易上手，对小程序的兼容也很友善。采用了小程序的原生框架以及结合了微信小程序提供的云开发技术。微商城小程

4、序运用小程序云开发技术，业务逻辑都可在小程序端完成，但不够强大的地方就是无法实现强大的Web管理界面。关键词：微信小程序 商城 化妆品 云开发AbstractThe current development of information technology and its rapid development, the development of all aspects of user consumption upgrade, traditional e-commerce and other aspects of online promotion encountered a bottlenec

5、k. High store cost inputs and maintenance, coupled with high technology and cost thresholds are also high. At this time, choose the WeChat app, developed by WeChat app, for traditional goods, and in the consumer side, need to be able to experience the convenience and speed, the application range is

6、wider. This thesis is to implement a WeChat-based WeChat applet, making full use of object-oriented development ideas.The WeChat-based WeChat applet is designed to implement the following functional modules. Home module: with rotating map, product display and search function. The product classificat

7、ion module enables you to classify products and click the corresponding classification page. The shopping cart module, which implements some basic operations for shopping cart products, such as adding and deleting operations. In addition to this, there is the order and address management module.The

8、system makes use of the most common flex layout on the mobile side in terms of layout, which is easy to use and friendly to applet compatibility. The native framework of the applet and the cloud development technology provided by the WeChat applet are used. The micro-mall applet using the applet clo

9、ud development technology, business logic can be done in the applet side, but not powerful enough is not able to achieve a powerful web management interface.Key words：Wechat Public Platform tourism Travel information Lightweight Sharing Community目录第一章 论绪11.1 课题背景与研究意义11.1.1 课题背景11.1.2 研究意义11.2研究现状11

10、.3本课题的研究方法21.4论文结构21.5本章小结3第二章 系统相关技术研究42.1开发工具及技术选型42.2 微信小程序42.3 相关技术42.3.1 JavaScript42.3.2 CSS技术42.3.3 HTML语言52.3.4 小程序云开发52.4 本章小结5第三章 系统分析63.1 微商城小程序业务流程分析63.2 微商城小程序总体功能分析73.3 微商城小程序详细需求分析73.3.1 用户登录模块73.3.2 商品信息展示模块83.3.3 商品分类模块93.3.4 购物车模块103.3.5 下单支付模块113.3.6 个人中心模块123.4 本章小结13第四章 微商城小程序的设

11、计144.1 微商城小程序项目的搭建144.1.1 准备工作144.1.2 新建项目144.2 微商城小程序的数据库设计154.2.1 数据库概念结构设计154.2.2 数据库的逻辑结构设计184.3 本章小结20第五章 微商城小程序的具体实现215.1 商品信息展示模块设计与实现215.1.1 首页轮播图banner215.1.2 首页搜索框225.1.3 首页热门商品展示235.2 商品分类模块设计与实现255.2.1 分类模块255.2.2 商品详情模块265.3 购物车模块设计与实现265.4 下单模块设计与实现285.5 微商城小程序个人中心管理模块的设计与实现295.5.1 登录获

12、取用户基本信息295.5.2 个人地址管理305.5.3 个人订单管理315.6 商品管理模块的设计与实现325.7 本章小结32第六章 系统测试346.1 软件测试的目的和流程346.1.1权限测试356.1.2功能测试356.1.3网络测试376.2本章小结37总结38参考文献39致 谢41广东东软学院本科毕业设计（论文）第一章 论绪1.1 课题背景与研究意义1.1.1 课题背景微信自推出到现在，已经成为即时通讯软件的佼佼者。微信小程序，它依托微信软件，无需另外安装下载即可快速使用，一经发布，就掀起了互联网的新热潮。微信小程序，具备用完即走，无需安装的特性，在当前世界发展环境下，它的出现是

13、非常有意义的。由于小程序的特性，它使用的时候对手机占用内存是很友好的，用户也不需要去担心加载速度问题，它的出现，是顺应时代发展趋势的，它存在的优势，是不容小觑的。2016年，张小龙向人们解读微信所存在的意义。微信小程序在17年的1月发布，新华社微悦读，是最先发布的，同时它也是首款新闻类的小程序。微信小程序具有以下的几种应用模式：（1）微信小程序自带模糊搜索。微信公众号和小程序之间是能够相互跳转的。根据这一特点，它们之间也相互促进，公众号的关注度高了，那么与之所绑定的小程序，也会受益。（2）微信小程序的推广。微信小程序的推广，跟其他的一些应用相比，是存在优势的，它是基于微信的，能够实现在好友间快

14、速分享，推广也更加的方便。（3）微信小程序可以与公众号建立绑定。在进入到相关微信公众号，倘若与其存在绑定关系的小程序，拥有着类似的主题，就可以在小程序看到相关的一些内容的推送。1.1.2 研究意义如今现代信息技术发展是及其迅速的,现在的日常生活中,手机的发挥的重用也是及其重要,其中，手机软件也是不可或缺的一部分。微信小程序，它具有操作方便、共享方便、随时可用等特点，使得购物更加的方便。微信小程序的火热发展，也在一定程度上推动了网上购物的发展，个人商家在拥有了各自的商城小程序之后，借助其来推动了发展。由此可以看出，商城小程序的优势是存在的。本课题要探究制作的是化妆类的微商城小程序，小程序的主要目

15、标是简单高效，回归简单。小程序的意义在于方便用户搜索、浏览、购买化妆品，减少外出购物不便。1.2研究现状 现在的发展跟以往相比，可谓是翻天覆地。互联网的普及，还有在支付方式上的各种改变。从传统的PC端，到移动端后来居上，还有其他各式各样的智能化得以普及发展，这些都在一定程度上加速了发展效率，对于人们的生活来说，也感受到了明显的便利。微信发布以后，也迅速的成为了社交平台的巨头，紧接着，微信公众平台等各种新的活力应运而生。借助着微信这一大社交平台，各种生活服务也得到不一样的体验。然后就是微信小程序的发布，这一款轻量级的应用，随用随走，开启了全新的体验。微信小程序是一种新的软件模式，一种用户与服务相

16、对应的新模式，它与传统PC端以及移动端的APP是存在区别的，是一个新的物种。当前发展的趋势，是趋向更加智能化，更加便利的，更加方便人们生活，也能推动进一步的发展。伴随着智能化的发展，人们也愈加离不开手机，由于生活需要，购物这一环节也是不可避免的。许多智能化应用的出现，推动了线上以及线下两种购物方式得以有相互结合，相互促进。更加的去关注两者的结合，也成了非常看重的一方面。借助微信的庞大的用户量，微信小程序的轻量，然后再去将线上线下购物结合，成为了一个新的机遇，一场新的变革。商家们借助微信小程序，拥有了各种的商城小程序，与时代前进步伐统一，进一步推动发展。放眼未来，可以看得出，小程序的光明前景是显

17、而易见的，在这个互联网发展的时代，商城小程序也更值得去关注。 1.3本课题的研究方法 本人通过了以下的方法对本课题进行了研究：（1）文献研究法：查阅并初步了解现有文献，初步掌握选题检索的相关内容和技巧，确定选题的目标、任务和内容；（2）定位分析法：通过对文献的研究，深入了解开发的相关技术，调查基于微信的微商城小程序业务流程，从而作出对应的方案，并确定开发流程；（3）技术研究：使用小程序云开发技术，开发本系统；（4）测试研究：对开发的系统进行必要测试，以确保系统能够正常运行。1.4论文结构第1章：论绪。阐述本文的研究背景以及意义，指出利用到的研究方法，并且分析了研究现状，还给出了本文的组织。第2

18、章：系统开发相关理论和技术的研究。本章主要介绍一个项目系统开发的具体开发过程和环境,以及对本系统所需的关键技术进行介绍。第3章：微商城小程序的需求分析。第4章：微商城小程序的设计。本章是设计系统的各个模块。第5章：微商城小程序的具体实现。本章是基于各个模块去阐述微商城小程序的具体实现过程。第6章：软件测试。第7章：总结。1.5本章小结本章是论绪部分。本章对微信小程序的背景、优点进行了阐述，同时还列出了本课题的研究方法、思路以及论文的整体纲要。前两节对项目的背景、意义，研究现状等进行阐述。后面两节指出研究方法，还有论文撰写的组织结构，确认好组织框架，进一步确定项目模块设计实现的计划。42第二章

19、系统相关技术研究2.1开发工具及技术选型（1）开发工具：微信开发者工具、Sublime。（2）技术选型：基于微信小程序的原生框架，结合小程序云开发API 。2.2 微信小程序微信小程序，它能够与App进行比较，相比较之下，能发现两者是比较类似的。微信小程序可以视为是服务，我们使用的时候它就出现，不用了它就消失，用完即走。如今微信小程序拥有相当高的应用范围，但是对于普通开发者来说，小程序目前的变现渠道还是比较单一的，即通过广告点击。62.3 相关技术2.3.1 JavaScriptJavaScript，它是一种解释性语言，简称是“JS”。JavaScript作为开发Web页面的一种脚本语言，这种

20、脚本语言，它是基于原型编程的，也是动态的，它不仅应用于浏览器的环境，对于不少非浏览器的环境，它也是同样适用的。1995年，Netscape公司的Brendan Eich，JavaScript首次设计成功，并将它应用在网景导航者的浏览器上。同时，Netscape公司还与Sun公司有所合作，管理层希望其外观看起来像Java，因此将其取名为JavaScript，但是实际上这两者在语法风格上面，是有着较大差异的。JavaScript主要是用来向HTML页面添加交互行为的，它同时还具备跨平台的一个特性。它与其他语言一样，也拥有着自身的一些基本数据类型，表达式等，它还可以实现web页面的人机交互。2.3.

21、2 CSS技术在HTML出现之后，承载HTML的浏览器得以迅速发展，CSS也应运而生。随着HTML的发展，增加了很多的显示功能，这都是为了去满足设计师的一些要求，然而这些功能的增加，使得外部样式语法的作用愈加无意义。在1994年10月，Hankon Wium Lie最初提出CSS的建议，随后的96年12月，推出了第一版的CSS。随后CSS技术不断发展，也拥有了自己的一套规则，它被称为层叠样式表，可以为结构化文档来添加样式。它不需要编译，浏览器是能够直接解释执行的。CSS是由W3C的CSS工作组所产生和维护的。CSS语言有以下的几个特点：（1）容易使用以及修改。通过CSS样式表，能够统一存放所有

22、的样式声明，来进行统一的管理。（2）具备丰富的样式定义。CSS提供丰富的文档样式外观，允许更加需求随意改变文本大小、修饰方式等来实现各种页面效果。（3）多页面应用。CSS样式表是能够单独存放到一个文件当中的，这样方便多个页面使用同一个样式，来实现多个页面的风格一致。2.3.3 HTML语言HTML，它是一种网页语言，也是一种超文本标记语言，其中，超文本的含义是指超出文本的范畴能够使用html来轻松实现。HTML会自己的一套遵循的规范，至于它的操作思路，根据网页中不同的数据需要不同显示效果，需使用对应的标签将需要操作到的数据封装起来，然后通过其属性，来进一步的实现内部数据样式的的改变。2.3.4

23、 小程序云开发小程序云开发，它是无服务器的一种服务，为开发人员提供了“云函数”，“云数据库”以及“云文件存储”，并且还将这些功能封装到了wx的特定接口当中，开发者能够通过cloud.xxx的形式来进行调用。整套功能是基于腾讯云全新推出的云开发( Tencent Cloud Base )所研发出来的一套完备的小程序后台开发方案。162.4 本章小结在本章中，主要研究说明了微商城小程序开发所需要用到的关键技术。包括微信小程序的框架，对小程序开发所需的一些基础的简要介绍，以及小程序云开发的介绍。这些都是本次项目开发中所需要用到的关键理论基础。第三章 系统分析3.1 微商城小程序业务流程分析在开发微商

24、城小程序之前，首先要进行分析，完成开发和设计微商城小程序客户端以及数据库。在微商城小程序的客户端部分，客户是能够进行浏览商品操作，还能对商品的分类进行查看、同时也能够执行添加商品至购物车、商品快速搜索操作，还有一些其他的功能，比如管理购物车，管理个人地址信息等。然后呢，对应数据库的部分，确保通过合理可行的设计，从而使得对应的数据表之间，拥有合理可靠的关联关系，当然也确保了数据库可扩展性。图3.1微商城小程序的购物流程图如图3.1所示，是基于微信的微商城小程序的购物流程图，用户获取并且进入到小程序，以游客身份或客户端用户的身份，都具备浏览商品的权限。获取授权登录之后，客户端用户可以选择商品添加到

25、购物车，并且能够进行管理。用户选择需要购买的商品后，即可进行商品的结算，确认完订单信息，执行付款操作，不管用户是否付款，都会生成历史订单信息，生成的历史订单信息也会根据支付结果有所不同。到这里之后，购物流程也就结束了。3.2 微商城小程序总体功能分析微商城小程序的总体系统功能模块图为下图3.2：图3.2微商城小程序的总体功能结构3.3 微商城小程序详细需求分析3.3.1 用户登录模块微商城小程序的用户系统功能用例图如下图3.3所示。图3.3用户的系统功能用例图3.3.2 商品信息展示模块用户通过扫码，分享等方式获取到微商城小程序，进入到小程序之后，无论用户是否进行登录授权，都能够具备浏览微商城

26、小程序商品信息的权限。图3.4.1和图3.4.2为微商城小程序的用户浏览商品的用例图。图3.4.1用户浏览商品的用例图（客户端用户）图3.4.2用户浏览商品的用例图（游客）用户浏览商品信息功能需求分析：（1）用户进入小程序，拥有浏览商品权限。 （2）用户在首页可以浏览的内容有：轮播图，专题商品，热门商品。（3）轮播图在首页的头部，实现其自动播放滚动的效果。用户微商城小程序的“首页”页面，可以选择执行上拉刷新操作，去获取并浏览最新的商品。（4）点击商品，可以到达对应的商品详情展示，其中包括商品的图片、价格、产品参数等内容，用户也能够在详情页面，选择立即购买或者先将商品添加到购物车。3.3.3 商

27、品分类模块用户在微商城小程序进行商品浏览的同时，能够通点通过击底部导航栏的分类图标，进入到微商城小程序的商品分类页面。在商品分类页面，对商品进行了对应的分类，方便用户寻找相应商品。图3.5.1以及图3.5.2为微商城小程序的商品分类用例图。图3.5.1微商城小程序用户的商品分类用例图（客户端用户）图3.5.2用户商品分类用例图（游客）商品分类功能需求分析：（1）用户能够在分类页面浏览展示的分类商品。（2）商品是根据商品的功效等进行划分的，用户通过点击“分类”页面的分类栏左半部分对应的分类词，右半部分会矩阵显示对应的商品类目。（3）右半部分商品分类类目展示后，用户可以通过点击类目名称来跳转到对应

28、的分类专题。（4）用户在对应的商品分类专题可以查看商品的详细信息。3.3.4 购物车模块客户端用户通过选择，让自己想要的商品加入其购物车当中，微商城小程序的底部导航栏，有“购物车”图标，可以方便用户快捷的进入其购物车进行对应的管理。微商城小程序的购物车的用例图如图3.6所示。图3.6微商城小程序购物车的用例图购物车模块具体的功能需求分析如下：（1）用户只有允许登录授权了，才能够选择选择商品添加到购物车。（2）用户允许登录授权之后，可以在购物车查看到已经添加的商品，购物车页面主要展示内容设计包括商品的概要信息（商品图片、价格、数量等），全选、单选、结算按钮。（3）在购物车管理页面，用户能够手动处

29、理商品的数量，在商品的选择方面，有单选、多选（全选），用户选中对应的商品左侧的复选框之后，右下角结算按钮上方就会出现删除按钮，可供用户执行删除操作。3.3.5 下单支付模块图3.7所示是微商城小程序的用户下单支付对应用例图图3.7微商城小程序下单支付的用例图下面是下单支付的功能需求分析：（1）用户在购物车的列表当中进行选择，选择完毕，可以选择执行结算。（2）用户只有允许登录授权了，才能够执行结算下单。进入到对应的确认订单页面，首先进行的操作是是地址的选择。如果登录用户已有默认地址，则直接选择默认地址进行显示；如果没有默认地址，则是会提示用户进行选择地址的操作。（3）当用户在确认订单页面选择地址

30、完毕，点击付款按钮，生成订单，订单生成，云数据库中的订单表就会增加一条订单记录，购物车中选中的商品也删除。（4）不管用户是否付款，都会生成历史订单信息。3.3.6 个人中心模块用户进入微商城小程序，点击底部导航栏的“我的”，可以进入到个人中心页面。图3.8为微商城小程序用户个人中心管理的用例图。图3.8微商城小程序用户个人中心管理的用例图个人中心模块具体的功能需求分析如下：（1）用户进入微商城小程序后，可以通过点击底部导航栏的“我的”，进入到个人中心页面。（2）用户未允许授权登录，用户为游客身份，个人中心页面会有“登录”按钮显示，以及下方的地址管理，订单管理等。当用户点击登录按钮允许授权了，就

31、会展示用户微信头像以及昵称，个人地址管理和订单管理以及客服只有在用户允许登录了才可以进行查看。（3）用户能够通过点击个人地址管理，去进入到相关页面执行操作。（4）用户通过点击订单管理，能够去到相关的页面执行订单管理的操作。3.4 本章小结该章节主要是进行了微商城小程序的系统需求分析。其中3.1小节是对微商城小程序整体的业务流程分析，而3.2小节则是微商城小程序的总体功能分析，3.3小结节是对微商城小程序进行详细的需求分析。分析过程中，充分利用了UML用例图，开发微商城小程序，需求分析这一关是至关重要的，通过本章节也为下面的微商城小程序功能的设计与实现搭好一定的基础。第四章 微商城小程序的设计4

32、.1 微商城小程序项目的搭建4.1.1 准备工作（1）申请个人小程序，获取到小程序AppID。（2）下载安装并且熟悉开发工具。（3）点击开发者工具中的云开发，开通小程序云开发。（4）通过在终端安装node环境，方便后续使用小程序云开发的云函数。4.1.2 新建项目（1）在开发者工具新建不使用云服务的项目，如图4.1所示：图4.1微商城小程序的项目新建（2）删除官方的图片和模板，创建好项目所需的文件，进行全局配置，导入项目所需图片，并且初始化云开发环境。图4.2.1为项目的文件结构，图4.2.2为初始化云开发环境。图4.2.1微商城小程序的项目文件结构图4.2.2云开发环境初始化4.2 微商城小

33、程序的数据库设计微商城小程序使用云数据库，它是小程序云开发所提供的。它在权限方面并不会很复杂，如下：（1）仅创作者可写作。 （2）仅创建者可读写。（3）仅管理端可写，所有人可读。（4）仅管理端才能读写。在很多情况下，简单使用这四种权限是无法完全满足开发人员的需求的，因此还需要在代码级别去进行一些适当的判断，来确保具体的表现与开发人员的想法相符合。4.2.1 数据库概念结构设计（1）商品信息的实体图如图4.3：图4.3商品信息实体图（2）用户信息实体图如图4.4： 图4.4用户信息实体图（3）地址信息实体图如图4.5： 图4.5地址信息实体图（4）商品分类实体图如图4.6： 图4.6商品分类实体

34、图（5）订单商品信息的实体图如图4.7：图4.7订单商品信息实体图（6）用户订单信息的实体图如图4.8：图4.8用户订单信息实体图（7）由系统实体与实体之间的联系能够得出系统E-R图，微商城小程序的系统总体E-R图如图4.9所示。图4.9微商城小程序系统总体E-R图4.2.2 数据库的逻辑结构设计（1）轮播图表（banner），如表4.1所示：4.1 轮播图表字段名类型能否为空是否为主键描述Idstring否是轮播图idImgString否否主图NameString否否轮播图名称ShowBoolean否否是否显示Create_datadata否创建时间Update_datadata否更新时间（

35、2）商品信息表（products）如表4.2所示：4.2 商品信息表字段名类型能否为空是否为主键描述idstring否是商品idproduct_nameString否否商品名称product_priceNumber否否商品价格Product_imgString否否商品主图Product_stockNumber否否商品库存Category_typeNumber否否商品分类DescriptionObject否否商品描述Create_dataData否创建时间（3）用户信息表（userInfo）如表4.3所示：4.3 用户信息表字段名类型能否为空是否为主键描述idstring否是用户idopenid

36、String否否用户openidUser_imgString否否用户头像Nick_nameNumber否否用户昵称Update_timedata否更新时间Delete_timeData否删除时间（4）订单信息表（orders）如表4.4：4.4 地址信息表字段名类型能否为空是否为主键描述idstring否是订单idOrder_numString否否订单号User_idstring否否用户idOrder_productObject否否订单商品Order_statusString否否订单状态Order_addressObject否否订单地址Order_amountNumber否否订单总额Creat

37、e_dataData否创建时间（5）用户地址信息表（address）如表4.5：4.5 用户信息表字段名类型能否为空是否为主键描述idstring否是地址idUser_idString否否用户idnameString否否收货人姓名telNumberString否否手机号provinceNameString否否省cityNameString否否市countyNameString否否县区detailInfoString否否详细地址Update_datadata否更新时间Delete_dataData否删除时间（6）商品分类表（category）如表4.6所示：4.6 商品分类表字段名类型能否为空是

38、否为主键描述idstring否是类目idNameString否否类目名称Update_dataData否更新时间Delete_timeData否删除时间4.3 本章小结本章节为微商城小程序的设计。在4.1小节进行了微商城小程序的项目搭建，接着在4.2小节完成了数据库的设计与实现，微商城小程序使用的是小程序云开发技术，数据库即为小程序云开发的云数据库。第五章 微商城小程序的具体实现5.1 商品信息展示模块设计与实现用户进入到微商城小程序“首页”页面，页面中的内容为头部的banner轮播图，轮播图下面是搜索框，接着为专题商品，底部的是热门商品的展示。5.1.1 首页轮播图banner“首页”页面头

39、部的轮播图模块，使用的是swipper组件和swipter-item组件，其中设置了固定时间进行自动循环播放，也显示了随之切换的小圆点。界面实现的代码如下：图5.1.1微商城小程序首页轮播图轮播图的数据是存放在小程序云开发后台的云数据库中，在首页页面首次加载时，就调用API获取云数据库中的轮播图数据，调用this.setData将获取到的轮播图数据绑定到页面初始数据中，并在首页页面进行渲染。图5.1.2微商城小程序首页轮播图图5.1.3微商城小程序首页轮播图运行效果图5.1.2 首页搜索框首页的搜索框界面设计是利用了view组件，对图标的使用，能够点击跳转到搜索界面，进行精准搜索。主要是利用小

40、程序云开发的正则查询方法，利用此实现模糊搜索。执行效果图如图5.2.1和图5.2.2。5.2.1微商城小程序搜索运行效果图5.2.2微商城小程序搜索运行效果图5.1.3 首页热门商品展示首页热门商品的展示，利用了小程序的列表渲染，点击某个商品，可以跳转到对应的商品详情页面，利用了页面跳转传参，将对应的商品id传到商品详情页面，即可展示对应的商品详情。图5.3.1，图5.3.2，图5.3.3分别为界面实现代码图、逻辑实现的一部分代码图、首页热门商品展示效果图。图5.3.1微商城小程序首页热门商品展示图5.3.2微商城小程序首页热门商品展示图5.3.3微商城小程序首页热门商品展示效果图5.2 商品

41、分类模块设计与实现商品分类页面的设计，分为左右两栏，点击左边的商品类目，右边会矩阵显示对应类目下的所有商品信息，点击右侧对应的名称，可以进入到对应的专题分类。5.2.1 分类模块分类模块的部分代码截图以及运行效果图如图5.4.1、 5.4.2所示。图5.4.1微商城小程序分类模块部分代码图5.4.2微商城小程序分类模块展示效果图5.2.2 商品详情模块商品详情页数据的获取则是利用了页面跳转传参，将对应的id值传到详情页面，然后调用API获取数据库中对应id的商品信息进行展示。图5.5为商品详情页面展示效果图。图5.5微商城小程序商品详情页面展示效果图5.3 购物车模块设计与实现微商城小程序的购

42、物车，用于方便用户存放心仪的商品。用户允许授权登录之后，可以执行购物车的基本管理。购物车页面设计为当购物车没有数据，页面会展示“购物车还没有任何商品”，还会有按钮，点击按钮能够跳转回首页，去浏览商品，选购商品添加到购物车；如果当前购物车中存在数据了，则会在页面列表展示添加的商品。用户执行选择商品添加至购物车操作，在添加前进行了判断，如果选择的商品已经存在于购物车当中，那么在原有数量上增加；倘若不存在，那么直接添加至数据库。购物车页面数据的展示则是直接调用API获取数据库中的购物车的数据。图5.6.1和图5.6.2为购物车的部分代码截图，图5.6.3为微商城小程序购物车的运行效果展示。图5.6.

43、1微商城小程序商品详情页部分代码图5.6.2微商城小程序商品详情页部分代码图5.6.3微商城小程序商品详情页运行效果图5.4 下单模块设计与实现用户在选择完商品点击结算按钮，进入确认订单页面，然后选择地址。确认了订单后，就会生成订单信息发起付款请求，不管是否执行了付款的操作，都会生成订单。下单支付模块的运行效果图如图5.7.1和图5.7.2所示。图5.7.1微商城小程序下单支付运行效果图图5.7.2微商城小程序下单支付运行效果图5.5 微商城小程序个人中心管理模块的设计与实现5.5.1 登录获取用户基本信息用户若未执行授权，在个人中心页面显示的为登录按钮，通过去点击登录按钮执行登录后，能够获取

44、到用户的信息进行展示，包括用户的微信头像以及用户昵称。登录的的实现是利用了按钮的getUserInfo去获取，这个方法有不好的地方就是无法获取到用户的openid，就再利用云开发的云函数，去获取并且将信息用wx.getStorageSync()进行本地缓存，在个人中心页面加载就获取本地的缓存，当用户登录过了，没有清除本地缓存，下一次进入小程序就不需要再执行授权登录。图5.8为用户登录前后的效果图。图5.8微商城小程序个人中心登录前后效果图5.5.2 个人地址管理当进入到个人中心的地址管理，能够对页面中已有的地址进行编辑，页面中也有新增地址的按钮，点击能够执行添加新地址的操作，添加的地址中会存在

45、一个默认地址的字段。用户点击地址列表中的编辑按钮，可以进入地址编辑模式，此时能够进行收件人姓名，详细地址等信息的修改，也可以手动选择地址是否为默认地址，编辑完毕，点击保存即可返回地址列表页面，如果没有显示更新后的地址，可以通过上拉刷新地址列表页面。点击地址列表页面底部的按钮，可以进入地址新增页面，填写完整的信息，其中也有对联系电话进行了正则判断，提示用户输入正确的手机号。用户填写完整地址信息之后，点击保存之后即可将新的地址添加到云数据库中的个人地址表中，在地址列表页面进行展示。图5.9为地址管理运行效果图。5.9微商城小程序管理地址运行效果图5.5.3 个人订单管理个人订单管理运行效果图如图5.10。5.