基于微信小程序的垃圾分类服务系统的设计与实现.docx

《基于微信小程序的垃圾分类服务系统的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于微信小程序的垃圾分类服务系统的设计与实现.docx（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘要扔垃圾是一件日常小事，然而却掀起了2019年的欣然大波。为了提高垃圾的价值，上海市立法开始施行城市垃圾分类，紧接着也有多个城市效仿。垃圾需要按照规定进行分类投放，而分类的标准更是超出人们的常识，难倒了无数的市民，这让原本的小事变得不再是小事，从而引发了社会的广泛关注。由于这是一个新兴的领域，目前市场上相关的软件非常少，而进行垃圾分类的城市会越来越多，关于这个领域的软件会有很好的发展前进和应用市场。出于上诉的原因，我本次选择研究课题是基于微信小程序的垃圾分类服务系统的设计与实现。采用的是微信小程序云开发模式，让当下最火的电子商务与垃圾分类进行有机结合，开发出一个服务型的“轻”应用。本系统主要

2、研究小程序端的开发，后台数据管理通过云开发控制台操控。其主要由五个功能模块组成，分别是垃圾箱信息模块、服务订单模块、垃圾分类资讯模块、个人信息模块以及服务点管理模块。系统的前台采用WXML+WXSS+WXS+JavaScript，后台采用云函数+云数据库+云存储。关键词：垃圾分类 微信小程序云开发 电子商务AbstractLittering is a daily thing, but its a big wave in 2019. In order to improve the value of municipal solid waste, Shanghai municipal legisla

3、tion began to implement the classification of municipal solid waste, and then many cities followed suit. Garbage needs to be classified and put in according to the regulations, and the classification standard is beyond peoples common sense, which has baffled countless citizens, which makes the origi

4、nal small matter no longer a small matter, thus causing widespread concern of the society. As this is an emerging field, there are very few relevant software in the market at present, and more and more cities will carry out garbage classification, so the software in this field will have a good devel

5、opment and application market. For the reason of appeal, my research topic is Design and implementation of garbage classification service system based on Mini Program. It adopts the development mode of Mini Program cloud, so that the most popular e-commerce and garbage classification can be organica

6、lly combined to develop a service-oriented light application.This system mainly studies the development of the Mini Program side, and the background data management is controlled by the cloud development console. It is mainly composed of five functional modules, namely, garbage bin information modul

7、e, service order module, garbage classification information module, personal information module and service point management module. The system adopts WXML+WXSS +WXS+JavaScript in the foreground and cloud function + cloud database + cloud storage in the background.Key words: Garbage classification M

8、ini Program cloud development Electronic Commerce目录1.绪论11.1开发背景11.2开发目的以及意义11.3研究内容12.技术与工具介绍32.1技术介绍32.1.1WXML32.1.2WXSS32.1.3WXS32.1.4JavaScript32.2工具介绍32.2.1微信开发者工具33.系统分析43.1系统可行性分析43.1.1技术可行性43.1.2经济可行性43.1.3操作可行性43.1.4法律可行性43.2系统需求分析43.2.1功能需求43.2.2性能需求54.系统设计64.1系统框架设计64.2系统功能模块设计64.2.1垃圾箱信息模

9、块74.2.2服务订单模块84.2.3垃圾分类资讯模块84.2.4个人信息模块84.2.5服务点管理模块94.3系统数据库设计94.3.1数据库对比94.3.2数据库分布104.3.3数据库概念结构设计104.3.4数据库逻辑结构设计125.系统实现165.1小程序全局配置165.2登录165.3垃圾箱信息模块185.3.1定位与导航185.3.2垃圾箱信息列表185.3.3扫描二维码205.3.4垃圾投放记录列表滑动删除215.4服务订单模块245.4.1逆地址解析245.4.2支付密码加密245.4.3历史订单265.5垃圾分类资讯模块275.6个人信息模块285.6.1添加银行卡285.

10、6.2充值与提现305.6.3银行卡包315.6.4其他功能325.7服务点管理模块325.7.1设置325.7.2服务点新订单批量操作345.7.3搜索框模糊搜索356.系统测试376.1功能测试376.2兼容性测试397.总结与展望40参考文献41致谢42广东东软学院本科毕业设计（论文）1. 绪论1.1 开发背景上海市在2019年初通过立法全面推行生活垃圾强制分类制度。随后，全国各大城市也纷纷将垃圾分类提上日程。在不远的将来，垃圾分类将进入每家每户每天的生活，而在目前的市场上有关垃圾分类的服务却非常稀少，甚至有的市民不懂怎么将垃圾进行分类，所以有关垃圾分类的软件将会有很好的应用前景。据官方

