关于微信小程序云开发以及云开发实例展示
发布于 1 年前 作者 tanwei 933 次浏览 来自 分享

本文分享给使用微信云开发的同学

序言

首先，云开发是一种趋势，因为跨平台解决方案可以提高开发效率，减少开发成本。使用云开发，开发者无需关注服务器、网络和数据库等底层技术，可以专注于业务逻辑的开发，从而减少了开发和运维方面的投入。

云开发的优势

云开发的最大优点之一是架构的高度灵活性。云开发架构可以随着业务需求的变化而快速地适配和扩容，适用于各种规模的企业。其次，云开发的环境部署十分简单快速，企业只需要在云平台上构建自己的应用即可，省去了基础设施的架构和维护环节。此外，云开发还提供了高效、安全、可靠的数据存储和管理服务，支持多种类型的数据库和数据分析和挖掘功能，帮助企业实时洞察业务趋势。这一切可以使得企业在应付日益激烈的市场竞争时，更加快速、灵活地响应变化。

一、小程序云开发的组成

小程序云开发由四部分组成

  1. 云数据库
  2. 云函数
  3. 云存储
  4. 云托管

所有云开发开始之间都要创建云环境, 本文介绍云数据库和云函数, 下面就从创建云环境开始讲解。

二、创建云环境

  1. 打开微信开发者工具,选择要创建云环境的小程序,点击微信开发者工具中的云开发按钮.如下图
  2. 打开云开发之后,会弹出创建云环境窗口,创建云环境之后进入云开发控制台,注意:新用户使用云环境会有一个月的免费体验哦!不要浪费啦
  3. 创建成功, 进入到下图的界面你的云环境就创建成功了

三、云数据库

云数据库提供高性能的数据库写入和查询服务。可以在云函数中读写数据，还可以通过云开发控制台对数据进行可视化的增、删、查、改等操作。微信小程序云开发所使用的数据库本质上就是一MongoDB数据库。MongoDB数据库是介于关系数据库和非关系数据库之间的产品：是非关系数据库中功能最丰富、最像关系数据库的。
数据库：默认情况下，云开发的函数可以使用当前环境对应的数据库。可以根据需要使用不同的数据库。对应MySQL中的数据库。
集合：数据库中多个记录的集合。对应MySQL中的表。
文档：数据库中的一条记录。对应MySQL中的行。
字段：数据库中特定记录的值。对应MySQL中的列。

3.1 创建集合, 在集合名称位置填写你要创建的集合名称并点击确定即可创建成功

创建集合对应Mysql中的就是创建表

3.2 向集合中添加记录

3.2.1 默认模式添加

默认模式可以可视化的添加记录

① 选择默认模式
② 文档ID也就是Mysql表中记录的ID, 在这个地方你可以自己手动编辑也可使由系统自动生成
③ 字段等同于Mysql中的表字段
④ 为字段对应的值的数据类型
⑤ 字段对应的值
⑥ 点击确定新增记录

3.2.2 JSON模式添加

JSON模式直接填入JSON格式的数据记录即可,

① 选择JSON模式
② JSON数据的ID对应默认模式中的ID,也可以不填写,不填写时自动生成。
③ 字段和对应的数值
④ 点击确定新增记录

3.3 编辑集合中的记录

① 在列表中选中你要修改的某条记录
② 点击编辑按钮进行编辑即可

3.4 删除集合中的记录

① 右键选中你要删除的记录
② 点击删除并点击确定即可删除

四、云函数

云函数云开发为企业和开发者们提供的无服务器执行环境，可以在无需购买和管理服务器的情况下运行代码。只需使用平台支持的语言编写核心代码并设置代码运行的条件，即可使用

本文将讲解代码端部署云函数

4.1 创建云函数

① 右键文件夹中的cloudfunctions文件加
② 点击新建Node.js云函数
③ 在框内输入你要编写的云函数名称
④ 云函数代码编辑完成后右键选择你的云函数选择上传代码(云端安装依赖)


4.2 使用云函数

在你要调用云函数的位置输入一下代码调用已上传的云函数,并处理相应的逻辑

 wx.cloud.callFunction({
      name: '云函数名称',
      success: (res) => {
        console.log(res)
      }
    })

五、云开发实例—小程序实战

5.1 项目介绍

本项目是一个垃圾分类项目，利用图像识别技术、语音识别技术以及小程序云开发技术实现。主要页面为以下三个页面, 主要是使用云函数的位置是搜索页面

<center class = “half”>
<img src = “https://img-blog.csdnimg.cn/683ad3f4bc80434982fb157d2c6579e0.png” width = 30% height= />
<img src = “https://img-blog.csdnimg.cn/e2e2453fdbbf4a9fa6f07d412614f731.png” width =30% />
<img src = “https://img-blog.csdnimg.cn/377fea1981b04dd5b89b17ace39ffbd1.png” width =30% />
</center>

5.2 创建项目，创建云环境， 创建并导入垃圾分类数据集




5.3 创建及调用云函数代码

本项目用到多个云函数， 这里仅列举两个

① 热门搜索列表

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
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)
  }
}

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

② 内容搜索列表

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
exports.main = async (event, context) => {
  const db = cloud.database()
  try {
    return await db.collection('trash').where({
      name: db.RegExp
        ({
          regexp: event._txt,
          //从搜索栏中获取的value作为规则进行匹配。
          options: 'i'
          //大小写不区分
        })}).get()
  } catch (e) {
    console.error(e)
  }
}

  return new Promise(function (resolve, reject) {
    wx.cloud.callFunction({
      name: 'search',
      data: {
        _txt: that.data.inputTxt
      },
     success: resolve,
     fail: reject
    })
  })

5.4 项目上线—小程序体验

有兴趣的朋友可以到小程序中感受下云开发的魅力

<img src = “https://s1.ax1x.com/2022/05/15/OgI3g1.jpg” />

回到顶部