【微信小程序开发与设计】垃圾智能分类小程序

目录

  • 1需求分析
  • 2前端设计
  • 3调试说明
  • 4功能介绍
    • 4.1识别页面
    • 4.2分类页面
  • 5代码框架介绍

1需求分析

垃圾分类是将来生活可持续发展的必需项。
但由于缺乏垃圾分类知识,或是因为垃圾分类困难,费时费力,很多人没有贯彻垃圾分类政策。
故设计一款方便于群众进行智能化垃圾识别分类的微信小程序显得尤为必要。

本微信小程序拟解决以下几个问题:
① 解决垃圾分类查询繁琐的问题;
② 解决大众垃圾分类知识普及的问题;

2前端设计

【微信小程序开发与设计】垃圾智能分类小程序_第1张图片
设计“智能识别”以及“垃圾分类类别科普”两个页面,示意图如上图所示,设计功能有:搜索垃圾、图像识别、垃圾分类类别。

3调试说明

【微信小程序开发与设计】垃圾智能分类小程序_第2张图片
首先修改project.config.json文件里的appid,设置为自己的appid。
【微信小程序开发与设计】垃圾智能分类小程序_第3张图片
随后导入garbage项目。
【微信小程序开发与设计】垃圾智能分类小程序_第4张图片
搭建云环境:启用云开发控制台,创建环境,将环境ID输入至app.js的env中。
【微信小程序开发与设计】垃圾智能分类小程序_第5张图片
【微信小程序开发与设计】垃圾智能分类小程序_第6张图片
【微信小程序开发与设计】垃圾智能分类小程序_第7张图片
创建数据库:commit,sort,product。并把sort.json和product.csv导入云数据库。
【微信小程序开发与设计】垃圾智能分类小程序_第8张图片
数据权限调整:将数据权限调整为“所有用户可读,仅创建者可读写”。

【微信小程序开发与设计】垃圾智能分类小程序_第9张图片
【微信小程序开发与设计】垃圾智能分类小程序_第10张图片
【微信小程序开发与设计】垃圾智能分类小程序_第11张图片

部署云函数:上传并部署baiduAccessToken及checklmg文件夹,云端安装依赖。
【微信小程序开发与设计】垃圾智能分类小程序_第12张图片
随后即可真机调试小程序。

4功能介绍

4.1识别页面

识别页面提供两种搜索垃圾类别的方式:搜索查询、拍照识别。

(1)搜索查询:
【微信小程序开发与设计】垃圾智能分类小程序_第13张图片

设置模糊查询,在搜索框中输入垃圾名称,点击搜索,即可查询到关于该类垃圾的具体分类情况,如:果皮(湿垃圾)。
(2)拍照识别
【微信小程序开发与设计】垃圾智能分类小程序_第14张图片
【微信小程序开发与设计】垃圾智能分类小程序_第15张图片

遇到不知道叫什么名字的垃圾时,用户可以通过拍照(需要通过摄像头权限),智能地识别该种垃圾的名称,进而得出该垃圾的分类情况。示例:拍摄笔记本电脑,弹出图像识别的结果列表,选择“笔记本电脑”,再点击图标,即可知道该垃圾的具体分类为“可回收垃圾”。也提供了该垃圾类别的详细信息。

4.2分类页面

垃圾分类科普:
【微信小程序开发与设计】垃圾智能分类小程序_第16张图片
【微信小程序开发与设计】垃圾智能分类小程序_第17张图片
提供垃圾分类细则,垃圾分类情况,如:干垃圾、湿垃圾、可回收垃圾、有害垃圾等等。点击之后可以看到该类垃圾的详细清单。例如:点击“可回收垃圾”,即可看到“可回收垃圾”的具体清单。

5代码框架介绍

【微信小程序开发与设计】垃圾智能分类小程序_第18张图片
通过调用百度智能云的图像识别API,进行拍照识别垃圾,进而得到垃圾的类别。
Camera为拍照识别功能,将拍好的照片绘制,获得照片的url、长宽高以及内存大小等信息并上传图片。Filter将图像识别后获得的数据进行加载,并将与云数据库中的垃圾进行匹配,得到分类结果。
Index为小程序的首页功能,可以拍照识别等;search为搜索框搜索后得到的结果页面。
Result为拍照识别后得到的结果,
commit为当得到的结果未记录到数据库时的提示页面,让用户提交未记录到数据库的垃圾;
gan为得到的垃圾具体分类,以及垃圾的类别和垃圾如何处理的提示页面;
list为与拍照识别的垃圾相似的其他垃圾。
Sort为分类页面,显示有四个垃圾类别。

你可能感兴趣的:(小程序,微信小程序,分类)