11、数据表明，微信已有11.65亿活跃用户，巨大的用户基数加上不用下载和安装就能用的优势，使得近两年微信小程序发展迅猛。而小程序云开发为开发者提供完整的原生云端支持和微信服务支持，可以弱化后端和运维概念，不仅提高了开发效率，也降低了维护成本。相比于Android APP和ios APP，微信小程序两个平台通用，有着巨大的优势。伴随着互联网的发展，电子货币逐渐成熟，电子商务在世界得到了普及，大家都慢慢习惯了在网上进行交易，既方便又快捷。而B2C的标准化服务销售模式，让企业提供的服务从大众化逐渐演变成个性化，实现一对一销售，减少了经营成本，也减少了中间商，从而减低了价格，因此被消费者所喜爱。综上所诉，

12、本次将采用“微信小程序云开发+B2C电子商务”的模式进行垃圾分类服务系统的设计与实现。1.2 开发目的以及意义垃圾分类服务系统能为垃圾分类提供相关的服务，并将其移植到互联网上，是B2C电子商务的一种实现模式。利用小程序云开发集成于小程序控制台的原生Serverless云服务，无需搭建服务器，只要进行核心业务的开发即可。垃圾分类服务系统不仅方便了垃圾分类，节约了人力物力，还提供了奖罚机制，为地方政府相关法律法规的实施提供了便利，激发市民的守法热情，也为用户提供了人性化的服务。1.3 研究内容2019年，前端出现了一个无服务开发Serverless的热词，而微信小程序云开发便是这种无服务开发模式。

13、这种开发模式真正实现了全栈技术开发，无服务开发并非真的无服务，而是用函数代替服务，对于前端而言，后端服务就是一个函数，整个程序的前端和后端逻辑都能在同一个IDE里面去完成。Serverless打破了传统的物理隔离，使得开发者不用再去做任何隔离中间层的事情，只需要关注函数的实现即可。微信小程序的云开发提供了云函数，云数据库以及云存储三大基础能力。云函数是指一段运行在服务端的后端代码。每一个云函数都有其开发者编写的自身业务逻辑，用来实现某个特定功能，这样可以部署多个用户共享，更方便代码的维护，且能更容易获取AppID、OpenID等敏感信息。在运管方面，云函数可以实现弹性伸缩，根据当前的请求量和并

14、发量，可以快速扩容，以防止服务崩溃。云数据库是指在服务端提供的一个既可以在前端操作，也可以在云函数操作的文档型数据库。云数据库在小程序端有4种权限控制，基本上完全覆盖公有、私有的读写搭配，可以实现collection级别的权限控制，而在云函数端具有最高的读写管理权限，对于数据安全有着很大的保障。云数据库的本质和传统的关系型数据有着很大的区别，关系型数据库保存的是若干个由多行多列组成的表，而文档型数据库保存的是JSON文档。云存储是云开发提供的一块可以在小程序前端和云函数端直接上传或下载的储存空间，可用于网上在线存储各种图片、音频和视频等数据，并提供了公用网的域名，有天然CDN加速，可以从公用网

15、通过HTTP的方式访问，在一定程度上使小程序更加轻量化。鉴于小程序云开发的诸多优越性，本次将围绕垃圾分类服务系统，采用微信小程序云开发的模式对其进行设计与实现。2. 技术与工具介绍2.1 技术介绍2.1.1 WXMLWXML是小程序针对自身框架设计的一套标签语言，相当于Web中的HTML，只不过使用的标签名字有所差异，且宽容度也没有HTML那么高。WXML的标签是已经包装好的，里面提供了文字、图片、音频、视频、地图等组件，利用这些组件进行排版，结合微信小程序定义的基础组件和事件系统可以构建出各式各样的页面。2.1.2 WXSSWXSS是样式语言，用来修饰WXML组件的大小、位置、色彩等样式，不

