【《基于uni-app的网上购物小程序设计实现研究》8900字（论文）】

第PAGEV页基于uni-app的网上购物小程序设计实现研究摘要现如今我国网络设施的不断完善，信息技术的不断发展，各种第三方支付的普及。手机购物已经成为人们生活中的一个重要组成部分。小程序是微信生态系统的重要组成部分。对于10亿微信用户来说，小程序商城也是一种新型的电子商务。从现有的网站电子商务、应用电子商务和快速发展的小程序电子商务来看，小程序购物为中心的活动方式已经到来。据目前不完全统计，其前景是非常可观的。它使用人们可以触及的消费方式，在人、商品、市场和服务方面形成一场新的革命。微信的移动网购充分利用了智能终端的便携性，让您可以随时随地购买喜爱的产品。购物中心系统是以互联网为基础，以周边生活圈为基本单元，充分利用区域的信息基础设施。新的电子商务模式是将实体店中的小店铺与生活圈中的网上购物中心相结合，是对传统电子商务的一个新的突破。注重消费者的便利性，会员的互动式营销，满足实体的需求。本文主要使用uniapp实现对购物小程序的实现，主要工具有HBuilderX，MySQL数据库，采用了前端Javascript，HTML，CSS，等编程语言实现关键词：小程序，购物，uniapp目录1绪论 11.1 研究背景及意义 11.2 研究现状 11.3论文结构及内容 22系统分析与设计 32.1设计目的及原则 32.1.1系统设计目的 32.1.2设计原则 32.2系统技术分析 32.2.1前端技术 32.2.2后台技术 62.2.3系统架构 82.2.4Mysql数据库 82.3功能分析与设计 82.4数据库设计 92.4.1概念结构设计 93购物系统实现 133.1前台模块 133.1.1首页 133.1.2分类模块 143.1.3购物车页面 153.1.4我的页面 163.2后台模块 193.2.1账号管理模块 203.2.2首页管理 203.2.3分类管理 223.2.4产品管理 233.2.5订单管理 244小程序系统的使用 264.1使用说明 26参考文献 321绪论研究背景及意义随着Internet+的兴起，基于平台的应用程序再次流行起来。其中，微信小程序非常受欢迎，因为它拥有强大的用户基础和方便的应用程序。在此基础上，拥有小型项目的社交电子商务公司作为运营商，将志同道合的社区成员组织在一起，推广符合他们需求的产品或服务，并轻松实现流量货币化。在电子商务快速发展的过程中，微信小程序中的电子商务交易已经成为采购业的主要销售模式。微信小的这种电子商务交易的发展也是互联网发展的一个新的发展渠道。它依赖于网络技术和现代通信技术的快速发展，为人们提供更好的舒适性，其次，它还可以提供产品。对于广告，这些技术还可以用于实现在线购买、查看产品信息和其他操作流程。研究现状近年来，随着互联网的不断发展，电子商务的发展也更加成熟，而社交电商成为电子商务中的一匹黑马。继淘宝、京东等国内电商之后，拼多多异军突起，杀入社交电商，拼多多用户可以发起拼团，和家人朋友组团购物，可以以更低的价格购买到优质商品，而发起拼团成功的主要因素在于社交，用户通过微信等社交平台将拼团链接发送给微信好友进行拼团，好友再将链接转发给各自好友，从而形成裂变，成功拼团。对于微信小程序来说，它依托于微信，有着天然的社交优势，微信电商小程序可以让用户更加便捷的进入购物页面，并且不需要下载安装软件，可以提高用户的购物体验，对于商家来说，使用微信小程序可以更加方便的推广自己的商品，对于电子商务来说，小程序不仅是一种简单易用的工具，也是电子商务业务发展的一种新形式。小程序的出现加速了移动互联网向传统商业的转变。微信的小程序是基于微信生态系统的，不需要下载新软件，把它放在手边，使用时就离开，也就是说，一个不需要安装或卸载的应用程序。购物仅仅只是小程序各种功能的一部分而已。事实上，小程序确实非常火热，但是使用微信小程序进行社交电商的商户却不多。小程序无法像一般应用程序那样通过web页面和应用程序市场进行推广。指导客户端安装和使用，您只能依赖客户端执行主动搜索。对于小程序社交电商来说，作为一个新兴的电子商务平台，未尝不是商家开拓市场的另一途径。微信本身就是一个有着大量潜在客户的平台。,所以微信正在改善其职责不断向前发展,为平台的小程序能进行电子商务活动,希望使用小程序方案、贸易商和客户可以有更好的购物体验和销售。与PC终端相比，移动购物不受时间和空间的限制，与线下消费场景的交互更符合上下文。未来移动客户市场的潜力是无限的，移动互联网的快速普及推动了O2O在各个领域的应用。推动互联网市场增长和扩张的产品之一是微信程序，它连接着过去和未来。如今，手机已经成为人们生活中不可或缺的一部分。这是其中一个要素，现阶段移动电子商务的发展空间已经足够了。与其在PC端购买，不如在电子商务小程序中购买产品，这足以促进电子商务应用的发展。对于商家来说，小程序有很多好处。小程序快捷方便，让用户在打开、注册、使用和支付迷你程序时获得良好的体验;这个迷你程序很容易推广，你只能在微信聊天、朋友圈、官方账号等地方使用二维码，在时间上滑动打开;这个小项目很快就开始了，这对推广来说很方便。同时，您可以打开一个简单的扫描代码，为用户节省下载应用程序或在其他平台上打开应用程序的时间，使客户端能够更快地查看内容;程序体验很好，不需要下载，不占用太多内存，各种设施为客户提供了良好的体验。对于用户，可以通过扫描或微信搜索直接打开子程序;您可以直接通过微信登录，消除了注册的麻烦;支付不需要链接等，许多功能快捷方便。这些是微信用户常用的需求。微信的受欢迎程度很高，其次是小程序的广泛应用。因此，是目前的发展趋势。1.3论文结构及内容本文的结构如下:一：引言。本章，解释了小程序研究的背景和小程序电商的重要性。同时，它简要介绍了基本现状，重点介绍了小程序方案的发展前景和小程序方案的优势。最后，是本文的文本结构的一个总结。二：对系统进行了用户需求分析，然后介绍了系统实现过程中使用的关键技术，最后以图像为主要文本描述了数据库的结构。三：主要介绍了系统的实现过程，详细介绍了框架的设计以及系统功能的划分，着重介绍了应用中每个模块的实现。第四章则是展示了系统测试的结果。2系统分析与设计2.1设计目的及原则根据系统功能进行调研分析，满足用户使用的行为习惯，更加人性化的界面设计。2.1.1系统设计目的本次微信小程序项目电子商务交易的设计主要采用uni-app语言技术和mysql数据库完成系统设计。根据小程序发展的现状,拟采取可行的方法来解决这一问题:一个现代计算机网络系统和统一,实现在线购物、网络管理和所有类型的信息有序存储。您可以开始操作主控制界面、后台:账户管理、订单管理、分类管理、主页管理、产品管理、配置管理。前台:包括首页、商品分类、购物车管理、登录页面、注册页面、订单等功能。本系统需要实现的功能：1、商品上传与展示等管理功能。2、用户登录和用户管理。3、加入与移除购物车功能。4、提交订单功能。2.1.2设计原则本系统在设计过程中需遵守可扩展原则、兼容性原则、科学性和合理性原则。系统需要在原来系统的基础上能够可更新系统、可增加功能、添加更多模块，系统要能够在安卓和ios等操作平台上运行，系统界面要符合用户审美和操作习惯。2.2系统技术分析项目前端使用VUE框架以及php框架后端服务器并渲染页面，程序数据来源主要是调用API，使用HTML、CSS、JavaScript逻辑框架等快速构建前端页面，同时使用ajax实现数据动态加载以及前后端的数据交换。2.2.1前端技术javascript，html介绍HTML（HyperTextMark-upLanguage）HTML是互联网的世界共通语言，是简单而普遍的标记语言。这样一来，网页制作者就可以用文本和图像组合制作复杂的网页。这些网页，与使用的电脑或浏览器的种类无关，互联网上的其他任何人都可以查看。Javascript1、javaScript的概念:是一种脚本语言，用来向页面查找添加交互的行为。2、javaScript由核心语法ECMAScript、浏览器对象模型(BOM)主要用于管理窗口与窗口之间的通讯，因此其核心对象是window、文档对象模型(DOM)三部分组成.3、网页中引入javaScript三种方式:使用<Script></Script>标签内部样式使用外部js文件直接在HTML标签中的行内样式。4.javaScript的作用实现页面表单验证实现页面交互特效5.javaScript的特点被设计用来向Html页面添加交互行为是一种英特网上最流行的脚本语言一般用于编写客户端脚本是一种解释性语言6.引入javaScript的方式使用<Script>标签直接嵌入网页使用外部js文件Uniappuni-app是一个跨平台的前端框架，使用国人开发的Vue.js为基础进行编写。适用于多种主流平台：包括安卓、苹果、支付宝小程序、百度小程序、微信小程序。可以只编写一套程序源代码，就可以同时发布到以上多个平台进行使用。uni-app

