基于云开发的垃圾分类微信小程序设计开发

高境廷 杜娟 胡生涛 何志文

摘要：微信小程序因为灵活便捷的优点得到了广泛应用，其“用完即走”的特点非常适合于解决居民对垃圾分类不熟悉的问题。该小程序利用微信开发者工具，应用WXML、WXSS和JavaScript技术，依托百度云开发提供的通用物体识别API，实现了3000多种生活常见垃圾的垃圾类别文字查询及图片查询功能，并提供搜索记录的查询，可以帮助用户方便快捷地查询到垃圾类别从而更好地进行垃圾分类。

关键词：微信小程序;云开发;垃圾分类

中图分类号：TP393      文献标识码：A

文章编号：1009-3044（2022）13-0049-04

1 引言

垃圾分类是科学合理保护生态环境，推进生态文明建设的重要一环。当前遇到的最大问题是居民在参与垃圾分类过程中不能对垃圾正确分类。为了提升居民垃圾分类意识，提升居民对于垃圾分类知识的认知度，使其更有意愿参与到垃圾分类的工作当中去，解决目前普遍存在的居民“高意愿，低行动”的难题，设计一款方便实用的垃圾分类小程序是非常有必要的。

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的设想，也实现了“用完即走”的理念。用户不用关心是否安装太多应用的问题，可以随时使用，又无须安装卸载[1]。微信小程序开发框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层和逻辑层之间提供了数据传输和事件系统，使开发人员可以轻松地专注于数据和逻辑[2]。

2 系统设计

用户可通过图像识别或手动输入文字的方法对程序输入垃圾相关信息，程序根据提供用户提供的信息查询数据库，最后将数据库中得到的数据输出到用户使用界面（UI）。程序执行流程如图1所示。

2.1 用户界面设计

此小程序一共分为主页、功能介绍、文字搜索和拍照搜索几个功能页面。

首页：分为上下两个view元素，头部为swiper组件的轮播图，轮播内容为与垃圾分类和环境保护有关的一些图片，可以丰富用户的使用体验，使整个页面更加美观。底部为具有快速前往每个功能的navigator组件，组件内有包含简单解释每个功能的image標签和text标签。

功能介绍：页面主要通过自定义组件父子互相传递数据实现，界面设计为4个navigator组件，包含有图标文字和详细介绍每个功能作用的文本信息。由于4个组件的结构样式一致，故采用自定义组件的方式减少重复的代码量，在自定义文件中通过js文件properties对象中的内容来接收父元素传递过来的数据。通过wx：for循环渲染nav自定义组件实现页面效果，在修改样式和结构时只需修改一个自定义组件，大大缩短了在页面的代码量，也使整体结构更加清晰。

文字搜索：页面中使用了background-image属性使用背景图，通过background-size和background-position属性来调整背景图的大小和显示位置以达到设计图的样式。搜索框和搜索结构分别用两个块元素包含。搜索结果框先通过display：none隐藏，等待触发button的tap事件后显示，并同时返回垃圾名和分类信息。

拍照搜索：页面先显示开始拍照上传图片的圆形button组件，触发tap事件后显示5个与所拍摄物品相关的物品的按钮，用户可点击想查看的内容显示该物品的分类结果。在返回查找信息的最后设计有一个继续查找的按钮方便用户进行多次查找。

为实现对不同机型的适配，在需要完美高度适配的页面的onload生命周期函数中写下返回用户所用机型的显示屏宽高并储存到data域中的函数，再利用内联样式设置符合每个机型的最佳宽高。在对样式的编写时均采用less语法进行编写，此操作使样式代码结构变得整洁清晰，同时也大大缩短了对样式进行编写和修改的时间。

2.2 数据库的读写方法及其实现

鉴于本小程序的规模，使用了微信官方提供的云数据库功能来为整个程序提供后台支持。云服务是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务[3]。小程序云开发基于Serverless云服务的理念，为开发者提供完整的云端支持和微信服务支持。开发者无须搭建服务器，直接使用云数据库，弱化后端和运维概念，使开发者可以集中精力于核心业务[4]。云数据库的使用方法可以归纳为存储数据、使用数据、缓存数据三步。

存储数据。首先将垃圾分类数据通过Python转换为可以上传到数据库的JSON格式，一条垃圾分类数据对应一个JSON对象。通过转换，得到了约六千个垃圾分类条目，并将其上传至云数据库，以便在程序中使用。

使用数据。云数据库数据的使用可分为连接、请求、使用三个步骤。在程序中若需要使用数据库的数据，首先应该与数据库建立连接。只需要调用wx.cloud中的init（）函数并提供环境id即可建立与数据库的初步连接。通过调用db.collection（）函数，将垃圾名称作为参数传入函数即可对云数据库发送请求，请求的结果会以Promise的形式返回到程序，故使用步骤需要嵌套在Promise的Consuming_Code中。使用步骤只需完成对用户页面的更新以及将首次获得的垃圾分类数据存入缓存中。

缓存数据。云数据库技术的使用大大简化了开发小程序的过程，但数据库的每日读写次数限制会给用户带来极大的不便。在没有每日读写限制的情况下，用户希望在查询过程中能够从数据库中获得最新的信息，即每次查询都从数据库中获得信息。缓存搜索记录是考虑到云数据库每日读写限制的让步选择，以信息时效性为代价，有效减少了数据库的读写次数。缓存数据的代码是同步的，不需要考虑程序的异步逻辑，只需要考虑数据存储格式的可用性即可。