16、仅简化了WXML的标签代码，还加快了下载显示的速度。WXSS具有CSS的大部分特性，甚至做了扩充和修改，例如规定屏幕的宽度是750rpx，提供rpx这个相对位置的单位，让不同大小的手机屏幕都能适用同一个页面，让其更适合微信小程序的开发。2.1.3 WXSWXS是小程序的脚本语言，结合WXML可以构建出页面的结构。WXS只提供给开发者console、Math、JSON、Number、Date五个基础库，以及一些常用的全局变量和全局函数。为了减少跨线程通信的开销，WXS与WXML都是属于视图层，运行在同一个线程内，在ios上，小程序使用脱离JavaScript环境的WXS，性能大大提升，会比jav

17、ascript快最多20倍。2.1.4 JavaScriptJavaScript是一套多功能的脚本语言，同时也是小程序开发的主要语言，用来开发业务逻辑以及调用小程序的API。然而它与Java并没有太大的关系，是两套完全不同的语言框架，Java是面向对象的编程语言，可通过执行编译文件来运行相关程序；而JavaScript是面向对象的脚本语言，不能单独运行。在小程序中，每一个JavaScript文件都是一个独立的模块，不同模块之间如果要相互调用可通过module.exports或者exports对外暴露接口。2.2 工具介绍2.2.1 微信开发者工具微信开发者团队推出了全新的微信开发者工具，可以在

18、电脑上模拟访问微信小程序，帮助开发者更方便、更高效地完成小程序的API和页面的开发、调试、代码查看和编辑、小程序预览和发布等功能。3. 系统分析3.1 系统可行性分析3.1.1 技术可行性本系统的开发采用当前比较热门的微信小程序云开发技术，前台采用WXML+WXSS+WXS+JavaScript，后台用云函数+云数据库+云存储的模式，所涉及的相关技术本人已会使用，所以本系统在技术上可行。3.1.2 经济可行性本系统开发用的是微信开发者工具，是免费的开发工具，云开发资源配额为免费的资源均衡型“基础版1”，这个资源配额完全满足开发调试需求。调试用的自己和朋友的手机，所以基本上实现了零成本开发，具备

19、经济可行性。3.1.3 操作可行性本系统的客户端都是在小程序上的，所以只要是有微信的手机就能使用，操作界面相对来说比较简洁容易操作，对使用者没有什么特别的要求。后端有微信开发者工具提供的可视化云开发控制台，操作也相对来说比较简单。故具备操作可行性。3.1.4 法律可行性该系统开发全部属于本人的创作，不涉及任何抄袭和侵权问题，具有法律可行性。3.2 系统需求分析3.2.1 功能需求垃圾分类服务系统的用户定位是需要处理生活的垃圾的市民，按照参与者的作用可以分为普通用户和服务点负责人用户。对于普通用户来说，我需要知道这附近的分类垃圾桶的容量、位置、距离等信息，以方便我去扔垃圾。如果我突然没时间或者不

20、方便去扔垃圾，我就需要相关的服务功能，让人帮我去扔下垃圾，所以要有下单，查看历史订单这方面的功能。再来就相关的垃圾分类政策、教学等资讯的内容。因为这其中涉及金钱的交易，所以要有钱包的功能，最好是能绑定银行卡，有相关的支付安全保障。用例图如图3-1所示。对于服务点负责人用户来讲，首先他也是一个市民，拥有普通用户的所有功能，其次他是个服务点的负责人，他要有权限能处理该服务点的业务,修改服务点信息和订单管理。用例图如图3-2所示。图3-1 普通用户用例图图3-2 服务点负责人用户用例图3.2.2 性能需求（1）准确性由于本系统采用的是由腾讯提供一站式后端服务的微信小程序云开发模式，在安全性能上有足够

21、的保障。（2）准确性在执行数据库的增加、删除、更新时，要确保数据的准确性，不允许出现多增加、重复增加、多删除、重复删除的情况，并且在删除重要数据时，应该给予提示。（3）及时性在执行数据库的增加、删除、更新时，数据库响应时间要求不超过2秒；小程序端的页面操作要求不超过1秒，不然会降低用户的交互体验。4. 系统设计4.1 系统框架设计本系统采用视图层、逻辑层、云开发这样的开发框架，如图4-1所示。视图层由WXML和WXSS组成，是系统的前端，通过不同的结构样式，并结合逻辑层传来的数据，渲染成各式各样的页面，从而给用户带来不一样的操作体验。逻辑层主要是定义数据和事务逻辑处理，由JavaScript和