支持如下应用生命周期函数：函数名说明onLaunch当uni-app

初始化完成时触发（全局只触发一次）onShow当

uni-app

启动，或从后台进入前台显示onHide当

uni-app

从前台进入后台onError当

uni-app

报错时触发onUniNViewMessage对

nvue

页面发送的数据进行监听，可参考

nvue向vue通讯onUnhandledRejection对未处理的Promise拒绝事件监听函数（2.8.1+）onPageNotFound页面不存在监听函数onThemeChange监听系统主题变化目录结构目录/文件说明build项目构建(webpack)相关代码config配置端口号等。我们初学可以使用默认的。node_modulesnpm加载依赖模块src包含了几个目录及文件：static保存图片、字体等。test初始测试目录，可删除.xxxx文件配置语法，git配置等。index.html首页入口文件，你可以添加一些meta信息或统计代码啥的。package.json项目配置文件。README.md项目的说明文档，markdown格式HbuilderX的优点及功能1.安装包占用内存少，运行快C++架构，启动速度、大文档打开速度、编码提示，都极速响应。2.语法提示多，可以用最少的关键词更快刚好的编写更多的代码3.主要适用于vue，提供更加强大的语法支持4.界面清爽，可自定义，适合人类长期观看的界面，并且操作简单易懂，无需汉化2.2.2后台技术php技术简介PHP:开源脚本语言。有着C语言、Java、Perl的各种优点，学习简单，应用广泛，主要用于Web程序开发。PHP可以更快地运行动态Web页面。对比于其他语言，PHP将程序嵌入HTML中执行。执行效率要远远高于完全生成HTML标记的CGI，编译后的代码也可以执行。通过编译，实现加密和优化的代码操作，可以使代码操作高速化。以前:Web页面使用HTML语言和超文本标记语言，按照HTML语法形式在Web页面上显示文本和图像。用户从浏览器下载并在本地运行。运行速度与本地主机有关。之后，PHP登场了。PHP也是一种脚本语言，在服务器端运行，Web页面的动态和交互取决于服务器的计算能力。翻译语言:同一名人员根据脚本程序执行各种操作。Apache:服务器软件(指网站服务器)。和Windows平台上的IIS一样，都是用来构建网站的。例如，在机器上安装linux、unix或WindowsNT/2000等。接下来，在系统中安装Apache，机器就会变成服务器。从isp(互联网服务提供商)申请固定IP，其他用户可以通过这个IP浏览网站。网站服务器:就是用来保存网站所有文本、照片数据的服务器。用户访问网站，网站向服务器发送请求。服务器将请求的页面反馈到网站。此时用户可以看到网站的信息界面。2.2.3系统架构B/S优势：使用浏览器就可以进行查询和浏览，可以通过页面将数据添加到服务器，维护时只要更新服务器就可以让所以用户进行更新，强大的共享功能可以通过某种程度的源控件直接部署到WAN中，以实现多客户端访问、强交互性的目的。2.2.4Mysql数据库数据库用来储存数据。其本质是文件系统。数据以特定的形式保存。用户可以添加、修改、删除和查询数据库中的数据。数据库管理系统数据库管理系统(dbms):数据库的确立,保守,以及数据库的使用实行统一管理和控制数据库的保安和整合性,为了确保被使用,数据库操作及管理指为了大规模的软件。用户通过数据库管理系统访问数据库中的表中的数据。2.3功能分析与设计本系统有四个主要功能：首页，分类，购物车，我的。首页：主要进行商品和广告的展示。分类：将不同的商品进行分类，便于客户查找。购物车：用户可以把自己喜欢而又暂时不想买的商品加入购物车，或者把想要购买的宝贝全部加入购物车统一付款，起到减少购买操作流程的作用图2.1系统模块图2.4数据库设计由系统总体功能设计可知，本系统主要有四个实体：首页、分类、购物车、我的。2.4.1概念结构设计首页主要是商品展示，商品属性主要包括：图片名、商品标题、价格，如图2.2所示。图2.2首页属性图分类页面主要包括：分类名称、当前分类商品的图片名、商品标题、如图2.3所示。图2.3分类属性图购物车页面：如图2.4所示图2.4购物车属性图我的页面包括订单信息，收货地址、用户信息如图2.5所示。图2.5我的属性图3购物系统实现3.1前台模块前台数据的显示主要使用API接口调用，主要流程如下：首先先创建一个js文件，或者直接使用api.js也可以。第一步//请求接口constcommoneUrl="http://xxxxxxxxxx";接下来对get和post进行封装//get请求封装functiongetRequest(url,data){ varpromise=newPromise((resolve,reject)=>{ varpostData=data; uni.request({ url:commoneUrl+url, data:postData, method:"GET", dataType:'json', header:{ 'content-type':'application/json' }, success:function(res){ if(res.statusCode===200) { resolve(res.data); }else{ resolve(res.data) } }, error:function(e) { reject('网络出错'); } }); }); returnpromise;}//post请求封装functionpostRequest(url,data){ varpromise=newPromise((resolve,reject)=>{ varpostData=data; uni.request({ url:commoneUrl+url, data:postData, method:'POST', header:{ 'content-type':'application/x-www-form-urlencoded' }, success:function(res) { if(res.statusCode===200&&res.data.resultCode==0) { resolve(res.data); }else{ resolve(res.data) } }, error:function(e) { reject('网络出错'); } }) }); returnpromise;}接下里导出这些方法module.exports={ postRequest, getRequest}最后在全局或者组件内引入就可以了//全局引入importapifrom'./api.js';Vtotype.api=api在这里插入代码片3.1.1首页 首页展示的是热门商品，主要属性如图，具体如图3.4，3.5所示。图3.4首页轮播图主要代码：<template> <!--:indicator-dots="true"：控制轮播图下的小黑点的显示（true）与隐藏（false)--> <!--:autoplay="true":控制轮播图是否自动播放--> <!--轮播图是使用swiper组件，链接：https://uniapp.dcloud.io/component/swiper--> <swiperclass="swiper":indicator-dots="true":autoplay="true":interval="3000":duration="1000"> <swiper-item> <viewclass="swiper-item"> <imagesrc="./../static/image/banner1.jpg"></image> </view> </swiper-item> <swiper-item> <viewclass="swiper-item"> <imagesrc="./../static/image/banner2.jpg"></image> </view> </swiper-item> <swiper-item> <viewclass="swiper-item"> <imagesrc="./../static/image/banner3.jpg"></image> </view> </swiper-item> <swiper-item> <viewclass="swiper-item"> <imagesrc="./../static/image/banner4.jpg"></image> </view> </swiper-item> </swiper></template>属性名类型默认值说明平台差异说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0,0,0,.3)指示点颜色indicator-active-colorColor#000000当前选中的指示点颜色active-classStringswiper-item可见时的class支付宝小程序changing-classStringacceleration设置为{{true}}时且处于滑动过程中，中间若干屏处于可见时的class支付宝小程序autoplayBooleanfalse是否自动切换currentNumber0当前所在滑块的indexcurrent-item-idString当前所在滑块的item-id，不能与current被同时指定支付宝小程序不支持intervalNumber5000自动切换时间间隔durationNumber500滑动动画时长app-nvue不支持circularBooleanfalse是否采用衔接滑动，即播放到末尾后重新回到开头verticalBooleanfalse滑动方向是否为纵向previous-marginString0px前边距，可用于露出前一项的一小部分，接受px和rpx值app-nvue、字节跳动小程序不支持next-marginString0px后边距，可用于露出后一项的一小部分，接受px和rpx值app-nvue、字节跳动小程序不支持accelerationBooleanfalse当开启时，会根据滑动速度，连续滑动多屏支付宝小程序disable-programmatic-animationBooleanfalse是否禁用代码变动触发swiper切换时使用动画。支付宝小程序display-multiple-itemsNumber1同时显示的滑块数量app-nvue、支付宝小程序不支持skip-hidden-item-layoutBooleanfalse是否跳过未显示的滑块布局，设为true可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息App、微信小程序disable-touchBooleanfalse是否禁止用户touch操作App2.5.5+、H52.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更）touchableBooleantrue是否监听用户的触摸事件，只在初始化时有效，不能动态变更字节跳动小程序（uni-app2.5.5+推荐统一使用disable-touch）easing-functionStringdefault指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic微信小程序@changeEventHandlecurrent改变时会触发change事件，event.detail={current:current,source:source}@transitionEventHandleswiper-item的位置发生改变时会触发transition事件，event.detail={dx:dx,dy:dy}，支付宝小程序暂不支持dx,dyApp、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序@animationfinishEventHandle动画结束时会触发animationfinish事件，event.detail={current:current,source:source}字节跳动小程序不支持底部导航主要代码："tabBar":{ "color":"#7A7E83", "selectedColor":"#00b4ff", "borderStyle":"black", "backgroundColor":"#ffffff", "list":[{ "pagePath":"pages/index/index", "iconPath":"static/tabbar1.png", "selectedIconPath":"./static/tabbar1-1.png", "text":"首页" },{ "pagePath":"pages/API/index", "iconPath":"static/tabbar2.png", "selectedIconPath":"static/tabbar2-1.png", "text":"分类" },{ "pagePath":"pages/API/index", "iconPath":"static/tabbar3.png", "selectedIconPath":"static/tabbar3-1.png", "text":"购物车" },{ "pagePath":"pages/API/index", "iconPath":"static/tabbar4.png", "selectedIconPath":"static/tabbar4-1.png", "text":"我的" }] }属性类型必填默认值描述平台差异说明colorHexColor是tab上的文字默认颜色selectedColorHexColor是tab上的文字选中时的颜色backgroundColorHexColor是tab的背景色borderStyleString否blacktabbar上边框的颜色，可选值black/whiteApp2.3.4+支持其他颜色值、H53.0.0+blurEffectString否noneiOS高斯模糊效果，可选值dark/extralight/light/none（参考:使用说明）App2.4.0+支持、H53.0.0+（只有最新版浏览器才支持）listArray是tab的列表，详见list属性说明，最少2个、最多5个tabpositionString否bottom可选值bottom、toptop值仅微信小程序支持fontSizeString否10px文字默认大小App2.3.4+、H53.0.0+iconWidthString否24px图标默认宽度（高度等比例缩放）App2.3.4+、H53.0.0+spacingString否3px图标和文字的间距App2.3.4+、H53.0.0+heightString否50pxtabBar默认高度App2.3.4+、H53.0.0+midButtonObject否中间按钮仅在list项为偶数时有效App2.3.4+、H53.0.0+首页服务分类主要代码：<template> <viewclass=""> <viewclass="service"> <viewclass="serviceItem"> <imagesrc="./../static/image/icon1.png"mode=""></image> 魅族官网直供 </view> <viewclass="serviceItem"> <imagesrc="./../static/image/icon2.png"mode=""></image> 满80免运费 </view> <viewclass="serviceItem"> <imagesrc="./../static/image/icon2.png"mode=""></image> 7天无理由退货 </view> </view> <viewclass="shopNav"> <viewclass="shopNavItem"> <imagesrc="./../static/image/recommend1.png"mode=""></image> <text>魅族16SPro</text> </view> <viewclass="shopNavItem"> <imagesrc="./../static/image/recommend2.png"mode=""></image> <text>魅族16SPro</text> </view> <viewclass="shopNavItem"> <imagesrc="./../static/image/recommend3.jpg"mode=""></image> <text>魅族16SPro</text> </view> <viewclass="shopNavItem"> <imagesrc="./../static/image/recommend4.jpg"mode=""></image> <text>魅族16SPro</text> </view> </view> </view></template>广告页面主要代码：<template> <viewclass=""> <viewclass="indexAD"> <viewclass="indexADleft"> <imagesrc="./../static/image/ad1.jpg"mode=""></image> </view> <viewclass="indexADright"> <viewclass="indexADrightItem"> <imagesrc="./../static/image/ad2.jpg"mode=""></image> </view> <viewclass="indexADrightItem"> <imagesrc="./../static/image/ad3.png"mode=""></image> </view> </view> </view> </view></template>图3.5试题详情3.1.2分类模块 进入商品分类管理模块：可以在看到商品的各种大的分类，不同分类显示不同分类商品，点击页面，也可以查看商品详情。如价格、细节等。如图3.6所示。图3.6分类页面分类导航页面主要代码<template><view><viewclass="uni-padding-wrapuni-common-mt"><viewclass="uni-titleuni-common-mt">VerticalScroll<text>\n纵向滚动</text></view><view><scroll-view:scroll-top="scrollTop"scroll-y="true"class="scroll-Y"@scrolltoupper="upper"@scrolltolower="lower"@scroll="scroll"><viewid="demo1"class="scroll-view-itemuni-bg-red">A</view><viewid="demo2"class="scroll-view-itemuni-bg-green">B</view><viewid="demo3"class="scroll-view-itemuni-bg-blue">C</view></scroll-view></view><view@tap="goTop"class="uni-linkuni-centeruni-common-mt">点击这里返回顶部</view><viewclass="uni-titleuni-common-mt">HorizontalScroll<text>\n横向滚动</text></view><view><scroll-viewclass="scroll-view_H"scroll-x="true"@scroll="scroll"scroll-left="120"><viewid="demo1"class="scroll-view-item_Huni-bg-red">A</view><viewid="demo2"class="scroll-view-item_Huni-bg-green">B</view><viewid="demo3"class="scroll-view-item_Huni-bg-blue">C</view></scroll-view></view></view></view></template>属性名类型默认值说明平台差异说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时（单位px），触发scrolltoupper事件lower-thresholdNumber50距底部/右边多远时（单位px），触发scrolltolower事件scroll-topNumber设置竖向滚动条位置scroll-leftNumber设置横向滚动条位置scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向app-nvue，微信小程序show-scrollbarBooleanfalse控制是否出现滚动条App-nvue2.1.5+refresher-enabledBooleanfalse开启自定义下拉刷新app-vue2.5.12+,微信小程序基础库2.10.1+refresher-thresholdnumber45设置自定义下拉刷新阈值app-vue2.5.12+,微信小程序基础库2.10.1+refresher-default-stylestring"black"设置自定义下拉刷新默认样式，支持设置black，white，none，none表示不使用默认样式app-vue2.5.12+,微信小程序基础库2.10.1+refresher-backgroundstring"#FFF"设置自定义下拉刷新区域背景颜色app-vue2.5.12+,微信小程序基础库2.10.1+refresher-triggeredbooleanfalse设置当前下拉刷新状态，true表示下拉刷新已经被触发，false表示下拉刷新未被触发app-vue2.5.12+,微信小程序基础库2.10.1+enable-flexbooleanfalse启用flexbox布局。开启后，当前节点声明了display:flex就会成为flexcontainer，并作用于其孩子节点。微信小程序2.7.3scroll-anchoringbooleanfalse开启scrollanchoring特性，即控制滚动位置不随内容变化而抖动，仅在iOS下生效，安卓下可参考CSSoverflow-anchor属性。微信小程序2.8.2@scrolltoupperEventHandle滚动到顶部/左边，会触发scrolltoupper事件@scrolltolowerEventHandle滚动到底部/右边，会触发scrolltolower事件@scrollEventHandle滚动时触发，event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