2.3 图像识别获取垃圾信息的方法及其实现

百度AI开放平台提供的通用物体和场景辨认接口支持识别10万个常见物体及场景，返回相应的名称结果[5]。本功能的实现依托于微信小程序丰富的API以及由百度云开发提供的通用物体识别API，运行逻辑实现如圖2所示。

1）百度云开发注册与配置

首先需要注册百度账号，并登录百度云，进入管理控制台，创建图像识别应用，创建完应用后，打开应用管理可见APP_ID、API_KEY和SECRET_KEY，需要用在小程序端调用图像识别接口。

2）获取Access Token

小程序服务端云函数是基于node.js的开发。使用wx.request向百度云服务授权服务地址发送请求，将应用管理中的参数发送即可得到每30天有效的Access Token。因此需要将该步骤写入到app.js中，在每次小程序启动时运行以获取最新的Access Token。

3）服务器域名配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通HTTPS请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile）和 WebSocket通信（wx.connectSocket）。为了使用百度云开发的API接口，需要在“小程序后台-开发-开发设置-服务器域名”中进行服务器配置，将所需的服务器域名添加进去方可使用。

4）小程序客户端开发

使用wx. chooseImage获取到用户提供的图片（相册选取/相机拍摄），再使用wx.compressImage对图片进行压缩及格式转换处理，加快在后续请求中图片的上传速度。最后使用wx.request对图像识别的网址进行POST请求，输入相应的图像，选择信息等参数即可得到百度云开发返回的JSON数据。

3 系统实现

3.1 小程序首页

首页的页面头部是轮播图展示，用于滚动展示一些以环保和垃圾分类为主题的图片。在页面中部则是每个功能的快捷入口，每个选项由功能图标和解释文字两部分组成，用户点击这几个选项后会跳转到相应的功能页面。如图3所示。

3.2 文字搜索界面

用户点击下方的搜索框即可输入要查询的信息，输入后点击右方的箭头图标便会显示搜索结果，如图4所示。

小程序会通过用户在文本搜索框中的输入返回相应的垃圾分类信息，部分核心代码如下：

getsearchresult（）{

wx.showLoading（{

title： 'Loading..'，

}）;

wx.cloud.callFunction（{

name：'cloud_searchclass'，

config：{

env：this.data.envId

}，

data：{

name：this.data.key

}

}）.then（（resp）=>{

console.log（resp.result）;

wx.hideLoading（）;

}）.catch（（e）=>{

this.setData（{

showUploadTip：true

}）;

}）;

}

3.3 拍照搜索界面

点击图中的圆形按钮即可开始拍照识别，用户上传完图片会显示如图5所示结果。

在拍照搜索中上传的图片会通过与开放的API交互返回分类信息，部分核心代码如下：

wx.request（{

url：'https：//aip.baidubce.com/api/v1/solution/direct/imagerecognition/combination？access_token='+ app.globalData.access_token，

method：'POST'，

header： {'Content-type'： 'application/json;charset=utf-8'}，

data：{

image： base64，

scenes： ["advanced_general"]

}，

success（res）{

console.log（res）;

if（res.statusCode == 200 && res.errMsg == "request：ok"）{

//检测结果正确

//返回识别信息

var rubbish = res.data.result.advanced_general.result;

console.log（rubbish）;

page.setData（{img： tempPath}）;

let len=rubbish.length;

for（let i=0;i

rubbish[i].clasf='';

rubbish[i].name=rubbish[i].keyword;

}

//init trash list

page.InitTrashList（rubbish）;

//隐藏加载窗口

wx.hideLoading（）;

}

else{

wx.showToast（{

title： '识别失败'+res.data.error_msg，

duration： 1000，

}）;

}

}

}）

为尽可能提高正确率，采取了用户可以自行点击要查看的搜索结果的方式来显示，如图6所示。

3.4 搜索记录查询

用户可在此功能内查看搜索过的历史记录，在点击下方查询记录按钮后会显示查询过的记录，方便用户进行确认，具体结果如图7。

4 结束语

本系统实现了用文字和图片搜索垃圾分类的功能，方便用户随时随地查询垃圾的类别从而改变目前普遍存在的居民“高意愿，低行动”的现状，为推进生态文明建设做出贡献。

参考文献：

[1] 陈云贵，高旭.微信小程序开发从入门到实战：微课视频版[M].北京：清华大学出版社，2020.

[2] 张巧岭.基于微信小程序的垃圾分类系统的设计与实现[J].电子世界，2020（21）：185-186.

[3] 陈宏样，马秋宇，李丽君，等.“记忆帮”微信小程序的设计与开发[J].科技与创新，2022（4）：35-37，40.

[4] 乐万德，程传旭.基于云开发的C语言客观题练习小程序[J].信息技术与信息化，2021（7）：207-209.

[5] 邓斌权，李剑波，瞿先超.基于云开发和微信小程序的垃圾分类系统实现[J].电脑知识与技术，2020，16（7）：82-84.

【通联编辑：谢媛媛】