22、微信团队提供的API等能力，编写成各个页面的js脚本文件，进行相关的事务处理，并将处理后的结果返回视图层重新渲染。云开发由云函数、云数据库、云存储组成，所涉及的数据和运算都是在云端完成。小程序端可以通过原生接口调用上传并部署在云端的云函数，实现某些指定的功能，也能通过云函数操作云数据库和云存储。云函数拥有读写数据库的所有权限，与小程序端有权限级别的差异。小程序端还能直接通过原生接口对云数据库和云存储进行操作。图4-1 系统框架图4.2 系统功能模块设计垃圾分类服务系统采用的是微信小程序云开发模式，后台数据管理可通过云开发控制台操控，故本系统主要针对小程序端进行开发。本系统的小程序端主要是普通用

23、户和服务点负责人用户这两大用户群体使用，服务点负责人用户是拥有服务点管理权限的普通用户，它不仅拥有普通用户的所有功能模块，而且还拥有某个服务点的管理模块。系统大的功能模块有五个，分别是垃圾箱信息模块、服务订单模块、垃圾分类资讯模块、个人信息模块以及服务点负责人用户特有的服务点管理模块。系统功能模块如图4-2所示：图4-2 系统功能模块图4.2.1 垃圾箱信息模块垃圾桶信息为page页面的“主页”，这里会根据你当前的定位，生成附近垃圾桶由近到远的列表，上面有垃圾箱的编号，位置，离你现在定位的距离，以及四类垃圾箱各自的剩余容量；点击导航按钮，会进入腾讯地图，并在地图上显示要去垃圾桶的位置，可进行路

24、线导航。找到垃圾箱扔垃圾时，用扫一扫的功能扫描垃圾桶上的二维码，垃圾桶会自动扫描识别分类情况，然后返回数据给系统，系统会根据你垃圾投放的情况给予奖惩，并生成相应的垃圾投放记录。垃圾箱信息模块功能如图4-3所示：图4-3 垃圾箱信息模块功能图4.2.2 服务订单模块服务订单模块为page页面的订单，分为三个板块，我要下单、进行中和已完成。在我要下单板块中，会根据你当前的位置进行定位，然后需要填写详细住址、联系方式和选择是否分类等信息，然后确认下单。在进行中板块，会显示进行中的订单列表，并可以取消订单。在已完成的板块中，会显示已完成和已退单的列表，并可以进行删除。服务订单模块功能如图4-4所示：图

25、4-4 服务订单模块功能图4.2.3 垃圾分类资讯模块垃圾分类资讯模块为page页面的资讯，页面展示八个推荐的垃圾分类相关视频，点击查看全部就能查看所有视频的列表，点击视频就会进入视频播放界面，并进行自动播放。垃圾分类资讯模块功能如图4-5所示：图4-5 垃圾分类资讯模块功能图4.2.4 个人信息模块个人信息模块为page页面“我的”，包括我的钱包、设置、垃圾投放记录和订单记录。我的钱包里面有银行卡包、充值、提现、交易记录等功能。充值要选择相应的充值面额和银行卡，然后点击充值。提现要选择提现到账的银行卡和输入提现金额。银行卡包有已添加银行卡列表，可以进行解绑，也可以点击添加银行卡，输入姓名、手

26、机号、银行卡号和支行名称，系统会根据你输入的银行卡号匹配到相应的银行和银行卡类型，再点击提交即可。交易记录会记录你钱包资金变动的明细，可以删除。在设置里面有支付密码设置，可对支付密码进行修改。个人信息模块功能如图4-6所示：图4-6 个人信息模块功能图4.2.5 服务点管理模块当普通用户有服务点管理权限时，在设置里会显示服务点管理模块的功能。服务点信息修改功能可以修改服务点名字、负责人名字和负责人姓名。当该服务点有未完成的新订单增加时，会提示订单再增加数量，进入服务点新订单，会显示所有的未完成订单详情，可以单个完成订单，也可以点击管理批量选择完成订单，如果需要查找某个地区的订单或某个订单，可以

