实验3：云开发之垃圾分类小程序

Hockbest

于 2024-08-26 21:41:10 发布

阅读量849

点赞数 23

文章标签：小程序

本文链接：https://blog.csdn.net/m0_73768807/article/details/141573747

版权

2024年夏季《移动软件开发》实验报告


本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验3：云开发之垃圾分类小程序
Github仓库地址？	实验3：云开发之垃圾分类小程序

【简要介绍】

本项目基于 微信云开发服务，利用云数据库、云函数等小程序云开发技术进行 后端部署 以及 前后端连接与展示

【学习链接】

微信小程序云开发以及云开发实例展示

垃圾分类小程序 Gitee

一、实验目标

1、学习微信小程序云开发的基础知识。完成利用文本搜索的功能

二、实验步骤

实验主要分为 实验准备、后端部署、前端关键代码解读 三部分

实验准备

1、项目创建

创建本地文件夹，打开Git bash，输入以下命令完成项目克隆

git clone git@gitee.com:xxwan/garbage-sorting-applet.git

将本地的目标文件夹导入微信开发者小程序

注：关于微信小程序的注册与第一次使用：

① 微信公众平台完成用户注册，微信小程序注册、备案相关流程

②安装微信开发者工具，利用平台信息后获取的小程序 AppID 实现连接

在这里插入图片描述

后端服务选择微信云开发（这里我已创建云开发环境，所以未展示不选择云服务选项）

AppID：选择开发者注册获得的AppID

在这里插入图片描述

2、百度智能云创建图像识别应用、记录API Key和Secret Key

百度云注册&实名认证（这里完成后可直接跳转创建应用），输入名称后立即创建

在这里插入图片描述

从应用列表中可以查看用户已注册应用，并根据应用名称找到对应应用，保存对应API Key和Secret Key（之后会用到）

在这里插入图片描述

数据库&后端部署

进入云开发控制台（第一次使用会出现弹窗，确认后自动创建云开发环境）

在这里插入图片描述

进入数据库视窗并创建trash、type集合

在这里插入图片描述

导入数据库，分别在trash、type集合中导入trash.json、type.json（这里的环境ID记得保存）

在这里插入图片描述

导入成功后可以在数据库中看到相关数据

在这里插入图片描述

最后点击概览记录环境ID（导入json文件时也可以保存）

在这里插入图片描述

前端连接与实现

连接

添加API Key和Secret Key

在这里插入图片描述

添加AppID

在这里插入图片描述

添加环境ID

在这里插入图片描述

对 cloudfunctions 下每个文件夹，右键 上传并部署：云端安装依赖

在这里插入图片描述

实现

这里主要分析与云开发相关的搜索界面及功能，即 search.js、search.wxml

【热门搜索&文字搜索】

点击相关标签 / 输入框中输入文字 -> 调用绑定的 doClickHotItem 函数 -> 判断内容是否有效 -> 清空历史搜索项&展示加载中界面（由 showLoading 控制）-> 在相关垃圾类型中搜索 -> 隐藏加载界面（hideLoading） -> 若未搜索到，showToast 提示 “暂时搜索不到” ；若搜索到则展示数据相关内容

【图像识别搜索】

点击扫描样式按钮 -> 调用 doClickCamera 函数 -> 授权相机使用 -> 获取 BaiduToken -> 读取图片文件 wx.getFileSystemManager().readFile 并对扫描图片物品调用 scanImageInfo 进行扫描 ->对选择的标签进行同【热门搜索&文字搜索】的搜索，获取结果