【基于微信小程序的网络购物系统的设计17000字】

基于微信小程序的网络购物系统的设计目录 1 11.1.1网络购物的现状 11.1.2网络购物的优势所在 1 3第2章开发工具与技术 52.1环境准备 52.1.1注册账号 52.1.2获取APPID 5 52.2项目技术选型 5 62.4小程序模块简介 72.4.1主页 72.4.2分类 8 92.4.4个人中心 2.4.5商品详情 2.4.6支付页面 2.4.7订单查询 2.4.8商品搜索 2.5本章小结 第3章小程序数据库设计 3.2数据库概念结构设计 3.2.1系统功能分析 3.2.2数据库设计 商品分类表(cate) 首页商品分类导航名称表(floor_title) 商品信息表(goods) 2商品图片表(goods_pic) 用户订单表(order_goods) 用户地址信息(order_list) 主页楼层信息(product_list) 主页轮播图(swiper) 用户微信信息(user) 3.3本章小结 第4章小程序前端页面设计 4.1小程序设计概述 4.2小程序首页布局 4.2.1布局介绍 4.2.3本小程序首页布局 4.3小程序分类页面布局 4.3.1布局介绍 4.3.2各大购物小程序分类布局分析 4.3.3本小程序分类页面布局 4.4小程序购物车页面布局 4.4.1布局介绍 4.4.3本小程序购物车页面布局 4.5小程序个人中心页面布局 4.5.1布局介绍 4.5.2各大购物小程序个人中心页面布局分析 4.5.3本小程序个人中心页面布局 4.6小程序商品详细信息页面布局 4.6.1布局介绍 4.6.2各大购物小程序商品详细信息页面布局分析 4.6.3本小程序商品详细信息页面布局 4.7小程序商品列表页面布局 4.7.1布局介绍 4.7.2各大购物小程序商品列表页面布局分析 4.7.3本小程序商品列表页面布局 4.8小程序结算页面布局 4.8.1布局介绍 4.8.2各大购物小程序结算页面布局分析 34.8.3本小程序结算页面布局 4.9小程序收藏商品列表布局 4.9.1布局介绍 4.9.2各大购物小程序商品收藏列表布局分析 4.9.3本小程序商品收藏列表页面布局 3 5.1结果测试 5.1.2测试过程与结果 6.1展望 6.2.1改进措施 6.3本章小结 结论 40微信目前在中国的市场十分庞大，拥有着海量的用户，安装上一个微信APP,满足日常方方面面的使用，而微信上也搭载了许许多多的功能，但拥有自己的购物APP,也有微信小程序app对用户进行一个分流，既能方便原本用户在多平台上进行一个使用，也方便了从未使用过它们于用户而言，实体店进行购物，可能并不能完整的浏览到所有的商品属性一—如颜需要聘用大量员工的问题，甚至只需要一个人就可以维持网络商城的一个管理(不涉及维护)。其次，商家不再需要进行接待客户，客户自己即可完成挑选、购买等一系列的企业现在都开始使用微信进行营销.搭建微信公众平台.无论是对干企业亦或是个人来商家分去。而微信小程序就不一样了，公司能够通过微信小程序去主动获公司能够将微信小程序与关联微信公众号进行开展关联，随后根据公众号的推文来获得流量。除此之外，还能够根据周边的微信小程序以及其微信小程序内置的许多丰富多彩的营销推广软件来获得顾客。现在的大型电子商务平台，很多人都不会每天去访问很多次，这样一来，公司做的许许多多的营销手段都很难传达给客户，客户就无法了解到平台的优惠力度，从而使得平台的营销手段能够得到的利润大大降低。但微信小程序不一样，微信小程序背靠着微信，而手机微信也是现阶段应用人数最多的一款软件。因此，大家每日都会频繁的去打开微信，而商家的信息都会通过推送发送给用户，用户就能够获取到商家的信息，使得营销手段能够正常发挥。因此，商家们为了满足用户的购物需求，提高营业额，开发基于微信平台的网络购物系统具有一定的现实意义。1.1.3国内小程序发展情况小程序在我们的生活当中无处不在，不少商家通过微信小程序使得自己的转型变得成功，也有不少的企业以及个人通过微信小程序获取了极大的利润，这就使得越来越的的企业以及个人都开始使用微信小程序。一.小程序不断地进行更新，腾讯也在不断的进行小程序的宣传以及扩张[11]腾讯负责小程序的团队不断地对小程序进行更新，也在不断的开发小程序新的功能，使用小程序的渠道也越来越多，通过扫一扫从二维码进入小程序，通过微信自带的搜索功能进入小程序，通过好友或者微信群、朋友圈分享出来的小程序分享信息进入小程序，通过使用手机里面其他的app应用跳转到微信小程序11,通过多种多样的方法对用户进行微信小程序的投放。腾讯的更新力度以及更新速度十分大力且迅捷，腾讯对小程序的重视已跃然纸上。二.央视也开始接连对小程序进行报道，小程序也开始进入人们的视野，受人关注越来越多微信小程序上线的首日，央视就已经开始对小程序进行报道；而第一个吃螃蟹的企业就高达上百个，它们使用微信小程序进行商业扩张，覆盖教育、媒体、交通、房地产、生活服务、出行、电商、餐饮、民政民生、科技等多个领域11。此外，央视的报道内容也清晰的讲述了小程序开发难度低，开发门槛不高，在央视的持续报道之下，小程序的重要性也已经越来越明显。三.使用小程序进行商业扩张的商家越来越多，小程序覆盖面越来越大经过了长时间的发展，现在我们打开小程序，在我们定位附近，有数不胜数的商家使用小程序。而这些使用小程序的商家也都注册掉了许许多多的行业内使用的词语，大使用微信小程序的人数十分之多，但是许多用户都还并没有养成使用习惯，截至2018年底，微信小程序用户规模超6亿，经常使用微信小程序的用户仅占34%,用户多样，小程序需要增加多种功能，使功能能够覆盖用户使用面是当下需要努力的方未来，只有具有多种使用功能的小程序才会被用户所青睐，近7成用户青睐小程序，超4成用户则认为可以将手机中不常用的app删除掉，用微信小程序来作为替代，年轻的第1章开发工具与技术2.1环境准备开发微信小程序之前需要准备好相应的环境。首先，因为微信开发者工具编写代码并不是十分的方便，所以本次使用vscode进行编码，在完成vscode的安装后，在vscode中安装部分插件辅助开发，如微信小程序开发助手forVSCode,代码提示+语法高亮；微信小程序标签、属性的智能补全等。这些插件能够帮助我降低开发难度，提高开发效此外还需要前往微信公众平台进行一系列操作，操作如下。前往微信公众平台进行注册，使用从未注册过小程序或者公众号的微信进行注册，本项目开发使用的是我个人的微信号进行注册。2.1.2获取APPID微信小程序实现部分功能时需要索要开发者小程序中的APPID,所以需要获取用户的APPID,APPID在注册完成后可在登陆后的开发/开发管理、开发设置中查看自己2.1.3开发工具使用微信小程序自带的开发者工具，集开发、预览、调试、发布于一体的完整环境。[81但是由于小程序开发者工具的编码使用并不是很良好，本次项目开发使用vscode进行编码，微信开发者工具主要负责项目的预览以及测试。2.2项目技术选型本次项目开发使用微信小程序原生框架MINA。开发语言选择JavaScrip,WXML以及WXSS配合组件构成视图层，WXML进行数据绑定、列表/条件渲染、模板、事件和引用；WXSS则对界面样式进行编写和实现。此外，使用小程序原生组件进行开发：视图容器组件(ViewContainer):主要用于规划布局页面内容。包含cover-image、基础内容组件(BasicContent):用于显示图标、文字等常用基础内容。包含icon、导航组件(Navigation):用于跳转指定页面。包含：functionalnavigator、MySQL是一个小型关系型数据库管理系统，是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速MySQL的SQL“结构化查询语言”是用于访问数据库的最常用标准化语言，MySQL采用了GPL(GNU通用公共许可证),由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多使用者为了降低总体拥有成本而选择了MySQL作为数据MySQL的数据库在设计上，是将数据库按照互相之间的关系，储存在一个数据库中的不同的表上，通过各种操作进行CRUD,便于进行各种数据的增删查改操作。MySQL支持多线程编程，在并发上拥有良好的表现特性，设计得当能处理高并发带来的各种性能问题。MySQL支持索引功能，通过创建索引，索引维护，能加快在大量数据下的查询更新速度，在面对多人连接时MySQL的索引功能能提供极大便利。MySQL支持Json格式存储，这在开发过程中能带来极大的便利，将所有模块的展开类与List打包成Json格式存储进MySQL中，再读取时就不必要做另外的操作。MySQL支持事务，MySQL的事务有四大原则：永久性：即事务一旦提交成功，则永久对数据库做出修改[13。一致性：事务执行前的所有数据和事务执行后的的所有数据，两个数据都必须保持高度一致。原子性：这部分的操作不可分割，要么全部执行完毕，要么都不执行，不存在中间过程被影响的现象。然后事务执行过程出错就会回滚到事务没有提交之前的状态[13。开发工具与技术隔离性：每个事物之间都相互独立、互不干扰。事务在进行数据更新时是很有用，它的四项原则保证了它能保证各种并发操作中的高度一致性，在高并发时也能保证数据高度一致的效果。2.4小程序模块简介轮播图模块：轮播图模块主要进行一个商品的快速切换展示，展示目前有哪些商品是比较热门的或者是处于畅销情况，位于主页最顶端，最能吸引用户眼球，也是最能够让用户在进入小程序后第一眼能看到的商品推荐，轮播图能够放上高质量的清晰美观图片，吸引用户注意，吸引用户眼球。轮播图模块能够根据用户所选择的图片进行跳转，跳转到所选择的商品的详细信息时尚女装图2.1首页轮播图展示图时尚天意春季热门导航模块：主页的导航模块一共分为三个楼层，每个楼层内再细分五个分类，导航模块的作用一是能够快速帮助客户寻找所需要的商品，而则是能够让用户在不知道自己想要购买什么的情况下能够给客户提出一定的“建议”,让客户能够在没有想买东西的情况下产生想买东西的念头，帮助客户对小程序进行使用，导航模块首先要拥有清晰明了的字体，对商品进行说明，其次要配上鲜艳漂亮的图片，并且图片的内容需要匹配上字体的说明，可以吸引用户，也能够让用户快速对自己的目标进行浏览。导航模块能够根据所选择的超链接进行跳转，跳转到所选择的商品清单列表。夏装导航栏时尚女装优质服饰春季热门倒春寒清仓正当时户外运动O2.4.2分类分类页面主要分为左边的菜单(大分类)与右边的商品内容(小分类)。左侧大分类对所有的商品进行一个按照属性进行分配，如手机、衣服、手表等，右侧小分类则是将这些商品再进行一次分配，如按照品牌分类或者按照衣服的种类进行分类。商品分类首先有助于后期在后台中快速的进行一个商品的增删改查，其次在用户使用上也能够快速让客户能够精准定位自己所需商品的位置。分类页面可从右侧的商品内容超链接中进行一个跳转，根据所选跳转到所需要的商品清单列表。搜索大家电电脑办公电视小米小米索尼烹饪厨具男装男鞋女装空调变频空调立柜空调挂壁空调中央空调移动空调女鞋运动户外◎首页分类购物车我的2.4.3购物车获取收货详细信息模块：本模块位于购物车页面最顶部，通过授权获取用户微信中的地址信息并存入到缓存当中，若用户微信中没有地址，则需要用户手动填写地址与信息，然后打印出来显示在最顶部，信息有地址、收货人姓名以及收货人的电话。收货详细信息模块主要是为了能够让商家能够在用户支付后能够进行下一步的发货操作，在获取用户的授权后，用户的地址会存入数据库当中。获取收货地址获取收货信息模块结算(0)商品选择模块：商品信息列表最左侧放置复选框，通过选中或反选复选框从而达到选择功能。底部工具栏最左侧有商品的全选功能(全选框)。所有商品框被选中时，此时check为true,则底部工具栏中的全选框也被选中，反之全选框反选，此事件绑定事件change。复选框也绑定着最底部工具栏最右侧的总价格，通过所选进行与商品数量进行计算，存入data与缓存中，最后显示在最右侧。全选合计：¥0包含运费结算(0)商品信息模块：展示商品相关信息。商品数量修改模块：商品数量修改通过绑定事件进行触发，当商品数量被减少到为0时会触发弹窗询问是否删除该商品。在商品数量左右个放置一个按钮并分别绑定事件，左侧-按钮设置为-1,右侧+按钮设置为+1。获取收货地址1古旗袍礼服龙凤褂和服结婚乃1商品信息展示商品数量更改以及全选合计：¥648结算(1)图2.6购物车相关功能展示图开发工具与技术购物车获取收货地址购物车娉語新娘中式婚纱新款秀禾服复古旗袍礼服龙凤褂秀和服结婚孕…结算模块包含运费结算(1)图2.7购物车页面结算模块展示图2.4.4个人中心获取用户信息模块：此模块位于个人中心顶部，在未获取用户信息时显示按钮，提示用户进行登录，用户授权获取信息后获取用户的微信名称以及头像，获取后打印到顶部当中。收藏商品模块：本模块可查看用户收藏的商品的信息。查询全部订单模块：通过授权后获取用户token,并展示用户订单信息。联系客服模块：点击后唤起微信聊天功能，与客服进行交流。意见反馈模块：点击后进入意见反馈模块。推荐功能：点击后唤起分享功能，可通过微信聊天将该小程序分享给微信好友。个人中心个人中心联系客服2.4.5商品详情收藏功能：点击后收藏商品，将数据存入缓存当中，每次进入商品详情页面都会判断当前商品是否被收藏，收藏了则更改此图标。点击此图标时会先判断是否存在于缓存数组当中，如果已经存在则删除，即取消收藏，如果不存在，则将商品添加到收藏数组中，存入到联系客服功能：点击后跳转到微信聊天界面与客服进行交流。跳转购物车功能：此按钮绑定事件，点击后跳转至cart的index。分享功能：将该页面从微信聊天处分享给其他微信用户。加入购物车功能：点击后将所选物品加入购物车中，本模块还添加了时间限制，防止短时间内多次点击。购买功能：该功能与加入功能类似，但多了一个跳转功能，会跳转至cart页面商品轮播图【下单减500】美的Midea中央空调KFR-72T2W/BP2DN1-TR风管机一拖一变频3..收藏图文详情为了方便您找到我请点击收藏、加购物车底部工具栏加入购物车立即购买画收藏2.4.6支付页面在购物车处点击支付后则跳转至支付页面，支付页面只有支付功能，点击支付功能后唤起模拟支付。(个人用户无法唤起微信支付功能，只有企业用户才能唤起，此处仅进行模拟支付。)用户授权后获取用户支付订单的token值并存入缓存当中，然后跳转至订单页面。张东省广州市海珠区新港中路397号包含运费支付(1)2.4.7订单查询进入此页面后会判断缓存中是否有token值，若不存在则直接跳转到授权页面，获取url上的参数type,根据type来决定页面标题的数组元素，发送请求获取订单的数据，进行页面的渲染121。能效KFR-26GW/BpTYC1+1.kingpads克帕尔高档老花镜高TCL55A950U55英寸哈曼卡顿人工智能金属超薄64位32核…格力(GREE)1.5匹变频冷暖独立除湿挂机空调KFR-..TCL55A950U55英寸哈曼卡顿人工智能金属超薄64位32核…我的订单2.4.8商品搜索本模块位于主页顶部，为超链接，点击后跳转到搜索功能，首先绑定输入框值改变事件(input事件),获取输入框中的值，然后进行合法性判断，然后进行校验，通过后，将数值发送到后端，然后将数据遍历。为防止发送数据过多，设置搜索按钮，点击后才会开始如上操作。¥2899小米平板3WIFI版7.9英寸(暂无图片暂无图片小米(MI)无线鼠标白色2.5本章小结主要介绍了项目搭建所需相关环境的搭建以及小程序每一个页面所使用项目模块第2章小程序数据库设计3.1数据库设计概述对于任何一个完整的小程序而言，数据库是一个必不可少的部分。数据库的作用是进行一个信息上的管理，本小程序使用的是MySql数据库管理工具，以navicat作为中间件，对数据进行一个可视化操作，对本机的MySQL数据库进行管理以及开发。通在设计数据库之前，首先需要了解开发的小程序各个方面上的需求以及小程序所3.2数据库概念结构设计5、对商品信息进行分类、存储，方便使用者能够快速的从众多展示在眼前的商品当中本小程序购物商城一共用到9个表，分别是：商品分类id(cat_id):每一分类绑定一个固定的id,方便进行增删改查。数据层级(cat_level):通过划分数据层级进行数据绑定，层级为0的数据为左侧分类，为1的为右侧大分类标题，为2的为小分类。小程序数据库设计商品分类大家电电脑办公生活电器烹饪厨具男装男鞋女装女鞋运动户外钟表眼镜小米TCL小米三索尼空调变频空调立柜空调挂壁空调中央空调移动空调首页购物车商品同层级分类(cat_pid):同一层级内的cat_pid相同，方便后台区分。分类图标(cat_icon):用于存储分类页面图标。数据类型说明12分类名称3商品同层级4数据层级5功能：用于储存首页商品分类三个楼层的名称以及名称的图片。序号数据类型说明12楼层名称图片3名称(name):存储楼层名称，方便后台查询以及修改。图片信息(image_src):存储楼层名称(楼层名称用图片显示)。Id:每个楼层名称绑定一个id,通过id来进行数据绑定以及静态布局渲染。3、商品信息表(goods)功能：用于储存商品详细信息。商品id(goods_id):每个商品绑定一个单独的id。商品分类id(cat_id):所有同一类别的商品绑定相同的分类id。商品名称(goods_name):用于放商品的名称信息。商品价格(goods_price):用于存放商品的价格信息。商品收藏列表显示图片、商品列表显示图片、商品购物车显示图片、商品订单查询显示图片(goods_logo):存放各类列表中商品的图片。商品图文介绍(goods_introduce):商品详细信息处图文详情采用图片进行展示，此处存放图文介绍的地址路径。数据类型说明123商品名称4商品价格5商品介绍图片4、商品图片表(goods_pic)功能：用于储存商品相关图片。轮播图图片(pics_big_url):存放商品详细信息页面图片地址路径。数据类型说明1图片id23址4商品列表处图片地址5、用户订单表(order_goods)功能：存放用户订单数据。商品订单id(order_id):每个订单分配一个单独的id,通过绑定的id获取其他数据进行数据渲染。商品详细信息id(goods_id):存放商品价格信息。商品价格(goods_price):存放订单内单个商品价格信息。商品数量(goods_number):存放订单商品数量信息。商品总价格(goods_total_price):存放订单内所有商品的总价格信息。商品订单图片(goods_small_logo):存放商品订单列表显示图片的信息。用户信息(user_id):存放生成次订单数据的用户的信息。序号字段名称数据类型说明123商品价格4商品数量5商品总价格6商品订单图片7用户信息功能：存放用户地址信息。用户信息(user_id):存放用户信息。订单价格(order_price):存支付金额(order_pay):存放订单支付金额信息(因无法进行真机支付，此处只能为0)。用户电话(order_number):存放用户电话信息。用户地址(consignee_addr):存放用户地址信息。数据类型说明1用户信息2用户电话3订单价格4支付金额5用户地址7、主页楼层信息(product_list)功能：存放主页楼层信息的图片、跳转url等。楼层详细名(name):每个图片绑定一个昵称，方便后台管理。图片(image_src):存放分类楼层处显示的图片的地址路径。button标签属性(open_type):存放opentype的样式信息。跳转链接(navigator_url):存放每个图片点击后跳转的路径，此处绑定跳转商品列表的cat_id。序号数据类型说明1楼层详细名2图片348、主页轮播图(swiper)功能：存放首页轮播图数据轮播图图片(image_src):存放主页顶部轮播图地址路径。button标签属性(open_type绑定跳转的商品id(goods_id):存放商品id信息。商品跳转url(navigator_url):根据id信息绑定跳转路径。序号字段名称数据类型说明1轮播图图片234商品跳转url9、用户微信信息(user)存放所有来自用户微信中的信息：用户微信名(nickName)城市(city)、省份序号字段名称数据类型说明1用户微信名2城市3省份4国家5头像小程序数据库设计主要介绍了数据库相关各个表的详细数据类型以及讲述所有表内的详细存储数据内容。第4章小程序前端页面设计现如今，网络给我们带来了许许多多以前所没有的便捷，网络的时代早已降临。现在的人们在使用网络浏览内容的时候都是具有选择性的。一般来说，用户在选择时，第一眼看中的是浏览到的内容，第二眼看到的那就应该是内容的设计风格了。小程序前端的设计至关重要，他是展示在用户面前的最前端，是一个小程序整体最完美的诠释。如果在制作当中忽视了前端页面的设计，只强调小程序后台程序的重要性，那么没有一个良好前端展示的小程序将会流失许许多多潜在的用户，也就失去了一个小程序应该存在的意义。因此，前端设计必须要美观，必须要准确的显示用户所需要的数据、准确的显示用户所需要的物品，前端的设计必须科学，才能够精准的向用户展示一个小程序所拥有的此外，前端设计数据绑定也必须符合数据库的设计，这样才能够精确显示存入到数据库当中的信息，使得后台当中的数据信息能够完美匹配前端设计的页面。4.2小程序首页布局4.2.1布局介绍一个小程序的首页是用户进入小程序时第一眼所能够看得到的页面，首页是一个小程序也是一个购物网站至关重要的部分，它是小程序的门面，一个小程序的门面决定了用户看到这个小程序第一眼的印象，若是门面给用户带来的第一眼印象不好，用户是不会愿意继续往下使用的，就算勉强进入后，可能能够成为持续用户的可能性也大大的降本次课题研究的内容为微信小程序购物小程序，为了设计一个美观、科学的小程序主页，首先就要对目前网络上的现有的知名购物小程序进行一个分析，通过分析后取其精华去其糟粕，再结合自己的理解与认知，结合自身能力对小程序的首页进行布局4.2.2各大购物小程序首页布局分析目前网络上比较知名、用户也十分多的大型购物网站有淘宝、京东、苏宁等，他们不但有着自己的web、app也有着移植的小程序应用，面对用户十分广泛，因此设计也十分的科学、雅观、方便、好用。本次课题为小程序研究，所以这次只以它们的微信小程序进行分析。京东购物小程序的布局最顶部是搜索框，搜索框下则是首个小分类；分类之下是一个滚动的轮播图，轮播图之下是带有icon图标的导航，该导航通过左右滑动模块实现布局，节省空间；下面则是哥各个卖点的分块展示以及降价促销。苏宁易购小程序的布局与京东相差无几，只是少了一个轮播图，其他部分也是相差通过对几大小程序的分析可以得知，一般购物小程序首页有这些内容：搜索框放置在整个首页的最顶部，下面则紧挨着轮播图。主页最底部工具栏底部则是各大模块的tabbar:,进行相关页面的跳转，如购物车、个人中心、商品分类、首页。4.2.3本小程序首页布局本小程序首页命名为index。通过上述分析，总结本小程序的首页布局。本网站为B2C网站，则小程序顶部导航栏名称设置为“邑购”,导航栏下方则为搜索框，置顶与整个首页；下方为轮播图，轮播图下方则为分为三个楼层的分类导航。最底部tabbar则设计为最左侧首页、左二分类、右二购物车、最右侧个人中心。4.3小程序分类页面布局4.3.1布局介绍小程序的分类页面则是用户在进行使用时的第一道分流方法，用户在此处首先能够快速进行自己想要浏览商品的一个快速查询、快速搜索以达到前往的目的。分类功能能够方便用户，一个良好的分类功能不但能使用户提高使用效率，更能够给用户留下良好的使用印象，这样用户就会提高留下来继续使用该小程序的意愿；其次良好的分类功能也给后台管理提供了更加方便的维护，提高维护的效率。4.3.2各大购物小程序分类布局分析苏宁易购的分类页面，顶部导航栏中有一个搜索框，下方则分为两部分，左侧为商品信息分类，右侧则是商品内容分类，商品内容分类拥有符合内容的img图片，左侧分类以及右侧分类皆拥有上下滑动功能。京东购物小程序与苏宁易购小程序的分类页面完全一致。4.3.3本小程序分类页面布局本小程序分类页面命名为category。通过上述分析，总结本小程序的分类页面布局，顶部导航栏名称设置为商品分类，导航栏下方则为搜索框，搜索框下方则为分类，左侧为商品信息分类，右侧则为带有图标的商品内容分类，商品信息分类与商品内容分类都具有下拉功能，通过scroll-view组件实现此功能，此功能可方便页面布局，使得不会有过多的信息一次同时展示在同一个页面当中，使得页面臃肿。4.4小程序购物车页面布局4.4.1布局介绍购物车是一个电商购物不可缺少的部分，它存放着用户在使用你程序时心仪的商品，因此这个功能十分重要。购物车存放着用户所加入购物车的商品，一个良好的购物车页面首先需要拥有美观的设计，其次需要能够清晰的展示用户所加入购物车的商品，最后也是最重要的功能，能够对用户加入到购物车里面的物品数据进行一个管理，此外也要清晰的展示商品的价格等详细信息，最后需要在结算处能够准确地显示全部商品的总价格以及总数量。4.4.2各大购物小程序购物车页面布局分析苏宁易购的购物车页面，最上方则是显示优惠卷的信息以及领取优惠卷，下方显示加入购物车的商品，当购物车为空时显示“购物车还是空的，快来挑选好货吧”,此时是没有结算按钮的，购物车最下方则是“猜你喜欢”,推荐商品。随便选择一件商品加入购物车后，底部显示出结算按钮，结算按钮显示结算商品总数量，显示结算商品总价格，底部工具栏最左侧则是全选按钮，可选择商品，商品详细处则是显示商品的详细信息、详细价格、以及商品数量的一个修改功能，最左侧则是一个复选框，该复选框绑定工具栏的全选框。京东的购物车页面顶部则是收货地址的显示，下方商品信息处与苏宁一致，底部则是“可能你想要”,与苏宁一致；结算处与苏宁一致。4.4.3本小程序购物车页面布局本小程序购物车页面命名为cart。通过上述分析，总结本小程序的购物车页面布局，首先顶部需要放置用户收货地址，当没有地址时获取地址，获取地址后将地址打印在此处；地址下方则放置加入购物车的商品内容，此处能够更改商品的数量，也能够通过复选框选中或者反选商品，在没有商品加入购物车时，此处显示一张内容为“请加入购物车”的img图片提示用户将商品加入购物车。底部工具栏最左侧设置全选框，与上方复选框绑定，通过判断check是否为true实现全选功能的选定以及反选，右侧总价格绑定商品的价格，通过商品数量与商品价格以及选中的进行计算，最后打印在此处，右侧结算按钮显示商品的总数量并且跳转到结算页面。4.5小程序个人中心页面布局4.5.1布局介绍个人中心页面是购物小程序的一个不可或缺的内容，首先它能够加载用户的个人信息，展示用户自己，其次也能够对商品订单进行一个浏览，该处首先要能够清晰明了的展示功能，其次也需要拥有完备的功能，此处主要进行购物信息的浏览以及购物过程中拥有问题的反馈。目前各大电商平台的个人中心页面不但包括了上述内容，更拥有许许多多的拓展功能，如：领取优惠券、购买保险、贷款等其他拓展业务，对他们公司的业务进行一个补充以及发展。4.5.2各大购物小程序个人中心页面布局分析苏宁小程序个人中心页面顶部显示用户的姓名以及头像，下方显示商品收藏、店铺收藏等功能，在下方显示商品订单的管理功能，底部则是用户优惠卷等功能，最底部则是一系列其他功能。苏宁易购个人中心页面与京东个人中心页面一致，相差无几，布局顺序略有不同，内容几乎一致。4.5.3本小程序个人中心页面布局本小程序个人中心页面命名为user。分享小程序，咨询客服，则顶部放置收藏的商品，由上往下依次是查看订单，咨询客服，分享小程序给微信好友。商品收藏以及查看订单设置为超链接跳转到相应页面，分享以及咨询客服设置为绑定了微信相关组件的按钮进行直接操作。4.6小程序商品详细信息页面布局4.6.1布局介绍商品详细信息页面则是对该商品的完美诠释，该处布局至关重要，该处布局决定了用户能够浏览到的信息是否足够，用户浏览到的信息将决定了用户是否能够清楚明了的了解所要购买商品的详细信息，该处不但需要能够让客户清晰明了的了解到商品的属性，更要有充足的其他功能对该处进行完善，例如客服，对用户对该商品的疑问进行解答，加入购物车等功能对商品购买进行完善一个良好的商品详细信息页面布局决定了商品能否被用户充分了解，该处布局至关重要，因此需要考虑许许多多的因素。不但需要美观的设计，更需要有科学的排版，此处可参考各大电商平台的商品详细信息页面，取其精华去其糟粕。4.6.2各大购物小程序商品详细信息页面布局分析苏宁小程序顶部为商品的大图片，不具有轮播图功能，但可左右滑动图片浏览不同的图片，下方显示优惠时间、优惠价格、原价、在下方则显示商品详细信息，商品详细4.8小程序结算页面布局信息下方容器显示各类活动，该容器下方则显示配送地址时间以及拥有的服务，该容器下方则显示评价以及问答，问答下方显示商品详细图文信息、规格参数、包装售后等，最下方推荐其他商品京东小程序与苏宁小程序详细信息页面布局完全一致。4.6.3本小程序商品详细信息页面布局本小程序商品详细信息页面命名为goods_detail。由上述分析，总结商品详细信息页面布局，顶部放置商品轮播图，展示商品，设置自动播放，图片下面放置伸缩盒子，放置商品名称、价格伸缩盒子右侧放置收藏功能，底部放置商品图文信息，底部工具栏从左到右依次为客服，分享，购物车，加入购物车，立即购买。4.7小程序商品列表页面布局4.7.1布局介绍商品列表是面对用户的一个主要展示手段，用户搜索出来的商品都将通过商品列表对用户进行一个展示，首先，展示出来的商品图片需要清晰明了，价格也需要清晰明了，商品的名字信息也需要清晰明了，这三个属性决定了用户能否通过这一模块对商品进行一个准确地寻找。商品列表的布局亦是需要科学的排版以及美观的设计，舒适的界面设计以及交互能够增加用户使用感，不会让客户厌烦，让客户能够舒适的使用。4.7.2各大购物小程序商品列表页面布局分析京东商品分类页面顶部为搜索框，搜索框下方为一个伸缩盒子，伸缩盒子内拥有三个id,综合、销量、价格，通过这三个进行排列，下方则显示商品的图文以及价格展示。苏宁与京东布局此处完全一致。4.7.3本小程序商品列表页面布局本小程序商品列表页面命名为goods_list。由上述分析总结，本小程序商品列表页面布局，此页面可上下滑动进行数据的加载，通过上滑加载下一页数据，通过顶部下拉可进行页面刷新，每页最多存放商品信息有限，下拉刷新时弹窗提示下拉加载数据，每个商品信息展示为左边显示商品图片，右侧显示商品价格以及信息。4.8.1布局介绍结算页面是对加入购物车商品的结算，需要能清晰展示加入结算的商品的图文信息以及价格信息，其次是能实现支付，本模块是对购物车模块的一个补充以及延伸。4.8.2各大购物小程序结算页面布局分析苏宁顶部为获取用户地址，获取后打印在此处，下方则为商品的名称以及价格，底部显示用户优惠卷的信息京东结算页面与苏宁基本一致，但多了一个支付方式的选择。4.8.3本小程序结算页面布局本小程序结算页面命名为pay。由上述分析，总结本小程序的结算布局，顶部放置由购物车获取的用户地址、姓名以及电话，下面放购物车中勾选结算的商品，底部显示价格，总体布局与购物车相差无几，减去了购物车中的选择更改功能，点击结算后唤起模拟支付功能(个人用户无法实现唤起微信支付功能，只有企业用户才能唤起微信支付功能，此处仅进行一个模拟支4.9小程序收藏商品列表布局4.9.1布局介绍收藏商品功能作为展示用户收藏商品的一个模块，其定位其实与商品列表模块十分相似，商品列表模块展示的是用户搜索出来的商品，而收藏商品列表则是展示用户收藏本模块功能与购物车的功能类似，但是没有结算功能与数据更改功能。4.9.2各大购物小程序商品收藏列表布局分析苏宁具有收藏功能，但未找到收藏列表的入口。京东收藏页面顶部伸缩盒子拥有分类，左侧为商品收藏，右侧为店铺收藏，下方具有分类功能，分类功能下方显示商品详细信息以及商品价格，商品图片，最底部则是推荐其他商品。4.9.3本小程序商品收藏列表页面布局本小程序商品收藏列表页面命名为collect。根据上述分析以及实际使用，本模块的布局与商品信息列表极其相似，因此布局也差无几，本页面拥有上下滑动功能，每个商品信息展示为左边显示商品图片，右侧显示商品价格以及信息，点击后可跳转至绑定goods_id的商品详细信息页面。4.10本章小结主要介绍了分析目前市场上现有的大型购物小程序的页面功能并进行本小程序前端页面设计分析以及小程序页面模块相关前端设计以及功能设计详细内容。第5章测试结果5.1结果测试5.1.1测试环境程序所有代码完成编写，进行测试，测试环境为手机真机安卓系统以及电脑win10系统，测试软件为MySQL、VisualStudioCode1.55.2以及微信开发者工具，通过花生壳进行内网穿透使得本地数据能够在真机调试中访问。5.1.2测试过程与结果打开数据库，连接数据库与小程序，将index作为起始(主页)。①点击真机调试手机扫码后进入。(该调试方法通过内网穿透达到本地数据能够在真机调试中访问的效果。)②直接在微信小程序开发者工具当中进行测试。进入首页，页面布局正常，数据库连接正常，数据正常显示，点击轮播图可正常跳转，轮播图正常自动切换。下方导航栏点击后正常跳转，与绑定的cat_id一致。进入商品分类，点击左侧大分类，右侧小分类可正常加载，与cat_pid一致，点击右侧图标进入商品列表，商品列表加载出来的商品与绑定的cat_id一致，商品信息正常进入购物车，顶部未加载地址，点击后进行授权，同意后地址正常显示在顶部。此时未选择商品，直接点击结算，提示未有商品功能正常显示。进入个人中心，未获取用户信息，此时顶部显示登录，点击后跳转提示获取用户授权，授权后获取信息，可正常将用户微信头像以及微信昵称打印在顶部当中。点击收藏的商品，被收藏的商品正常显示在收藏商品类表当中，点击收藏的商品，正确跳转至商品详细信息，返回个人中心，点击订单查询，正确显示了订单，返回个人中心，点击分享功能，正常弹出分享界面，点击客服功能，正确弹出客服聊天窗□。进入商品详细信息页面，点击客服可正常跳转到微信聊天窗口，点击分享，跳出分享链接可正常分享给微信好友，点击购物车，可正常跳转到购物车页面，点击加入购物车后，提示商品已加入购物车成功，再点击购物车，可发现商品已成功加入购物车，返回商品详细信息页面，点击立即购买后，所选商品正常加入购物车中，也正常发生跳转。此时购物车中已有商品，为方便进行测试，添加一个不一样的商品后返回购物车，此时左侧复选框全被选中，底部工具栏全选框被选中，商品总价格正常显示两商品总价格，结算数量正常显示为2。此时点击一号商品左侧+号，商品总价格增加正常显示，商品数量正常更改显示。将二号商品点击-号，提示是否删除功能正常，点击确定删除商品。此时返回商品详细信息页面将商品重新加入购物车，点击左侧复选框，底部工具栏全选被反选，功能正常。点击结算跳转至结算页面，商品的信息显示正常，点击结算，因个人用户无法实现唤起微信支付的功能，此处仅进行结算的模拟。结算后跳转至商品订单页面，商品订单正常显示，此时返回值购物车，购物车中的缓存也已被删除，功能正常。主要介绍了本次研究小程序各模块功能的相关测试以及结果。6.1展望由于个人经验的缺乏以及掌握的知识并不牢固，小程序的功能并不是很完善，代码编写的也比较繁琐，在编写过程中也要不断的去寻找教程查看详细代码段的编写，也缺乏了创新。小程序美观度也并不是十分足够，wxss的编写也要反复查看静态结构属性才能进行编写。在功能上，也只是能够实现一些比较初级的操作，在前端页面中，对于JavaScript的使用也并不是能够得心应手，并不是十分的熟练，也并不是十分了解、十分熟悉，为此也不得不放弃了一些想要实现但是在最后小程序中却没有能够实现的功能。目前还有待学习以及提高在前端以及后端中的知识。此外小程序的支付功能也无法正常实现，只有企业用户才能