摘要:依托微信小程序设计的垃圾分类系统主要通过扫一扫来辨别所丢弃垃圾的种类,便于用户快速垃圾分类处理。本文主要介绍了垃圾分类的重要性以及微信小程序的便捷性,通过wxml、javascript等技术手段在微信小程序中实现了为用户提供垃圾识别的快捷服务以及休闲时光对垃圾分类的了解程度的小游戏。
关键词:微信小程序;垃圾分类;技术手段
1 垃圾分类系统设计
本系统依托于微信小程序,助力垃圾分类,创新垃圾分类的处理模式。用户通过微信小程序搜索垃圾分类处理,即可进入到垃圾分类系统首页,通过首页可快速点击识别垃圾并进行分类,如果识别有误也可通过点击更改向系统传递正确的识别答案,帮助系统改进,识别成功后可分享至微信朋友圈或好友。
1.1 垃圾分类系统首页
用户通过本系统直接进入到垃圾分系统首页,也是快速识别页,本页面以快速识别垃圾为主,所以界面设计上以点击识别为主,并将其放置到主要的位置上,供用户快速点击并识别相关垃圾。除此之外,在页面底部放置了垃圾分类小常识和“你是什么垃圾”小游戏,通过点击可跳转至相关的页面。本页面整体比较简洁明了,符合用户设计规范。点击快速识别会跳转到快速识别界面,此页面操作简单,只需将需要识别的垃圾放置白色框内,点击拍摄即可识别成功。
1.2 快速识别页面
用户通过扫描识别垃圾后进入到此页面,此页面主要為垃圾的识别页面,比如需要识别的垃圾是手机的零部件,那么识别之后显示的是可回收垃圾,并有相关的投放要求。如果需要识别的垃圾是果皮,而系统识别后显示手机零部件,很显然系统识别有问题,针对这种情况,可通过点击识别不对更正,点击之后会弹出一个窗口,通过此弹窗用户可将正确的结果发送至本系统,以便本系统做出更正。用户识别完垃圾并处理之后,可以通过垃圾分类小常识学习一些常识性的知识,比如电池属于有害垃圾以及正确的投放技巧。
1.3 “你是什么垃圾”小游戏
用户除了日常的垃圾识别处理垃圾以外,还可以通过垃圾分类小游戏来测试一下自己对垃圾分类的了解,也可通过与好友挑战、排位赛等看看和好友对垃圾分类的了解情况。“你是什么垃圾”小游戏主要通过设置关卡和完成每个关卡的题目来升级,通过此类小游戏使用户不仅能够对垃圾分类有更深的了解,更增加了获取知识的趣味性,而且每个答题的时间比较短,不会占用用户太长的时间。用户可用短暂的碎片时间完成答题并获取知识。
2 垃圾分类系统开发技术分析
微信小程序开发框架提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层和逻辑层之间提供了数据传输和事件系统,使开发人员可以轻松地专注于数据和逻辑。开发框架的目标是允许开发人员以最简单有效的方式在微信中开发具有本机APP经验的服务。
2.1 视图容器
微信小程序视图容器相当于一个小盒子,里面放置各种内容,类似于HTML中的DIV块。本系统中所用到的视图容器是view,比如需要使用滚动视图,则添加scroll-view,如果想要设计鼠标点击、鼠标经过效果可添加hover属性,通过修改参数来修改相关属性,实现相关效果。
<view class=”section”>
<view class=”section__title”>flex-direction: row</view>
<view class=”flex-wrp” style=”flex-direction:row;”>
<view class=”flex-item bc_green”>快速识别</view>
<view class=”flex-item bc_red”>垃圾分类小常识</view>
<view class=”flex-item bc_blue”>“你是什么垃圾”小游戏</view>
</view>
</view>
此代码实现的是横屏效果,如果想实现竖屏效果,使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过WXSS 设置 height。
2.2 基础内容
本系统所涉及到的微信小程序基本内容组件主要有图标(icon)、文本(text)、富文本(rich-text)、进度条(progress)等。以下代码为成功并顺利完成的按钮设置。
<view class=”container”>
<view class=”icon-box”>
<icon class=”icon-box-img” type=”success” size=”93”></icon>
<view class=”icon-box-ctn”>
<view class=”icon-box-title”>完胜</view>
<view class=”icon-box-desc”>恭喜你进入下一关</view>
</view>
</view>
以上代码主要涉及到图标大小、文字内容等图标标识设计。如果icon小的话可以放在本地,但是一些大的背景图及内容类的图片,最好放在服务器上,加一下cdn可以控制访问速度。
3 结论
微信小程序是一种不用下载就可以使用的应用程序。经过近两年的开发,新的微信小程序开发环境和开发者生态已经构建,微信小程序还为许多城市的地铁和公交服务提供了支持。微信小程序的发展带来了更多的就业机会,社会效应不断提高。将微信小程序与垃圾分类结合起来,共创再生资源回收利用,利用现代信息技术共创绿色家园。
参考文献
[1] 江世明. 单片机原理及应用:基于Proteus的单片机应用系统设计与仿真[M]. 上海: 上海交通大学出版社, 2013.
[2] Bruce Eckel.Java编译思想[M]. 陈昊鹏, 译. 北京: 机械工业出版社, 2005.
[3] 吴迪文 . WWW 与数据库系统信息集成技术[J]. 微机发展,1999, 9(1):33-35.
[4] 卢树强. 基于C/S和B/S混合模式的高校教务管理系统的设计与实现[J]. 电脑知识与技术, 2008, 4(27):2018-2019, 2033