[猫头虎分享21天微信小程序基础入门教程]第16天：小程序的云开发与数据库操作

猫头虎

发布于 2024-05-28 08:12:21

1870

发布于 2024-05-28 08:12:21

文章被收录于专栏：用户11053981的专栏用户11053981的专栏

[猫头虎分享21天微信小程序基础入门教程]第16天：小程序的云开发与数据库操作

第16天：小程序的云开发与数据库操作 ☁️

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何使用云开发功能进行数据库操作。云开发是微信小程序提供的一项强大功能，可以帮助你快速构建和部署后端服务，无需自行搭建服务器。🚀

云开发的基础

一、初始化云开发环境

在使用云开发之前，需要先初始化云环境。

1. 开通云开发

在微信小程序管理后台，找到“云开发”模块，并开通云开发服务。

2. 初始化云开发

在小程序的 app.js 文件中初始化云开发环境：

App({
  onLaunch() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        env: 'your-env-id', // 你的云开发环境ID
        traceUser: true
      });
    }
  }
});

二、使用云数据库

云数据库提供了一个完全托管的 NoSQL 数据库，支持数据的增删改查操作。

1. 创建集合

在云开发控制台中创建一个集合，例如 todos。

2. 添加数据

在页面的 js 文件中使用 wx.cloud.database 进行数据操作：

const db = wx.cloud.database();

Page({
  data: {
    todoText: ''
  },
  handleInput(e) {
    this.setData({ todoText: e.detail.value });
  },
  addTodo() {
    if (!this.data.todoText) return;
    db.collection('todos').add({
      data: {
        text: this.data.todoText,
        createdAt: new Date()
      },
      success: (res) => {
        console.log('Todo added:', res);
        this.setData({ todoText: '' });
        this.fetchTodos(); // 更新列表
      },
      fail: (err) => {
        console.error('Failed to add todo:', err);
      }
    });
  }
});

3. 查询数据

Page({
  data: {
    todos: []
  },
  onLoad() {
    this.fetchTodos();
  },
  fetchTodos() {
    db.collection('todos').orderBy('createdAt', 'desc').get({
      success: (res) => {
        this.setData({ todos: res.data });
      },
      fail: (err) => {
        console.error('Failed to fetch todos:', err);
      }
    });
  }
});

4. 更新数据

Page({
  updateTodo(id, newText) {
    db.collection('todos').doc(id).update({
      data: {
        text: newText
      },
      success: (res) => {
        console.log('Todo updated:', res);
        this.fetchTodos(); // 更新列表
      },
      fail: (err) => {
        console.error('Failed to update todo:', err);
      }
    });
  }
});

5. 删除数据

Page({
  removeTodo(id) {
    db.collection('todos').doc(id).remove({
      success: (res) => {
        console.log('Todo removed:', res);
        this.fetchTodos(); // 更新列表
      },
      fail: (err) => {
        console.error('Failed to remove todo:', err);
      }
    });
  }
});

云函数

三、创建和使用云函数

云函数可以在云端执行代码，处理复杂的业务逻辑。

1. 创建云函数

在云开发控制台中创建一个云函数，例如 sum。

2. 编写云函数代码

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

// 云函数入口函数
exports.main = async (event, context) => {
  const { a, b } = event;
  return {
    sum: a + b
  };
};

3. 调用云函数

在页面的 js 文件中调用云函数：

wx.cloud.callFunction({
  name: 'sum',
  data: {
    a: 5,
    b: 3
  },
  success: (res) => {
    console.log('Sum:', res.result.sum); // 输出: 8
  },
  fail: (err) => {
    console.error('Failed to call cloud function:', err);
  }
});

小测试 🧪

创建一个简单的待办事项应用，使用云数据库进行增删改查操作。
创建并调用一个简单的云函数，实现两个数的加法运算。

今日学习总结 📚

概念	详细内容
云开发	初始化云开发环境，开通云开发服务
云数据库	使用云数据库进行数据的增删改查操作
云函数	创建和调用云函数，实现复杂业务逻辑