27、在上面搜索框进行查找。服务点全部订单订单会显示所有订单的详情，可在搜索框进行搜索查找，但不能删除订单。服务点管理模块功能如图4-7所示：图4-7 服务点管理模块功能图4.3 系统数据库设计4.3.1 数据库对比关系型数据库和JSON数据库的概念对应关系如下图4-8所示：图4-8 关系型数据库和文档型数据库的概念对应关系图4.3.2 数据库分布垃圾分类服务系统使用的是腾讯云提供的云数据库，这是一个JSON数据库，具体分布情况如下表4-1 ：表4-1 数据库分布表环境名称数据库容量同时连接数读操作数写操作数集合限制wechatcloud2GB205万/天3万/天100个说明：数据库同时连接数指数据

28、库请求并发数量，如同时有三十个数据库操作请求，则有二十个会同时执行，剩下十个返回超出并发错误；一次数据库请求（无论小程序端发起还是云函数端发起）将耗费一个连接；每个云环境分别有一个同时连接数限制、独立计数。4.3.3 数据库概念结构设计本系统中有垃圾箱信息、垃圾投放记录、订单记录、服务点信息、图片信息、视频信息、用户信息、银行卡信息、交易记录等实体，各个实体的E-R图如下：图4-9 垃圾箱信息E-R图图4-10 垃圾投放记录E-R图图4-11 订单记录E-R图图4-12 服务点信息E-R图图4-13 图片信息E-R图图4-14 视频信息E-R图图4-15 用户信息E-R图图4-16 银行卡信息

29、E-R图图4-17 交易记录E-R图4.3.4 数据库逻辑结构设计为了构建系统最优的数据库模式，从而更好的满足用户的需求，优化系统的性能，在经过数据库概念结构设计后，还需要对数据库进行逻辑结构设计，形成成数据字典。本系统设计了9个数据库集合，如下表所示：表4-2 trash表集合名称：trash(垃圾箱)集合权限：所有用户可读记录名称： 使用系统自动生成的ID字段名称字段类型说明numberstring垃圾箱编号photostring垃圾箱照片addressstring垃圾箱地址latitudenumber垃圾箱纬度longitudenumber垃圾箱经度bluenumber可回收垃圾箱剩余容

30、量rednumber有害垃圾箱剩余容量greennumber餐余垃圾箱剩余容量greynumber其他垃圾箱剩余容量表4-3 putRecord表集合名称：putRecord(垃圾投放记录)集合权限：仅创建者可读写记录名称： 使用系统自动生成的ID字段名称字段类型说明_openidstring创建者openidnumberstring垃圾箱编号addressstring垃圾箱地址judgestring是否投放正确weightnumber投放重量moneystring奖惩金额timestring投放时间表4-4 orderRecord表集合名称：orderRecord(订单记录)集合权限：仅创建

31、者可读写记录名称： 使用系统自动生成的ID字段名称字段类型说明_openidstring创建者openidaddressstring订单定位地址detailedAddressstring订单详细地址servicePointstring服务点IDnamestring接单服务点名称headstring服务点负责人名字headPhonestring服务点负责人手机号码phonestring订单手机号码coststring订单费用chargebackboolean是否退单displayboolean订单是否显示statestring订单状态timestring下单时间表4-5 servicePoint

32、表集合名称：servicePoint(服务点信息)集合权限：所有用户可读，仅创建者可读写记录名称： 使用系统自动生成的ID字段名称字段类型说明namestring服务点名称headstring服务点负责人名字phonestring服务点负责人手机latitudenumber服务点纬度longitudenumber服务点经度表4-6 image表集合名称：image(图片信息)集合权限：所有用户可读记录名称：_id:orderPoster字段名称字段类型说明orderPoster1string订单界面海报orderPoster2string订单界面海报orderPoster3string订单界面

33、海报记录名称：_id:informationPoster字段名称字段类型说明informationPoster 1string资讯界面海报informationPoster 2string资讯界面海报informationPoster 3string资讯界面海报表4-7 video表集合名称：video(视频信息)集合权限：所有用户可读记录名称： 使用系统自动生成的ID字段名称字段类型说明mapUrlstring视频URLnamestring视频标题timestring视频发布时间表4-8 user表集合名称：user(用户信息)集合权限：仅创建者可读写记录名称： 使用系统自动生成的ID字段名

