【《基于微信小程序的购物程序设计与实现》14000字（论文）】

基于微信小程序的购物程序设计与实现目录TOC\o"1-3"\h\u16143基于微信小程序的购物程序设计与实现 1165561绪论 1138481.1项目研究的背景和意义 217211.2国内研究现状分析 3253721.3论文的主要研究工作 4822系统相关技术研究 4312332.1微信小程序 581112.2API框架 688052.3CSS语言 8315362.4JavaScript语言 9229072.5MySQL数据库 1187763界面设计分析 139703.1需求分析 14140083.2页面界面分析 15138233.2.1首页界面设计分析 15216703.2.2分类界面设计分析 18136153.2.3购物车界面设计分析 19267013.2.4个人中心界面设计分析 19292394系统设计与实现 20180154.1项目总体架构 2084824.2项目开发方法及环境部署 24174934.3微信小程序的购物系统设计与实现 30216934.3.1移动端与服务器的交互设计 32143854.3.2商品浏览展示的设计实现 3319814.3.3加入购物车的设计实现 33172954.4.4购物车页面的设计实现 3520864.4.5分类页面的设计实现 36112494.4.6查找商品的设计实现 3778866总结 391绪论微信小程序成为当下人们的新选择，网上购物也是没时间逛街的人群的一个购物选择，而基于微信小程序的购物程序就是二者相结合得出一个更方便的选择。微信小程序利用多种技术和语言可以让消费者通过微信扫一扫快速进入商城购物逛街，让消费者可以随时随地进入小程序进行购物。如果传统的电子商务行业能够很好的运用小程序这将为行业带来新的机会让自己能更上一层楼。1.1项目研究的背景和意义信息时代的到来，我们对于网络的要求越来越高，就说明网络的配置和基础设施都需要进步的完善去到达人们生活上的需求，人们也希望获得更便利的生活方式，毕竟现在人的工作压力越来越大，因此网上购物成为大部分上班族的选择。和PC端的购物平台作比较，PC端能让人们不用出门就可以享受到购物的快乐，但是无法移动；而手机端小程序不占用太多内存，还可以便携移动想什么买东西就什么时候买东西。购物分为线上购物和线下购物，两种方式都有各自注重的点，线上购物更加注重消费者的便利和互动营销以及线上店铺每天的流量。线下门店的注重点和线上不一样，线下更看中产品的质量和用户的评价。线下门店则和线上重视的服务方向不同，它更注重更直接的服务方式包括服务人员的推荐、指引等，也能使人直接看到并接触实物，以便能打消购物者对于想要购买的物品的疑虑。但随着科技和信息的发展，每一个行业都必须向前进迎来新的时代。而老旧的电子商务的模式在发展的过程中遇到了瓶颈，必须找到一种新型的模式使电子商务突破瓶颈跨向新时代。终于在众多的因素的推动下电子商务迎来了新转机，是把线上、线下、物流三者进行结合的新型电子商务模式，就是微信小程序。这样可以一起推动所有相关的行业一体化的进程，促成消费时代的全面升级，也让消费方式发生了改变。新的购物模式就是根据消费者的需求衍生的新模式。在这个发展飞速的信息时代，快速购物、快速送达、快速结算等的一些购物方式让消费者快速青睐。对于老旧的模式而言，为消费者提供快捷的线上购物方式可以提升品牌知名度、顾客满意度、也有利于品牌的发展。其实近几年有一些品牌已经开始选择提供线上购物和线下购物相结合的新型购物模式。提供的主要购物方式有：PC网页购物系统、APP购物系统、借助第三方应用的购物小程序。在2017年的时候，第一批的小程序就已经登录网络平台了。不知是否还记得在当年年底时，有一款微信小游戏（跳一跳）突然火了起来，出现在了大众的视野里，并进一步增加了微信小程序的用户量。2018年腾讯完善了小程序安全管理的条例，在产品功能上给用户更多的控制力，也增加了对隐私数据保护的强度。微信小程序和APP相较而言，小程序最大的优点就是不用浪费下载安装的流量和时间，打开就可以使用，也不需要像其他APP那样占用设备大量的内存空间。实现了触手可得的的想法，用户可以通过微信上的扫一扫或者小程序就可以获得自己想要的小程序了。对于APP来说，用户还需要先下载，在进行繁琐的注册和登陆步骤会给用户手机带来不小的储存压力，会降低APP的用户粘性从而降低下载次数、减少使用频率。综上所述，需要设计出一个相对较低开发和运营成本的购物小程序是传统电子商务完成转型需要解决的问题。对于消费者而言提出的需求是购物系统带给他的快捷方便、即用即走的新模式购物体验。腾讯公司的微信小程序开发对于许多商家而言，是非常有益的，扩大了自己的销售范围。可以设计开发一款提供线上购物服务的轻应用，以便来增加自身的营业额和品牌知名度。1.2国内研究现状分析在当下，互联网经历了无数次的变革，处在一个高速发展的时期。智能移动设备和移动端支付这类功能的大量使用给我们的生活带来了巨大的改变，不仅仅是解放了双手，还解放了双脚。从纸币时代到了无纸化时代，以前都要带纸币才敢出门，现在只需要一部智能手机就可以带你去到任何你想要去的地方，买到你想要买的任何东西。电子商务随着互联网时代的发展也在跨上一个新台阶，从无法移动的PC端到可移动的手机的量变升级，在人们的生活中，除了衣食住行，手机已经成了和他们同等重要的一部分了。淘宝、京东、拼多多几个头部购物APP已经成为大家购物的首选项了，在这些APP上可以买到服饰、家电、生活用品、水果乃至各种想要的各种品类的产品。给人们的生活带来了很大的便利，同时也提高了产品的流动率。但是随着信息时代的发展和线上购物的推广，传统的电子商务也出现了瓶颈，比如说：消费者购买的产品与网上介绍有较大的出入；相对较慢的物流问题和最后一阶段配送问题；消费者需要自己支付高额的邮费等等一些问题。这些问题都让用户在消费过程中的达不到满意状态，也达不到很好的用户体验。新型购物模式的出现主要是将线上和线下购物模式的相结合，它们致力于为消费者提供更舒适、更可靠、更满意、更优质的购物体验。这就给传统的电子商务带来了新的机遇。在这个互联网发展飞速的状态下，购物方式需要具备两点特性：移动化和便捷化。同时也要注意线上和线下二者融洽的结合。微信是为智能终端提供即时通讯服务的免费社交应用。2020年一季度，微信月活跃度将达到12亿，微信在无形中已经变成生活中不可或缺的一个部分。微信与2011年1月21号正式上线，自上线以来获得了大量的用户浏览、用户群也在增长。2016年微信之父张小龙提出开发、快速获取用户和传播成本较低的“小程序”。微信小程序于2017年正式上线。小程序就成为了即走即用、占用内存小轻应用。而这两年的的新冠肺炎给每一个行业带来巨大的损失，突然爆发的新冠肺炎让我们都没有做好准备，让喧闹的中国变成了沉默的中国，但经过我们大家共同防疫，国内疫情相对控制的非常好了，在处于疫情期间我们无法出门这让我们的经济造成了很大的损失，许多小型公司出于无奈只能选择关闭公司。许多的线下门店也无法进行正常营业，那大家需要的东西就无法购买。在新冠肺炎的冲击下，小程序成为了许多商家一致的选择。1.3论文的主要研究工作本文研究的购物小程序主要是疫情期间用户无法出门购买商品的购物系统，减少出门情况为防疫出一份力。同时也能减少部分损失，给一些中小型企业商品提供出路。小程序是开发和运用成本较低的购物系统。由于小程序涉及到的模块较多，我选择微信小程序界面设计和客户端作为重点研究。通过和微信小程序技术结合的购物系统主要是为了疫情期间让大家减少出门的同时也能买到自己想要商品，淘宝和京东等大型APP商家入驻相对麻烦，可以选择自己开发和运用属于自己品牌的小程序。这样商家也可以选择自己的线下门店和线上小程序联通，用户可以选择在线下门店选购产品，查看实体商品，然后在是否选择购买；假若该商品线下门店暂时缺货，用户也可以通过小程序进入该品牌网上商城，浏览商品、选择想要的商品添加到购物车、下单结算这些操作步骤均可以在客户端上完成。用户还可以在登陆小程序之后对个人信息进行管理，比如绑定自己手机号码、查看订单信息、修改收货地址。综合上面的信息得出的需求，论文主要针对的就是微信购物小程序要实现的功能有：获取用户的信息、品牌产品信息（包括产品种类、产品描述、产品专题、产品价格）、购物车功能、个人中心（包括绑定电话、更改地址）、订单管理。我主要从首页专栏、商品展示、购物车、购物车管理还有数据库建立这6个模块进行设计与实现。2系统相关技术研究首先介绍一下这个购物小程序在开发中所用到的技术，API框架、MINA框架、CSS语言、JavaScript语言、MySQL数据库都是小程序涉及到的知识点。本次论文的小程序的设计与实现是建立在这些理论之上的，同时也有和实践相结合设计出该小程序。

