垃圾分类小程序，识别和站点查询，答题，用户后台管理集一体的小程序

2.1 云开发简介

云开发（CloudBase）是云端一体化的后端云服务，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

2.2 运行环境和运行工具：
微信开发工具，创建云开发，导入数据库运行即可。

4 总体设计
4.1:开发工具

前端: 微信开发工具
后端: 云函数、云调用、云存储
数据库: 云数据库

4.2页面布局
使用“tabBar”构建5个页面分别为指南、识别、分类、科普、和题库功能。关键代码如下：

“list”: {
“pagePath”: “pages/zhinan/zhinan”,
“text”: “指南”,
“iconPath”: “images/qa_default.png”,
“selectedIconPath”: “images/qa.png”
},
{
“pagePath”: “pages/index/index”,
“text”: “识别”,
“iconPath”: “/static/image/home.png”,
“selectedIconPath”: “/static/image/home_action.png”
},
{
“pagePath”: “pages/comm/comm”,
“text”: " 资讯",
“iconPath”: “/static/image/comm.png”,
“selectedIconPath”: “/static/image/comm-action.png”
},
{
“pagePath”: “pages/answer/answer”,
“text”: " 答题",
“iconPath”: “/static/image/answer.png”,
“selectedIconPath”: “/static/image/answer_action.png”
},
{
“pagePath”: “pages/user/user”,
“text”: " 用户",
“iconPath”: “/static/image/user.png”,
“selectedIconPath”: “/static/image/user_action.png”
}
]

                      图3-1 tabBar页面4.3.2识别页面

通过伪类元素::before实现输入框有一个小图标的效果，给输入框定义一个bindtap事件调用js的接口实现对数据库的查询功能。
添加新垃圾输入框也实现了后台动态绑定输入框的内容然后在定义一个变量通调用数据库的接口实现对数据的增加。
且对拍照功能未识别后的处理，我定义了一个回调函数输出到控制台，让开发人员更好的清楚那些物品分类没有加到数据库中。如图4-1
关键代码如下：

或

自动识别

站点查询

4.3.3资讯页面
点击图片可实现点击事件调转到数据库实现对数据库的查询功能，另外我额外添加了数据触底事件的弹窗显示。如图4-4

图4-4 资讯页面
关键代码如下：

getcommList() {
wx.cloud.callFunction({
name: “db”,
data: {
KaTeX parse error: Expected 'EOF', got '}' at position 88: …ta.limit }̲ }).then(re…util.errorToShow(“请先登录”)
}
},
mNext: app.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ // app.util.errorToShow(“没有更多的题了”)
wx.showModal({
title: ‘提示’,
content: ‘没有更多的题了，是否提交测试？’,
success: (res) => {
if (res.confirm) {
wx.navigateTo({
url: ‘/pages/result/result?list=’ + JSON.stringify(this.data.list),
})
}
}
})
}

4.3.5 用户页面

关键代码如下：

Page({
data: {
hideEyes: false
},
passwordF_B() {
this.setData({
hideEyes: !this.data.hideEyes
})
},
formSubmit(e) {
let {
password,
admin
} = e.detail.value
if (admin == 1 && password == 1) {
app.KaTeX parse error: Expected 'EOF', got '}' at position 106: …, }) }̲ else { a…util.errorToShow(“密码或者账号错误”)
}
}
})

Hi，{{nickName}}

我的点赞

我的错题

我的积分

4.4控件
Input控件
获取input方式
3.4.1:Bindinput事件
3.4.2 :监听的方式
3.4.3:bindtap：在事件中绑定一个事件处理函数
首页控件
3.4.4 swiper 和banner 轮播图实现首页的自动切换效果
5.数据库设计和云函数
5.1创建数据库
创建product、sort数据库导入垃圾分类的具体数据
具体字段内容设计如图5-2

6.1 系统总结
垃圾“类聚”小精灵是一个将垃圾与互联网相结合的网站，它使得用户
能够精准的辨别垃圾的具体分类类型和附近的垃圾收回站点，本系统采用微信开发工具进行开发，面向接口编程，提高了开发人员的开发效率，同时运用云函数、云数据库、云调用的技术使得系统的功能模块更加清晰。
系统主要的功能模块分为数据指南、识别、资讯、答题、用户这五大模块等。首先用户可以利用拍照来分别垃圾同时还可以查询附近的垃圾回收站点；用户中心用户可以登录后台，把操作的结果显示在前台页面中。
6.2 展望
然而由于时间上的问题和个人精力以及水平有限等一系列的原因，本次小程序还有许多可以完善的地方。
在数据更新方面，后续希望能定时自动更新数据甚至自动清洗、导入数据库
等一列自动化工作。在数据分析方面，没有用到机器学习算法分析，后续可以加
入机器学习算法甚至深度学习方面的知识。在页面显示方面，因为非专业进行设
计，所以后续可以待优化提升的空间还很大，后续会去提高用户体验，使得用户
在浏览有关垃圾分类知识更加简洁。还有系统代码的性能、速度等都有待优化。

1；不懂的联系原创的微信

垃圾分类小程序，识别和站点查询，答题，用户后台管理集一体的小程序相关推荐

微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
纯jsp实现评论功能_基于云开发的小程序版本更新、评论功能改进、后台管理的实现...
关于微信小程序更新问题实现 1)小程序的启动方式: 冷启动----小程序首次打开或销毁后再次被打开热启动----小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前台. ...
thinkphp开发的活动报名小程序源码带后台管理完整的报名小程序源码
介绍: 活动报名小程序源码,基于thinkphp开发的报名小程序源码,带有后台管理,用户发布活动信息.报名可以后台管理,简单测试了一下,基本都还是可以的. 不过需要注意的是,用户注册部分是发送手机短信 ...
micropython 人脸识别检测_Flask实战！从后台管理到人脸识别，六款优质Flask开源项目介绍...
Flask 是一个微型的 Python 开发的 Web 框架,基于 Werkzeug WSGI 工具箱和 Jinja2 模板引擎. Flask 使用 BSD 授权. Flask 也被称为 " ...
微信小程序页面内搜索查询（无后台）
先上图,这是我要实现的效果! 当我们没有页面内没有分页又需要搜索时,我们可以直接在前端写搜索功能,这样也极大的减轻了后台查询压力. 这里实现原理用的是indexOf(string):查询字符串是否包含 ...
微信小程序毕业设计论文求职招聘|兼职管理系统+后台管理项目源代码
后台管理系统日志（一个小插曲）
关于 css 中的样式简化写法的理解关于点击展开二级菜单的理解一. 关于 css 中的样式简化写法的理解写法① #menu>div>div:hover{background: rgb ...
景安服务器可以用小程序吗,微信又放大招，无网环境也能使用小程序！
原标题:微信又放大招,无网环境也能使用小程序! 最近微信小程序的动作不断,就在昨晚又迎来了新能力,也是微信送给开发者的中秋礼物. 这次主要上线4个能力: 小程序"服务商助手" &q ...

垃圾分类小程序，识别和站点查询，答题，用户后台管理集一体的小程序

1；不懂的联系原创的微信

垃圾分类小程序，识别和站点查询，答题，用户后台管理集一体的小程序相关推荐

最新文章

热门文章