34、称字段类型说明_openidstring创建者openidservicePointstring服务点负责人IDwalletnumber钱包passwordstring支付密码表4-9 bankCard表集合名称：bankCard(银行卡信息)集合权限：仅创建者可读写记录名称： 使用系统自动生成的ID字段名称字段类型说明_openidstring创建者openidbackgroundColorstring银行卡列表背景颜色bankNamestring支行名字bankNumberstring银行卡号cardTypestring卡类型namestring持卡人姓名phoneNumberstring持

35、卡人手机号码表4-10 walletRecord表集合名称：walletRecord(交易记录)集合权限：仅创建者可读写记录名称： 使用系统自动生成的ID字段名称字段类型说明_openidstring创建者openidmoneystring交易金额sourcestring交易来源waystring交易方式timestring交易时间5. 系统实现5.1 小程序全局配置每个小程序的页面都由“.json”、“.wxml”、“.wxss”和“.js”四个文件组成。关于“.json”文件, JSON并不是一种编程语言，而是一种数据格式，在小程序中起静态配置的作用。在小程序根目录下的app.json、a

36、pp.js和app.wxss是小程序的全局配置文件。app.json确定了小程序的导航栏以及由“主页”、“订单”、“扫一扫”、“资讯”、“我的”五个tab组成的底部tab栏的界面框架。本系统采用云开发模式，需在app.js中开通了云开发的能力，代码如下图5-1所示。图5-1 开通云开发代码块图5.2 登录系统的登录采用微信授权的方式，即不用输入账号密码，利用微信用户使用微信身份进行认证登录，登录流程如图5-2所示。在打开小程序时，系统将自动检查当前登录的账号是否授权过这个小程序，如未授权则显示图5-3所示的授权页面，授权后系统自动调用云函数获取你当前登录微信账号的唯一标识openid，并查询数

37、据库是否有该openid的用户，没有则添加；如已授权则直接调用云函数获取openid，进入“我的”页面。为了使openid在全局可用，在app.js中定义全局数据openid用来存储登录获取的微信openid，如图5-3所示。 图5-2 登录流程图图5-3 授权界面图5.3 垃圾箱信息模块5.3.1 定位与导航腾讯位置服务为小程序提供了丰富的地图API位置服务能力。使用该能力要先申请腾讯位置服务开发者密钥key，再开通webserviceAPI服务，下载微信小程序JavaScriptSDK并导入项目，最后在开发者设置中添加服务器域名。将插件包引入app.json并授权定位，在需要使用的page

38、s的.js文件中引入SDK核心类，再实例化API核心类就可以调用相应的小程序API。进入主页面onLoad()生命周期函数将自动调用wx.getLocation()获取当前用户位置，点击导航按钮，调用wx.openLocation()在微信内置地图查看标记点位置，并可进行路线导航，如图5-4、图5-5所示。图5-4 标记导航代码块图图5-5 定位、导航界面图5.3.2 垃圾箱信息列表如图5-6、图5-7所示，定义由两点经纬度计算距离的方法distance()，根据你当前的定位计算距离，循环遍历垃圾箱信息列表由近到远排序，然后渲染到前端界面，如图5-8所示。图5-6 计算距离代码块图图5-7 列

39、表排序代码块图图5-8 “主页”界面图5.3.3 扫描二维码为了方便系统使用，在垃圾投放过程中引入了二维码扫码的功能。通过调用小程序API wx.scanCode()进行二维码扫描，并将扫码后的数据进行处理，生成相对应的垃圾投放记录，更改垃圾桶的容量，代码如图5-9所示。由于没有垃圾桶实物设备，这里采取二维码模拟数据的形式进行模拟投放垃圾后垃圾桶返回的信息，可在网上进行二维码生成，文本格式为：垃圾箱编号,垃圾箱位置,重量,是否投放正确，如图5-10所示。图5-9 扫描二维码代码块图图5-10 二维码生成图5.3.4 垃圾投放记录列表滑动删除为了方便用户操作，垃圾投放记录列表加入了左滑出现删除按

40、钮的功能，如图5-11所示。其实现主要分为四步，第一步是开始触摸方法drawStart()，当开始触摸组件时，把列表所有条目距离右边框的距离item.right重置为0，恢复滑动过后没有删除的条目，并记录起点的X坐标clientX；第二步是滑动条目方法drawMove()，标记滑动的列表条目item，监听触摸点的X坐标clientX的变化，用起点的X坐标减去滑动的X坐标计算滑动的距离disX，如果disX大于20单位则赋值给item.right显示实时滑动距离，否则不显示滑动；第三步是结束操作drawEnd()，当松开触摸后，记录滑动的条目的_id,以便进行删除操作。判断第二步drawMove

