实验三报告

m0_73624048

已于 2024-08-26 21:48:24 修改

阅读量1.3k

点赞数 23

文章标签： notepad++

于 2024-08-26 21:44:28 首次发布

本文链接：https://blog.csdn.net/m0_73624048/article/details/141574245

版权

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

姓名和学号？
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验3：微信小程序云开发
博客地址？
Github仓库地址？

一、实验目标

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

二、实验步骤

1.在百度智能云创建一个图像识别应用

在百度智能云-管理中心 (baidu.com)中领取免费资源，然后在百度智能云-管理中心 (baidu.com)中填入应用名称，全选图像识别后选择”个人“，填入应用描述后点击”立即创建“。

进入百度智能云-管理中心 (baidu.com)，记录下创建应用的API Key和Secret Key。

2.导入项目

将垃圾分类小程序: 一款基于微信小程序云开发的垃圾分类识别小程序 (gitee.com)的代码克隆下来，导入微信开发者工具中，注意选择”微信云开发“，导入文件需要包含cloudfunctions，miniprogram，project.config.json。

3.创建一个云开发环境

点击”云开发“，按提示进行云开发环境创建。

6bcf866c7666def12102c95fe3da8a9

记录环境ID。

4.添加百度API KEY、SECRET KEY和小程序APP ID, 云环境ID

在project.config.json中添加自己的App ID。

在app.js中添加自己的云环境ID。

在search.js中添加百度API Key和Secret Key。

5.部署云函数

右键cloudfuntions文件夹，选择当前环境为使用的云开发环境。

点击cloudfuntions文件夹展开子文件夹，依次右键点击展开的子文件夹并点击弹出的”上传并部署安装云端依赖(不上传node_modules)“。

6.部署云数据库

点击小程序开发工具的”云开发“，点击”数据库“，创建集合trash, type，依次导入trash.json, type.json文件。

至此部署完成，小程序可以成功使用。

7.代码分析

1)app.json

app.json 文件定义了小程序的基本配置信息。

{
    "cloud": true,

cloud: true 表示该小程序启用了云开发能力。

    "pages": [
        "pages/main/main",
        "pages/search/search",
        "pages/index/index",
        "pages/my/my"
    ],

pages 数组列出了小程序的所有页面路径。页面按照顺序决定页面栈中的顺序，第一个页面通常是小程序的首页。这里的页面分别是 main、search、index 和 my。

    "window": {
        "backgroundColor": "#ffffff",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#409EFF",
        "navigationBarTitleText": "Classification",
        "navigationBarTextStyle": "white"
    },

window对象定义了小程序窗口的基本样式。backgroundColor设置页面背景色,backgroundTextStyle设置下拉显示出来的窗口背景的文字样式等，此处不再赘述。

    "tabBar": {
        "color": "#515151",
        "selectedColor": "#ffffff",
        "borderStyle": "white",
        "backgroundColor": "#409EFF",
        "list": [
            {
                "pagePath": "pages/main/main",
                "iconPath": "/images/index2.png",
                "selectedIconPath": "/images/index1.png",
                "text": "分类"
            },
            {
                "pagePath": "pages/search/search",
                "iconPath": "/images/search2.png",
                "selectedIconPath": "/images/search1.png",
                "text": "搜索"
            },
            {
                "pagePath": "pages/my/my",
                "iconPath": "/images/own2.png",
                "selectedIconPath": "/images/own1.png",
                "text": "我的"
            }
        ]
    },

tabBar配置了小程序底部的标签栏。color设置标签栏上文字/图标的默认颜色，selectedColor设置标签栏上文字/图标选中状态的颜色，borderStyle:设置标签栏的边框样式，backgroundColor设置标签栏的背景色。

list数组定义了标签栏上的每一个Tab。pagePath表示当前Tab对应的页面路径，iconPath表示图标文件路径，selectedIconPath表示选中时的图标文件路径，text表示Tab上按钮的名字。

2)main.js

data属性定义了页面初始化的状态，展示了五张图片。

  data: {
    kindList: [],
    imgPaths: [
      "../../images/4.jpg",
      "../../images/0.jpg",
      "../../images/1.jpg",
      "../../images/2.jpg",
      "../../images/5.jpg",
    ]
  },

onLoad函数在页面加载时执行，使用setData 更新页面数据kindList，从全局数据中获取kindList。

  onLoad: function (options) {
    this.setData({
      kindList: app.globalData.kindList
    });

3)search.js

该页面主要用于实现搜索功能，包括热门搜索、普通搜索和图像识别搜索。着重分析几个函数：

onLoad: function (options) {
  this.setData({
    kindList: getApp().globalData.kindList,
  });

  this.onPullDownRefresh();
},

onShow: function () {
  this.setData({
    inputTxt: null
  });
},

onLoad在页面加载时执行，从全局数据中获取分类列表，并调用onPullDownRefresh函数来刷新热门搜索项。

onShow在页面显示时执行，清空输入框的内容。

onPullDownRefresh: function () {
  var that = this;

  if (that.data.inputTxt) {
    wx.stopPullDownRefresh();
    return;
  }

  that.setData({
    hotSearchItems: []
  })

  // 显示加载界面
  wx.showLoading({
    title: '加载中',
  });

  this.getHotItems().then(res => {
    console.log("【热搜项目】", res)

    that.setData({
      hotSearchItems: res.result.data
    })

    wx.stopPullDownRefresh()

    // 隐藏加载界面
    wx.hideLoading();
  })
},

onPullDownRefresh函数在用户下拉刷新时执行，获取热门搜索项并更新数据。

getHotItems: function () {
  var that = this;
  return new Promise(function (resolve, reject) {
    wx.cloud.callFunction({
      name: 'getHotItems',
      success: resolve,
      fail: reject
    })
  })
},

getHotItems函数用于从云函数获取热门搜索项。

其他函数比如getInput函数用于获取用户在输入框中输入的内容，doClick函数用于处理点击搜索按钮后的逻辑，包括验证输入、调用搜索函数并处理返回的结果…由于函数很多，限于篇幅原因其余不做说明，类似分析即可。

4)云函数

以cloudfunctions\getHotItems中的云函数为例，这个云函数的作用是从名为trash的集合中获取按click_times字段降序排列的前20条记录：

exports.main = async (event, context) => {
  const db = cloud.database()
  try {
    return await db.collection('trash').orderBy('click_times', 'desc').limit(20).get()
  } catch (e) {
    console.error(e)
  }
}

exports.main定义了云函数的主要执行逻辑。async关键字表明这是一个异步函数，可以使用await等待异步操作的结果。event参数包含了调用云函数时传入的参数，通常为空或者包含一些额外信息。context参数包含了云函数运行时的上下文信息，比如请求的来源等。

cloud.database()创建一个云数据库的实例，可以用来执行数据库操作。db.collection('trash')指定要查询的集合名为trash，orderBy('click_times', 'desc')设置查询排序方式，按照字段click_times降序排序，limit(20)限制查询结果的数量为最多20条记录，get()发起查询请求，并返回查询结果。

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

在实验过程中遇到了一些挑战，例如正确配置云环境和安全地管理API密钥，但通过仔细遵循指南和实践操作，这些问题都得到了解决。通过这次实验，不仅学会了如何使用微信小程序进行云开发，还加深了对云函数、云数据库及其在实际应用中作用的理解。同时，在部署和调试过程中，也提升了问题排查的能力，进一步巩固了软件开发的知识基础。