中国海洋大学移动软件开发实验三

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

姓名：xxx 学号：xxxxxxxxx

姓名和学号？	xxxxxxxxxxx
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验3：垃圾分类小程序
博客地址？	here
Github仓库地址？	https://gitee.com/dio-trump/software_dev

一、实验目标

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

二、实验步骤

1、准备步骤

1、注册百度智能云并完成实名认证, 创建一个图像识别应用。

领取免费资源

2、创建微信云开发环境，记录环境ID备用

2、开始开发小程序

1、删除模板中自带的云函数并新建四个云函数如下

然后上传并部署

2、删除miniprogram下components文件中的四个文件，创建并编写chatroom文件

3、向images文件夹中导入相关图片

4、删除pages中的全部文件，创建index、main、my、search四个文件夹，编写如下

在main.js文件中

1、在 data 中定义了两个变量 kindList 和 imgPaths，kindList 初始化为空数组，imgPaths 包含了五个图片路径。

2、onLoad 生命周期函数在页面加载时被调用，通过 setData 方法将 app.globalData.kindList 赋值给页面的 kindList。

3、doClick 是自定义的点击事件处理函数，当用户点击页面某个元素时，会触发该函数。函数内部通过 console.log 打印点击的事件信息，并通过 wx.navigateTo 方法跳转到另一个页面 kindInfo/kindInfo，并将被点击元素的信息作为参数传递过去。

在search.js文件中

数据部分 (data)

• inputTxt: 保存用户输入的搜索内容。
• hotSearchItems: 存储热门搜索项目。
• kindList: 保存垃圾分类的种类列表。
• searchItmes: 存储搜索到的所有项目。
• selectItem: 保存用户选择的搜索结果。
• scanItems: 保存通过扫描识别的物品。
• baiduToken: 保存从百度API获取的Token，用于图片识别。
• isHiddenInfoModal, isHiddenEditModal, isHiddenScanModal: 控制弹窗的显示和隐藏状态。
• apisecret, apikey: 百度API的密钥，用于获取百度Token。这里使用自己创建的图片识别应用的apisecret和apikey

生命周期函数

• onLoad: 页面加载时调用，初始化 kindList 并触发下拉刷新操作 (onPullDownRefresh)。
• onShow: 页面显示时重置输入框内容。

页面功能

1. 下拉刷新 (onPullDownRefresh):

   • 清空 hotSearchItems 并显示加载界面，通过 getHotItems 获取热门搜索项目并更新到页面数据中。

2. 获取热门搜索项目 (getHotItems):

   • 调用云函数 getHotItems 来获取热门搜索的数据。

3. 输入框事件 (getInput):

   • 获取用户输入的搜索内容并更新 inputTxt。

4. 点击搜索按钮 (doClick):

   • 判断输入是否有效，如果无效则提示用户；如果有效，则清空历史搜索数据，显示加载界面，并调用 searchFunction 进行搜索。搜索完成后，将搜索结果中的分类信息更新并显示。

5. 搜索功能 (searchFunction):

   • 调用云函数 search，根据 inputTxt 搜索相关数据。

6. 选择项目 (doClickItem):

   • 用户点击某个搜索结果后，显示详细信息的弹窗。根据搜索结果的分类，显示对应的垃圾分类信息。

7. 点击热门搜索 (doClickHotItem):

   • 用户点击热门搜索项目后，将该项目作为输入内容并执行搜索操作。

8. 点击扫描按钮 (doClickCamera):

   • 首先检查用户是否已授权相机权限，若已授权则调用 getImage 获取图片并进行扫描识别。扫描到的物品会显示在弹窗中。

9. 获取百度Token (getBaiduTaken):

   • 通过百度API的密钥获取Token，用于后续的图片识别请求。

10. 获取本地图片 (getImage):

    • 用户可以从相册或相机中选择一张图片，之后会读取图片数据并进行识别。

11. 判断是否已经授权相机 (checkAuth):

    • 检查用户是否已授权使用相机权限，如果未授权则提示用户在设置中进行授权。

12. 扫描图片中的数据 (scanImageInfo):

    • 使用百度API的图像识别功能，对用户上传的图片进行扫描识别，并返回识别到的物品列表。

13. 关闭弹窗 (modal_hidden):

    • 关闭详细信息或扫描结果的弹窗。

14. 点击扫描识别的项目 (doClickScanItem):

    • 当用户点击识别到的物品时，将物品名称作为输入内容并执行搜索。

15. 点击扫描弹窗确定 (scanModal_confirm):

    • 关闭扫描结果的弹窗。

5、新建style文件夹并编写如下

6、修改app.js app.json app.wxss

将app.js文件中的环境ID填写为自己云开发使用的环境ID

7、在数据库中新建并导入老师提供的数据集trash和type

三、程序运行结果

四、问题总结与体会

本次实验中我成功完成了第三个小程序，即垃圾分类小程序。在这个过程中主要遇到的问题包括部署图像识别应用并获取免费资源后仍然无法识别，解决方法是等待一段时间待免费资源到账后即可，另一个问题时开始云函数未部署完全，导致部分功能无法使用，检查并进行部署后得到解决。