41、()中滑动距离是否大于删除按钮的一半宽度delBtnWidth/2，若是就将条目距离右边框的距离item.right设置为删除按钮的宽度，即显示整个删除按钮，不是就将该条目恢复初始状态item.right为0；第四步为删除触发事件delItem(),点击删除按钮则查找数据库walletRecord集合移除第三步记录的滑动条目，代码如图5-12、图5-13所示。前端界面通过调用js中的前三步的事件处理方法bindtouchstart=“drawStart”、bindtouchmove=“drawMove”、bingtouchend=“drawEnd”，将操作后的item.right的值用来改变s

42、tyle=“right:item.rightrpx”，从而渲染界面条目的样式。图5-11 删除订单界面图图5-12 滑动删除代码块图图5-13 滑动删除代码块图5.4 服务订单模块5.4.1 逆地址解析在填写订单的时候，会根据当前位置获取地点详细信息。而小程序提供的APIwx.getLocation能获取当前位置的经纬度，但却不能直接获取位置的具体信息，要通过配合腾讯位置服务提供的LBS数据服务工具包，才能根据地址经纬度进行逆地址解析。下载工具包放进项目的utils文件夹下，在使用的js文件中进行导入，再通过key秘钥进行qqmapsdk对象初始化，在获取到经纬度后调用qqmapsdk.rev

43、erseGeocoder（）方法逆地址解析，控制台显示的解析结果如图5-14所示。图5-14 逆地址解析控制台图5.4.2 支付密码加密支付密码涉及个人财产的安全，在系统中采用一种被广泛使用的密码散列函数来加密支付密码，也就是MD5信息摘要算法加密。密码加密支付流程如图5-15所示。通过将8位字符串转换为16个字块的序列，存储为数组，并为MD4/5计算追加适当的填充，计算一个单词数组的MD5，生成一个单词数组，再将一个由数字组成的数组转换为十六进制字符串。其部分代码如下图5-16、图5-17所示。图5-15 支付流程图图5-16 MD5加密算法图图5-17 MD5加密算法图5.4.3 历史订单

44、如图5-18所示，“订单”模块中的历史订单页面设计了一个可左右切换的导航栏来区分“进行中”和“已完成”的订单。视图层次代码如图5-19所示，顶部导航栏由两个view标签组成，通过三目运算判断当前currentTab的值（0代表“进行中”页面，1代表“已完成”页面），选择不同的样式渲染导航栏。而swiper也会根据currentTab的值切换不同的页面，由于swiper是滑块视图容器，而在订单记录里面支持滑动删除的功能，所以要将导航栏左右滑动的功能禁止，即在swiper-item组件中左右滑动无效，js代码如图5-20所示。图5-18 “订单”相关界面图图5-19 导航栏WXML代码块图图5-2

45、0 导航栏js代码块图5.5 垃圾分类资讯模块垃圾分类资讯模块展示了一些有关垃圾分类的视频，如图5-21所示，视频并不用下载，通过小程序的video组件src中添加视频的资源地址，便可以播放。系统管理者通过云开发控制台在数据库video中添加新的记录，用户就可以获取数据库的新视频地址，更新视频内容。图5-21 “资讯”相关界面图5.6 个人信息模块5.6.1 添加银行卡在添加银行卡的界面填写银行卡号，如图5-22所示，每输入一个数字就会进行一轮正则表达式的匹配。因为每家银行的银行卡卡号都会有自己特定六位数字开头且每种卡的卡号都有其特定的长度，所有在匹配过程中可以写成正则表达式，如图5-23所示，/(95595|95596|95597|95598|95599)d14$/表示由95595、95596、95597、95598、95599任意一个开头的且后面还有14位数的是中国农业银行储蓄卡，匹配过程会显示在控制台上，如图5-24所示。图5-22 添加银行卡界面图图5-23 正则表达式匹配算法代码块图图5-24 控制台图在添加银行卡还需要填写手机号码，手机号码是一个11位数长度的特别字符串，为了防止少打或者多打手机号码位数以及胡乱输入手机号码，这里采用正则表达式来验证手机号码，如图5-