创建一个垃圾分类的微信小程序

一、实验目标

1、学习微信小程序云开发的基础知识。

二、实验步骤

前置准备

（1）注册百度智能云并实名认证, 创建一个图像识别应用, 记录应用API KEY 和 SECRET KEY, 创建资源之后记得领取免费资源

（2）使用微信开发者工具创建一个云开发环境, 并复制环境ID

（3）准备trash.json、type.json。

1.创建项目

依次输入项目名称、选择目录、APPID等，注意选择使用云服务。

2.修改与删除文件（及恢复文件初始化）

3.编写文件

（1）部署云函数

添加百度API KEY \ SECRET 和 小程序appid, 云环境ID

部署云数据库

• 点击小程序开发工具的云开发

• 点击数据库

• 创建集合trash, type

• 依次导入trash.json, type.json文件

部署云函数

• 点击cloudfuntions文件夹展开子文件夹

• 依次右键点击展开的子文件夹并点击弹出的上传并部署(不上传node_modules)

（2）编译主要页面（分类、搜索、我的）

由于重要性，下面只介绍搜索部分

下面是对search.wxml代码的逐行解释：

1. 基础布局

• 主容器，定义了整个页面的结构。

1. 搜索区域

• 包含了一个相机图标（调用摄像头），一个输入框和一个搜索图标。

• input:

  • value属性绑定了变量inputTxt，用于显示用户输入的内容。

  • bindconfirm事件在用户按下确认键时调用doClick方法。

  • bindinput事件在输入变化时调用getInput方法。

1. 热门搜索

• 当输入框为空时显示热门搜索项。

• 使用wx:for循环遍历hotSearchItems数组，并为每个项创建按钮，点击会调用doClickHotItem方法。

1. 显示搜索项目

• 当有输入时显示对应的搜索结果。

• 每个搜索结果项都有相关数据 (id, type, name) 并绑定到点击事件 doClickItem。

1. 弹框显示搜索项目的详细信息

• 一个模态框，展示特定搜索项目的详细信息。

• 根据所选项目的类型显示背景色、图标及其他信息。

1. 显示扫描到的五篇

• 另一个模态框，用于展示扫描到的识别物品，每一项都是可点击的，触发doClickScanItem方法。

（3）对主页面元素进行合适的整理

在search.wxss中编写代码。

（4）程序逻辑的实现

在search.js文件中修改.

三、程序运行结果

运行结果如下：

四、问题总结与体会

本次实验主要目的为学习使用云开发，所以代码部分大多为借鉴。

主要问题在于无法使用图片识别，后来经过查找，原因是没有申请免费资源。

这次实验使我对于云开发有了初步的了解，也是我对我的个人项目有了新的想法，期待付诸实践。

（全部代码在：艺术就是派/移动软件开发 - 码云 - 开源中国 (gitee.com)）