2.1微信小程序微信小程序是基于微信生态圈下的一个即用即走的轻应用程序，也是用户与服务相连的一种全新方式。2016年微信之父张小龙通过对微信的价值观进行解读，从而提出微信小程序作为一种新形态。小程序充分展现了触手可得、即用即走的轻便快捷应用程序。比如用户如何获取小程序、用户使用小程序时无需占用内存体现了他的特性。用户可以通过微信界面右上角中的扫一扫或者下拉微信首页会出现最近使用过的小程序，也可以通过发现页面里面的小程序来找寻自己需要的小程序应用。其实小程序也并非不用下载只是下载过程非常之快，让用户感受不到所以用户以为不用下载安装。小程序所占用的手机内存相较于APP而言几乎可以直接忽略不计。小程序从获取到用户离开的整个过程都是非常方便且快速。小程序的一些交互设计和框架理念都让用户降低阅读成本和提升用户满意度。小程序虽然时基于第三方平台的系统但是他具备APP可以实现的功能，这样小程序就非常适合一些拥有线下门店的中小型品牌。为了让开发者在微信中尽可能容易、快速开发出具有APP原生形态的服务，所以微信团队特意为他们开发了小程序的框架，使他们使用起来更加方便，使更多的人都能上手成为开发者。基于此，研发出来的框架就是MINA框架。这个框架是以封装客户端提供一些基础数据（文件系统、网络通信等基础数据）为基础，给出了一套JavaScriptAPI，让开发者能够顺利地理解微信客户端提供的各种基础规范和功能，从而能快速完成自己小程序框架的构建。其实MINA框架有接近APP原生形态的运行速度，在框架上做了一定程度的优化，在功能上也使用接近native的组件，使得安卓和iOS达到统一高度。MINA框架分为两个部分，一个是页面视图层，一个是AppService应用逻辑层。页面视图层开发者需要用WXML语言来搭建页面的基础视图框架，WXSS语言来构建页面的样式。AppService应用逻辑层是中心服务，主要是通过微信客户端单独加载运行，页面渲染数据、页面交互逻辑都在这里进行处理。AppService应用逻辑层是使用JavaScript语言来编写交互、网络请求、数据处理。MINA框架给页面提供了事件监听相关的属性，和事件处理函数绑定来实现页面同步的交互数据，简单来说就是，数据要和页面进行交互时，数据可能会单方面地绑定页面交互，对应地数据发生了改变地页面相应地也是需要重新渲染得到新的页面。通过MINA架构图我们能看到三个图层之间的关联，如图2.1。图2.1MINA框架图2.2API框架微信团队提供了非常丰富的微信原生态的API,方便开发者调整微信提供的对应的功能，例如：如何获取用户本地信息、微信支付、离线存储等功能。API是应用程序接口一般是指预先指定功能接口，或者是某些系统中某些不同组合里已经定下来的部分。应用程序接口也叫做应用编程接口，它是对于定义、协议以及程序的集合。为了达成计算机软件之间的成功通信，就需要通过API接口来进行实现。它主要功能就是能提供通用的功能集，而它同时也能为各个平台提供数据上的交流，可以作为中间件进行使用。在实践过程中，编程设计地主要工作就是使软件系统地职责分布均匀，一一对应。想要达成系统可维护性和可拓展性这两个属性的提高这一目标，一个良好地接口设计就成为了重点。这样的设计不仅把系统各部分之间地依赖性降低了，也把组成单元的内聚性进一步提升了。同时各单元间的耦合程度也得到了缓解。API又分为WindowsAPI和LinuxAPI两种类别。（1）WindowsAPIWindowsAPI是起到预先定义的一种函数，各种部件的外观样式和行为都是它控制的。他也具有较为强大的功能。如此，使用者在Windows系统里内部所做的每个操作或多或少都会改变函数的运行，这样也就是可以告知Windows到底发生了什么改变，这在一定程度上就像是Windows自身的天然代码，只为Windows本身服务。除此之外的语言只是能提供给使用者自动且简便的访问API的方法,并不能到达想要的效果。用户随意点击任意按钮时，Windows都会把变化通过消息发送个窗体，VB将分析这个获取到的调然后用一个特定事件来表示。图2.2WindowsAPI图用通俗易懂的话来讲，Windows系统就是具有协调应用程序的执行、内存的分配、系统资源的管理功能的系统，但其实它比我们想象中的更强大、更全面，他同时还具有另一个身份，它是一个包罗万象的服务中心。为了完成开启视窗、描绘图形和使用周边设备等的这些操作，就得依靠这个windows系统的服务中心，靠这一服务中心的各种各样的服务来达成以上目的。这些函数被称为ApplicationProgrammingInterface(API函数)的原因是他服务的对象是应用程序。WindowsAPI的使用范围比较大，能使用它的条件就是执行Windows环境内的各种各样的应用程序。LinuxAPI在Linux系统中，LinuxAPI也是遵循了相应的标准，这个标准是UNIX中最流行的的界面标准POSIX标准。鉴于现有的UNIX的实践和基础上，描述了在系统中的如何调用编程接口来确定应用程序在多种操作系统的顺利移动运行。系统调用的编程接口主要是通过C库来实现的。2.3CSS语言CascadingStyleSheet意思是是层叠样式表，通常人们把它称为CSS。是一种计算机语言，他的主要功能是通过HTML或者XML等来展示文件样式的。CSS可以静态地修改web页面和动态地格式化各种元素，但是它需要与各种脚本语言相结合。网页中元素的布局可以通过CSS实现像素级的精确移动。可以选择所有字体样式，包括字体大小是否粗体，并且可以直接修改和编辑网页对象和模型的样式。CSS选择直接定义元素的显示方式来作为一种样式描述，并且只提供给HTML标记语言使用。同时也可以利用CSS对所有页面元素和样式来实现修改的目的，这对于Web端而言是一种提升。总的来说CSS的特性有：丰富的样式CSS不仅为文档样式提供了丰富的外观，还提供了设置文本和更改背景属性的功能。您可以为页面中的任何元素选择边框，并调整元素边框与其他元素之间的距离，以及元素边框与元素内容之间的距离。同时，还可以更改文本的其他属性，包括大小写、装饰等页面显示效果。容易使用和修改CSS可以将HTML元素的系统属性放在样式定义中，或者放在HTML文档的标题中。当需要引用HTML页面时，可以将样式声明放在一个特殊的CSS文件中。实际上，在CSS样式表中，所有样式声明都需要一致地存储和管理。在多页面应用类似地，我们可以使用相同的样式定义对具有相同样式的元素进行分类。在具有相同名称的HTML标记中，可以同时应用样式，也可以将样式直接指定给页面元素的属性。如果直接在样式列表中修改相应的样式声明，也会直接修改样式。在CSS文件中，CSS样式表可以单独存储，这样我们就可以在多个页面中使用相同的CSS样式表。理论上，CSS样式表不能被视为任何页面的文件，但是任何一个页面都可以对CSS样式表进行引用。这样的操作在一定程度上可以达到多个页面风格上的统一。层叠如果在元素上多次使用统一样式，则通过更改样式而更改的最后一个属性值为cascade。如果将CSS样式表放置在同一站点的多个页面中，如果要修改某些页面中某些元素使用的样式，就可以通过单独定义一个样式表来表现你想要达到的样式。如果想要在浏览器中查看到最后设置的样式效果，那么你需要将后来定义的样式在前面样式的基础上重新改写。页面压缩在打开需要HTML定义效果的网站时，这些网站需要需要许多各式各样的表格和font元素，用来构成各种格式的文字样式，但结果会导致大量的HTML标记，从而大大增加页面文件的大小。如果你想大大减小页面的大小，你需要在CSS样式表中放置一个单独的样式声明表，同时，你还可以减少加载页面的时间，下载的时间也将会因此大大地缩减。2.4JavaScript语言JavaScript是一种解释性的、即时的、轻量级的编程语言，它还具有函数优先的特性。尽管他以开发网页的脚本语言而闻名，但其实也能被使用在很多非浏览器的环境当中。JavaScript基于原型编程和多范式动态脚本语言，能够满足面向对象、命令式和声明式的风格。最初由美国网景通信公司和布兰登·艾奇共同设计并且为其取名为LiveScript，而后又与sun合作并为其更名为JavaScript。在Java语言中受到启蒙，以Java为基础开始设计，所以在一些语法上都是有相似之处的，也包括一些称呼和规范也都有Java的影子。JavaScript对于网络来说是一种高级的脚本语言，在Web应用开发中JavaScript已经成为广泛使用的语言了，可以为网页添加各种千奇百怪的功能以及为使用者展现更流畅、更完美的观看效果就需要使用JavaScript语言。在HTML需要实现自身的功能是需要通过JavaScript的脚本去嵌入来实现。图2.3JavaScript组成JavaScript的语言特点：脚本语言JavaScript语言必须等待C、C++和其他编程语言先编译然后执行。由于JavaScript是一种解释性脚本语言，它将在程序运行过程中逐行解释，这与其他脚本语言不同，后者在运行完成之前不会开始解释。基于对象JavaScript是针对与对象的一种脚本语言。它又能建立新的对象，又可以运用现有已经存在的对象进行编译。简单JavaScript在变量类型上选择采用的是弱类型的，所以在数据类型的使用上就没有给出特别明确的规定。同时为了要让设计变得简易和紧凑，就是要在Java语言的基础上使用基本语句和脚本语句的输出。动态性JavaScript是一种不用经过服务器同意就可以就可以针对用户的输入进行响应，因为它是需要事件去驱动的脚本语言。用户访问网页时，通过鼠标在网页上点击或上下左右移动、窗口等操作。JavaScript可以直接响应这些事件。跨平台性JavaScript是一个只需要浏览器提供支持，并不是需要依赖任何操作系统。其实只要你使用的浏览器是可以使用JavaScript语言的，那么你所编写的JavaScript文件是可以在任何一部机器上区使用或者修改的。随着科技发展的进步，大多数浏览器已经开始同意使用JavaScript语言了。JavaScript语言和另外一些脚本语言相比，用户在浏览器中仍然选择JavaScript作为客户端脚本语言。主要还是因为不需要得到服务器的同意，并且会给服务器降低损耗减轻负担。同时随着而来也有安全性问题需要考虑。2.5MySQL数据库MySQL是一个SQL数据库管理系统，它是功能强，灵活性强，应用编程接口丰富，系统结构精细的数据库管理系统，并且它是属于开源的数据管理的系统。正因为有了这么多强大的功能才会有许许多多的自由爱好者和商业软件用户选择使用它，特别是为了构建一个动态的网站数据库，选择了Apache和PHP/Perl相结合的方式，这给网站数据库的建设带来了强大的推动力。MySQL是一个多用户、多线程的数据库服务器。目前，世界上最标准化、最流行的数据库语言是SQL语言。SQL也是一种标准化的语言，它使存储、更新和访问信息更加容易。MySQL语言是以实现客户端和服务器结构为目的的，它的组件是各种客户端程序和库，以及服务器守护程序mysqld。快速、健壮和容易使用是MySQL的主要功能。在初阶段我们非常想拥有一个SQL服务器，是因为它和其他服务器一样也是属于大型数据库，但整体的速度更快，所以就开发出来了MySQL语言。MySQL的系统架构图如下：图2.4MySQL系统架构图3界面设计分析界面设计又称UI设计，一般指人机交互、操作逻辑和界面美观的总体布局设计。界面设计又分为实体类型和虚拟类型两种。在互联网行业内大家常常都选择的是虚拟UI。相对较好的界面设计会让软件的个性标签、目标人群等一些有效数据都有大幅度提升，还可以让软件的操作变得更人性化、简单明了，让用户的体验得到提升。3.1需求分析完整的微信微商城小程序都会对每一个用户都产生相应的影响。对于用户或者和消费者而言小程序类型的也是需要具备购物界面、商品详情页界面、产生的订单页面、个人中心页面；对于用户而言需要登录进入自己账户、订单界面、购物车管理页面等一写的操作；用户还需要在这个小程序内完成购买商品、订单查询状态、修改地址信息，同时在搜索页上对用户想要的关键字进行查询时页面需要跳转给到相应的产品。这些都是根据一些资料查询得出的用户网购的基本需求。小程序需要结合这些需求的同时还要相应的减少与主题或者核心功能无关的模块，要加强为用户提供即用即走、方便快捷的用户体验。图3.1用户需求图3.2页面界面分析对于APP或者小程序而言，页面的整体框架都是一个基础，就先睡你想要造一座房子，那么你首先需要为这个房子选一个好的地盘，然后需要为他打一个地基。所以我们的界面也是需要一个地基，这个地基就是UI设计图。UI设计图对于小程序来说，将会决定出有哪些核心功能、哪些辅助功能以及出彩功能。UI设计图的整体布局和搭建都是起到引导和规范作用的。根据微信小程序的特点，微信团队拟定了界面设计的建议和指南。充分尊重用户的知情权和实际操作权是设计指南建立的前提，主要是为了在微信的生态体系里面，可以建立友好、高效并且一致的用户体验，能在最大程度上满足和支持各方人士的需求，达到小程序服务方和用户之间的合作共赢。3.2.1首页界面设计分析小程序的首页设计如果确定下来就意味着整体尺寸和规范就定下来了。微信平台为开发者提供了两种设计，一种是深色配色的模式，一种是浅色配色模式。图3.1配色模式因为小程序收到屏幕尺寸的约束，所以小程序的页面导航应该要越简单越好。但是最好要跟微信官方的小程序导航样式保持一定的差异以便于区分。开发者可以根据需要开发的功能在考虑如何设计导航，并且需要在不同页面上展示是需要保持一致，指定的东西需要明确，进入和退出都要考虑。标签导航标签分页栏一般都是处于整个页面的最底部，它的作用是以便于用户可以在每个页面来去自如，也就是可以随意的切换页面。在原则上，标签的总数量不能超过5个，但也不能少于2个，一般为了保证能点击到想点击的区域，官方建议标签的数量不能超于4项。根据相关资料的查询到，整个底部导航高度是56px，宽度是适配整个屏幕的宽度。而里面的小图标的整体大区域是56px宽度、56px高度,整个图标的大小应该是28px宽度28px高度。且小图标下方的文字的字号大小是10px。小图标也是有两种状态的的一种是默认状态，另外一种是点击状态。图3.2首页界面图顶部标签顶部也有导航，只是和底部导航相较而言，底部导航跟受大家的喜欢。但是顶部标签页的颜色可以由开发人员定义。但是在自定义颜色选择中，可用性、可见性和可操作性是分页列必须维护的三个属性。搜索框搜索框的主要功能就是提供给一个搜索商品的功能，快速把你想要的商品按照规定的排列顺序给你进行挑选。但是大多数app或者是小程序都有这个搜索框及功能。所以需要给这个小程序设计搜索框。轮播图以滑动的形式在规定的区域进行展示，主要是作为凸显规定区域的内容或者产品的展示。比如大型的APP淘宝，它也拥有一个轮播图去对一些品牌的产品做一些单独的营销。轮播图的形式有5中，垂直滚动、水平滚动、文本垂直滚动、淡出、水平左右点击滚动这五种。常用的都是水平滚动和一些图文相结合达到宣传效果。图3.3轮播图展示图金刚区金刚区的位置是在搜索框的下面，是处于页面头部的算是一个核心功能区会引导一些用户的流量。多数情况下都以两行排列或者一行的宫格区图标作为展现形式。例如淘宝APP、支付宝APP、美团APP都是把一些主要功能都以图标的形式在金刚区做展示。金刚区设计的好会减少用户的流失，会增加用户对其使用的次数，从而增加营业额。金刚区的图标的呈现方式有三种：渐变、线性图标、填充图标。3.2.2分类界面设计分析分类是第二个界面，主要也是让用户不知道想要什么类型的商品是可以在这个页面按照不同的类别区浏览和挑选自己想要的商品或者信息。因为我们设计的是购物的小程序所以我们也是需要考虑分类页面的设计。该页面考虑到是微商城性质的购物小程序，所以我们将分为了大家电、热门推荐、海外购、苏宁房产、手机相机、电脑办公、个护健康、男装、女装等等的标签。我们选择了纵向滑动的导航因为它有很多优点，比如可以展示很多标签内容、逻辑层级很清晰、可以展示比较长内容的标题和部分内容、展示标题层级。因为我们的分类的类别较多所以正好适合使用纵向导航。3.4分类页面展示图3.2.3购物车界面设计分析当用户浏览很久商品时，总是会有碰到自己想要但又很纠结的商品那么就会启用到购物车这一个功能。用户获得微信小程序后，即可进入微信小程序购物系统客户端。无论是否允许用户获取微信头像和昵称信息，都可以进入微信应用的每个页面进行浏览。就是当用户选择不登录去浏览商品的时候也可以在每个页面去进行切换。当用户浏览应用的“主页”时，会触发浏览产品的功能。主要为用户浏览广告产品、浏览特殊产品、浏览新产品。该页面需要提供给用户都商品数据处理的功能。例如对某一商品进行数量的增减、全部管理的一个功能键、结算的按钮、对某一商铺或者全部购物车的商品进行选择、还有包括统计购物车总数量。3.2.4个人中心界面设计分析现在创建用户的个人账号都是APP或者小程序必须要办的一件事，因此也需要了解如何设计登录和个人信息的界面。首先登录界面应该做的简单清晰，可以让用户通过简单的指导就可以轻松的访问小程序。个人中心的交互逻辑要根据用户的体验设计的更加人性化。任何社交平台的APP或者小程序都会为用户准备个人账户，同时也是非常关键的一个部分。在网络的虚拟世界里可以允许用户进入并且能够与其他用户共享个人信息。在设计上想要提高整体的便利性需要通过用户体验设计来最大限度的提升。这样就需要考虑个人资料页面应该明了可见，同时又要限制展示的信息量，否则个人信息页会太过于复杂会引起用户体验度降低，所以简洁明了的导航是非常重要。4系统设计与实现4.1项目总体架构该小程序在整个架构上主要分为微信客户端、服务器和数据库。其中，wxml、wxss、JavaScript及其丰富的Mina框架组件是微信小程序客户端的主要组件。用户界面和功能主要依靠MVC模式来设计和实现，商家可以直接和用户直接进行沟通交互，提供非常顺畅的购物体验。小程序的框架中包括框架接口、配置、场景值、wxml、WXS这些部分。配置小程序的配置有3种，它们就是全局配置、页面配置、sitemap配置。全局配置是利用根目录下的app.json文件可以直接写出微信小程序一些功能。以下是一些常用的介绍：图4.1全局配置表Pages配置是指定小程序有哪些页面组成，每一个页面都有对应的页面路径还有文件名等的信息。不要在文件名中写入文件后缀，因为框架会根据位置的.Json、.js、.wxml、.wxss这四个文件自动分了类之后做处理。所以，我们的小程序有多少个页面，Pages配置底下就有多少文件夹选项。第一项的数据就代表小程序的初始页，第一项的数据就代表小程序的初始页，如果小程序中需要增加或者减少页面那么也需要对pages数组去做修改。因此我再设计小程序的过程中设置了⾸⻚、分类、购物⻋、我的⻚⾯，编辑app.json中的pages选项如下：图4.2pages配置图Window配置可以用来更改小程序的状态栏、导航、标题还有背景色的属性。导航的背景颜色可以使用“navigationBackgroundColor”来改写导航栏的背景颜色，“navigationBarTextStyle”可以用来改变标题字的颜色，“navigationStyle”是改写导航的样式，它提供了两个值：一个值是default默认样式不能调整导航栏，一个是custom是自定义导航栏，选择留着右上角按钮的位置和样式。图4.3window配置4.2项目开发方法及环境部署面向对象的开发方法通常是被开发人员作为第一选择的，封装性、继承性和多态性作为他的特性常常被用来将系统分成各不相同的几个板块，虽然每一个板块都要自己不同的功能需要设计和实现，但是也可以在开发过程中分板块来集中进行开发，每个板块都集中开发过后再将每个板块进行合并代码做集中的开发，这样就会让整个代码看起来比较清楚，而且不容易混乱构架也比较规整，方便了开发工作。但是这一次我没有选择面向对象作为开发方法，我选用微信团队开发出来的微信开发者工具作为媒介。微信开发者工具是微信团队为小程序开发提供的平台，这个工具具有代码编辑、开发调试及程序发布等功能，可以让开发者既简单又高效率的开发自己的微信小程序。当开发者需要启动微信开发者工具时，开发者需要使用自己的手机登录微信账号通过扫描二维码登录进去微信开发者工具，然后就可以用过微信开发者工具去进行开发工作了。首先需要在浏览器中下载并且安装好微信开发者工具这个软件还需要将自己的微信绑定这个软件，在绑定过后成功登录就可以开始新建自己的新项目了。在登录微信开发者工具之后可以在列表页选择自己新建的项目类型，在这里我们就选择小程序了。图4.4新建页图当你点击新建一个小程序时你必须要有自己的帐号，同时，您需要登录微信账号，选择成为appid开发者；您还需要使用app.json或project.config.json选择空目录或非空目录。如果选择空目录，可以选择是否在此目录中生成简单目录，同时也可以选择需不需要后端服务。当这些完成之后就可以点击新建了。图4.5新建小程序图它有三大功能模块分别模拟器、调试工具和小程序操作区。模拟器是指真实模拟该小程序在移动端上的真实逻辑状态，因为大部分的API的组件都是在模拟器上区查看最真实状态。该模拟器可以在移动端模拟小程序的性能。小程序的代码编译后可以直接在模拟器上运行。开发人员可以选择不同的设备或添加自定义设备来调试小程序在不同大小模型上的自适应。当前场景值、页面路径和正在运行的小程序的页面参数可以直接在模拟器底部的状态栏上看到。它的位置是在最上面的工具栏里面，但模拟器这个图标变成绿色时表示该功能已经在功能区进行展示了。白色图标展示代表该功能暂时还没有开启。图4.6模拟器调试工具有六个部分：wxml、console、sources、network、appdata、storage和wxmlpannel、wxmlpannel。这些部分用于帮助开发人员使用wxml转换接口。实际上，我们可以从这里看到wxss最真实的页面结构和相应的结构属性。在修改相应wxss属性的同时，我们可以在模拟器中看到修改。如果您想快速找到与页面中的组件相对应的wxml代码，可以在调试部分选择选择器来找到它。图4.7属性表应用操作区的功能是为开发者提供一些移动环境操作，比如当用户想退出购物应用到微信聊天界面时，就会调用小程序后台的一个API的组件。当你点击屏幕或者滑动屏幕都是需要能够有相应的变动。当你完成代码编写可以点击预览功能，工具会自动编译和构建代码同时生成代码包上传到微信服务器上，上传成功后会显示一个二维码，开发者可以使用微信扫一下二维码就可以在手机端查看小程序的内容了。图4.8预览图4.9操作区4.3微信小程序的购物系统设计与实现该小程序可以支持用户浏览商品、将商品添加到购物车、管理购物车中的商品、搜索商品、浏览商品详情页面等主要功能。我们需要在微信应用中使用Mina框架来编写漂亮的UI设计界面。同时，我们还需要微信应用购物系统的移动终端、本地服务器和微信服务器的API接口的支持。只有将API设计嵌入到整个接口中，才能完成上述操作。除此之外用户在使用微信购物小程序购买任意一件的商品所产生的数据都是需要服务器和数据库进行交互的。在购物小程序的代码设计过程中，我们需要遵循MVC的设计思路和模式，文件.js充当控制器，而文件.model.js充当模型层。如果在文件编写过程中还需要调用本地的服务器接口代码的话，就相当于在MVC中的视图层，就是.wxml文件和.wxss文件。从这些参考知识上去编写小程序的界面和功能板块。为了实现移动终端，本节全面介绍了移动终端的代码实现原理以及与服务器的交互，重点介绍了五个模块的详细设计与实现，这四大模块分别为商品信息展示的页面、商品分类的页面、购物车页面、个人中心页面。4.3.1移动端与服务器的交互设计移动端和服务器进行交互有两种方式可以进行选择，一种是基于移动API的开发，另一种是基于移动浏览器的开发。基于移动API开发的交互过程是移动终端通过HTTP协议访问服务器的一个页面，然后服务器进行处理，再把这个页面生成只有文本数据流，当移动端接受到JSON流之后可以转化成对象、业务处理、显示等的。图4.10基于手机API开发的结构图我选用了这个开发结构，小程序的每一个页面要实现还需要得到服务器的支持，除了这些之外，移动端也要能接到用户的动作时，也需要得到服务器的数据来更新页面的数据。在这些过程中都是通过移动端的.wxml文件、.js文件、服务器这个三个文件相结合的才能实现的。4.3.2商品浏览展示的设计实现购物小程序中用户去浏览商品是最基础的操作，这个板块的操作主要是小程序的首页中体现的。首页中的搜索功能、轮播图、金刚区的图标以及下方的banner广告商品都是体现了浏览。用户点击轮播图进入下一级页面，就会跳出很多符合轮播图内容的商品给用户进行选择。轮播图也是当用点击进去的时候就会自动跳转到新的下一级页面为用户提供选择。图4.11首页展示图根据一些需求设计出了这样的一个图，主要可以实现的功能是：用户可以通过搜索框直接去搜索自己想要的商品；轮播图上