该小程序目前已经上线,欢迎扫码体验!
版权归作者所有,转载请注明作者,请勿用于商业用途!
另外此小程序拿来大学期间参加比赛,获得2021小程序开发华中赛区奖项,请勿重复参赛~
2019年7月1日起上海就要开始正式执行《上海市生活垃圾管理条例》,真的。。。不是开开玩笑随便执行
如果依旧混合投放垃圾,拒不整改个人最高可罚款200元企业单位最高罚款5万元。
所以魔都的朋友都开始努力复习垃圾分类
-
干的东西不一定就是干垃圾
-
湿的不一定就是湿垃圾
-
你以为的可回收物未必就是可回收垃圾
不少人都表示:实在太难了!
垃圾分类可是要全国推行的到2020年底, 先行先试的46个重点城市, 要基本建成垃圾分类处理系统。
除上海外,还有:
北京、天津、重庆、石家庄、邯郸、太原、呼和浩特、沈阳、大连、长春、哈尔滨、南京、苏州,杭州、宁波、合肥、铜陵、福州、厦门、南昌、宜春、郑州、济南、泰安、青岛、武汉、宜昌、长沙、广州、深圳、南宁、海口、成都、广元、德阳、贵阳、昆明、拉萨、日喀则、西安、咸阳、兰州、西宁、银川、乌鲁木齐市。
这简直比高考还难!
难到都不想点外卖喝奶茶了...
于是 这款基于图像识别、语音识别的垃圾分类小程序 就来了~
扔垃圾再也不怕不怕啦!
更多垃圾分类相关参考:https://www.sohu.com/a/325019787_100159440
- 垃圾分类是社会进步和生态文明的标志,是人人均可参与其中来保护环境和改善环境的方式。
- 我们追求进步,崇尚文明,希望有碧水蓝天净土,共建美好家园。
-
由于全国垃圾暂时没有统一的标准,开放垃圾分类的城市以自己的规定为准。
- 像上海,生活垃圾分为 有害垃圾、可回收物、干垃圾、湿垃圾。
- 像北京,生活垃圾分为 有害垃圾、可回收物、其他垃圾、厨余垃圾。
注意:北京的厨余垃圾就是上海的湿垃圾,北京的其他垃圾是上海的干垃圾,名称不同,实际上的垃圾种类是相通的。
上海为例
-
1、可回收垃圾:玻璃金属蓝桶入,循环利用变宝物。
可回收垃圾即废纸张、废塑料、废玻璃制品、废金属、废织物等适宜回收、可循环利用的生活废弃物。
-
2、有害垃圾:电池废药有害处,灯管油漆红桶入。
有害垃圾即废电池、废灯管、废药品、废油漆及其容器等对人体健康或者自然环境造成直接或者潜在的危险的生活废弃物。
-
3、湿垃圾:厨房剩饭瓜果皮,统统转入湿垃圾。
湿垃圾即易腐垃圾,是指食材废料、剩菜剩饭、过期食品、瓜皮果核、花卉绿植、中药药渣等生物质生活废弃物。
-
4、干垃圾:毛发尿片香烟蒂,无害无用灰桶里。
干垃圾即其他垃圾,是指可回收物、有害垃圾、湿垃圾以外的其他生活废弃物。
上海为例
关于上海垃圾分类流行这样一句话
-
猪能吃的——湿垃圾(厨余垃圾)
-
猪都不吃的是——干垃圾(其他垃圾)
-
猪吃会shi的是——有害垃圾
-
卖了可以买猪的是——可回收垃圾
需要注意的是
- 小骨头算湿垃圾,大个的猪骨头牛骨头算干垃圾;
- 鸡蛋壳算湿垃圾,而坚果壳算干垃圾;
- 陶瓷碗碟算干垃圾,塑料碗碟算可回收垃圾;
- 纸杯算干垃圾,纸杯的塑料盖子算可回收垃圾;
- 奶茶里的珍珠是湿垃圾,奶茶杯算干垃圾,奶茶塑料盖算可回收垃圾。
-
功能网站查询:https://www.8684.cn/ljfl
-
上海市垃圾分类查询:http://www.lsnews.com.cn/py/qg/201907/t20190701_214222.shtml
需要一款微信小程序,能够根据所在城市的垃圾分类准则,方便准确的为用户提供 关于垃圾投放 等相关问题。
涉及的功能模块
- 首页
- 搜索框直接搜索
- 图像识别搜索
- 语音识别搜索
- 专题
- 更多
- 工具:微信开发者工具
- 环境:云函数、云数据库、云存储
- api:百度Al接口
-
使用微信小程序的qqmap-sdk工具包,创建
utils
工具类封装方法getLocation()
获取当前位置。 -
定位失败、当前城市未开放垃圾分类的情况默认上海。
-
用户可以点击选择指定的城市,可以一键重新定位当前城市。
-
不同的城市对应不同的垃圾分类数据信息,数据存储在 云数据库 中。
- 显示当前定位城市的垃圾分类数据。
- 进入首页---》根据当前城市查询数据库---》获取 sx_name 即当前城市对应分类图片的缩写---》然后渲染为本地图片。(针对不同城市垃圾分类种类不相同,如上海的
干垃圾
即为北京及其他地区的其他垃圾
) - 点击分类图片进入该当前分类的详情页,具体展示 分类概述 、投放指南、代表垃圾。(图像识别、语音识别之后得到结果也是跳转这个分类图详情页面)
- 图像识别:上传图片,获得
tempFilePath
---》拿着tempFile获得base64编码---》拿着base64
等参数访问api
---》渲染结果---》拿着结果(多个)请求数据库获取分类信息---》渲染到页面该识别结果的后面显示。 - 语音识别:上传语音(配置好
recorderManager
等录制参数,选在可选PCM
格式)获得tempFilePath
---》拿着tempFilePath获得base64编码---》拿着base64
等参数访问api
---》渲染结果到搜索框----》用户点击搜索框,进行类别匹配(丛云数据库中取数据)
- 专题是针对于那些常见但是不宜区分、一种物品拆分分类的垃圾。
- 专题的实现一般不需要频繁变动,因此可以使用静态数据,减轻云函数、云数据库的压力,提高响应速度。
注意
- 实现并没有直接调用其他的识别接口,那样太简单了,而且一般这种接口需要付费。
- 语音识别api因为是http,暂时只能pc端、体验版调试 使用,线上环境会出现
'网络错误~'
的提示。
-
UI界面
-
位置定位模块
-
图像识别模块
-
语音识别模块
-
图谱下载模块
-
热门搜索模块
-
专题、更多模块
-
云数据库模块
- 首页的内容布局大致分为5个区块,其中图片区和结果区不同时显示,公用一块区域。
- 搜索框有
bindfocus
绑定聚焦事件、bindinput
事件,每次输出都会向数据库搜索相关内容。 - 下面的图像、语音识别、转发、图谱都是
icon + text
放在view
中,有对应的点击事件。 - 分类图片有两组(不同城市对应的分类名称可能不同),根据查询到的城市垃圾分类信息中的
sx_name
对应照片名称进行匹配显示,也就是说城市和图片是绑定在一起的。 - 尾部建议是放在view中的一段文字。
模块功能说明
- 每个城市对应的垃圾分类规则可能不同,垃圾分类信息需要和城市绑定。
- 打开小程序,默认的定位城市是上海,然后会获取当前位置,若是当前城市开放了垃圾分类数据,则切换到当前城市。若是未开放,就默认为上海。
- 可以点击位置选择指定的城市
实现原理
- 使用小程序的
qqmap-sdk
的qqmapsdk.reverseGeocoder
方法根据当前位置的经、纬度,获取当前城市名称 - 开始小程序会调用
getAllCitys()云函数
, 获取 所有城市列表,然后在wx:for="{{city_list}}"
渲染到页面,后面的选中对号是icon,由点击确认是否选中 - 选中之后,缓存存储该城市对应的
cid
,然后在返回首页调用云函数geiDetail()
获取选中城市的详细信息。重新渲染页面。
模块功能说明
- 点击拍照按钮,然后用户选择 拍照或者从相册选择,然后选中的图片访问识别接口,拿到结果渲染在页面,然后根据返回每个结果,再次查询数据库,获取对应的识别结果的 垃圾分类名称,显示在该结果的后面,可以点击进入详情页。
实现原理
- 图像识别:上传图片,获得 tempFilePath ---》拿着tempFile获得base64编码---》拿着 base64 等参数访问 api ---》渲染结果---》拿着结果(多个)请求数据库获取分类信息---》渲染到页面该识 别结果的后面显示。
注意
- 数据库是自己的云数据库,内含搜集到的4000+数据,后续会继续完善优化,没有直接调用别人的垃圾识别接口
模块功能说明
- 长按录制按钮进行录音,然后等待识别结果,结果会填充到搜索框,会提示用户点击搜索框进行搜索。
- 当用户输入内容至搜索框,会自动匹配云数据库中数据,如果匹配的到,则显示详情页,否则提示匹配不到。
实现原理
-
语音识别:上传语音(配置好 recorderManager 等录制参数,选在可选 PCM 格式)获得 tempFilePath ---》拿着tempFilePath获得base64编码---》拿着 base64 等参数访问 api ---》渲 染结果到搜索框----》用户点击搜索框,进行类别匹配(丛云数据库中取数据)
-
搜索框搜索原理:搜索框有
bindfocus
绑定聚焦事件、bindinput
事件,每次输出都会向云数据库搜索相关内容。根据输入的内容,创建正则re模式,根据判断从缓存、数据库中遍历匹配数据,然后将符合该模式的物品(包括名称和分类名称)直接显示在页面。
模块功能说明
- 点击图谱下载按钮,进入下载页面,然后在详情页点击对应下面的保存按钮,保存照片到本地
功能实现原理
-
首选需要确保保存图片的权限是打开的,可以根据
res.authSetting['scope.writePhotosAlbum'] == undefined || res.authSetting['scope.writePhotosAlbum'] == false
来作为权限判断的条件。 -
多张图片对应多个view,点击保存传递
imgName
到bindImage
在该函数中获取保存的权限,然后根据根据fileID: 'cloud://xiaosi-9gxqthab24fc8322.7869-xiaosi-9gxqthab24fc8322-1305869883/download_imgs/' + imgName
从云存储下载图片。
模块功能说明
- 根据生活中常见的物品,展示在首页,可以点击进入详情页获取详细的分类信息
功能实现原理
- 打开页面,会查询云数据库获取
hot_list
全部热词,格式为一个个的{name:xxx,rid:xxx}
,然后view包裹wx:for(hot_list)
渲染到页面。 - 根据点击的热词,然后调用云函数
getGroupByHotWord
根据rid
转置垃圾分类详情页。
功能模块说明
- 专题模块主要展示的是生活中常见的一物多分类或者易混分类的物品,用户可以点击对应的专题进入详情页
功能实现原理
- 首先专题页是由一个
wx:for="{{spec_list}}"
循环遍历出来的,其中spec_list
是一个包含多个{name:xxx,pic:xxx,id:xxx}
的数组。 - 用户点击对应的内容,会携带id进入详情页,携带的方式是
eventChannel.emit()
配合navatageTo()
实现两个页面的传值。然后跟据id在详情页查询数据。查询到的信息wx:for="{{spec_list}}"
同样渲染出来,其中spec_list
是一个包含多个{name:xxx,pic:xxx,id:xxx,type:xxx}
的数组。
- 小城市使用的是云数据库,其中城市信息、4000多条垃圾分类信息、热词信息等存储在数据库中。
- 请求数据的方式有 直接wx.cloud.database().collection(xxx).get直接查询、使用云函数查询数据库两种形式。
- 垃圾分类数据的格式为类似json的格式,后续会继续完善优化数据,更多的数据需要数据集模型训练
这里不再详细说明,开发中遇到的问题记录在博客(id:xiaosi、
),参考
-
微信小程序云开发问题篇1_使用云数据库查询不出数据解决(字段类型对应、数据库读写权限)
-
微信小程序云开发问题篇2_微信小程序调百度图像识别接口问题小计(报错:216101 not enough param 参数不足、上传到云存储图片名称后缀问题、图像base64编码识别)
-
微信小程序云开发问题篇3_云数据库导入Excel数据(xls转为json导入之后报错:导入数据库失败, Error: Poll error, 导入数据任务(id:1431654)异常...)
-
微信小程序云开发问题篇4_微信云数据库记录内嵌数组查询( 根据数组对象的key 查询一条记录中 符合条件的 {key :xxx, value: xxx}对象,然后将该对象返回)
-
微信小程序云开发问题篇5_关于navigateTo()页面跳转的传参问题(中文字符通过eventChannel实现参数传递)
-
微信小程序云开发问题篇6_微信小程序从云存储保存图片到本地(关于图片保存授权的问题和一些坑:只弹出一次图片权限确认框、getSetting获取所有权限的判定存在undefined的情况)
-
微信小程序云开发问题篇7_微信小程序调百度语音识别接口问题小记(报错1: invalid audio length 、报错2:json param error 、关于json和row两种方式的请求)
-
微信小程序云开发问题篇8_语音识别问题:忽略了https校验
开发的源代码也上传至GitHub:
目前小程序1.0.0版已经发布,可以通过扫描二维码的方式体验
见开头