@refresherpullingEventHandle自定义下拉刷新控件被下拉app-vue2.5.12+,微信小程序基础库2.10.1+@refresherrefreshEventHandle自定义下拉刷新被触发app-vue2.5.12+,微信小程序基础库2.10.1+@refresherrestoreEventHandle自定义下拉刷新被复位app-vue2.5.12+,微信小程序基础库2.10.1+@refresherabortEventHandle自定义下拉刷新被中止app-vue2.5.12+,微信小程序基础库2.10.1+3.1.3购物车页面 打开购物车：可以看到购物车的商品、数量，点击可查看商品详情，点击+或者—可以对购买数量进行控制，选中需要购买的商品点击去结算即可进入下单购买页面如图3.7所示。图3.7购物车页面3.1.4我的页面 我的页面可以显示个人账号和昵称、收货地址管理及订单信息等。如下图3.8，3.9，3.10图3.8我的页面图3.9收货地址页面图3.10收货地址页面3.2后台模块进入后台后默认显示页面为控制台，主要显示商品各种数据以及小程序用户注册数量，如图3.11图3.11后台模块3.2.1账号管理模块 账号管理模块主要显示是小程序的管理员和会员的账号信息，可以实现对用户的新增与删除，如图3.12权限管理主要代码：<template><view><!--包含user/add权限的用户可以看到新增按钮--><buttonv-if="$hasPermission('USER_ADD')">新增</button><!--包含admin角色的用户可以看到删除按钮--><buttonv-if="$hasRole('admin')">删除</button></view></template>admin提供了两个内置方法，方便在页面中鉴定登录用户权限和角色:方法作用入参返回值$hasPermission鉴定登录用户是否具有某权限StringBoolean$hasRole鉴定登录用户是否具有某角色StringBoolean图3.12试题管理点击新增按钮可以对用户进行添加，如图3.13图3.13添加用户3.2.2首页管理 首页管理主要对小程序的首页信息显示进行管理，包括轮播图、图标导航、活动管理、楼层管理等如图3.14，3.15，3.16，3.17，3.18图3.14首页管理模块轮播图管理可以对轮播图片进行添加和删除，如图3.15图3.15轮播管理模块图标导航可以对首页的图标进行新增和删除，如图3.16图3.16图标导航活动管理模块：管理活动的添加和删除，如图3.17图3.17活动管理楼层管理模块可以对首页各层的商品进行管理，添加或删除操作，如图3.18图3.18楼层管理3.2.3分类管理对商品分类、名称、图片、描述等添加或修改删除，如图3.19图3.19分类管理点击新增按钮可以进入分类添加页面，如图3.20图3.20添加分类