小程序云开发实战:构建全栈应用

无需搭建服务器,使用云开发能力快速构建全栈应用

9课时 进阶级 2024-10-05更新

课程介绍

本教程将带领你学习小程序云开发技术,无需搭建服务器,即可快速构建全栈应用。通过实战项目,你将掌握云数据库、云函数、云存储等核心能力,以及用户认证、权限管理等高级特性,成为一名全能的小程序开发者。

学习目标

掌握小程序云开发全套技术,能够独立开发全栈小程序应用

适合人群

有基础小程序开发经验,想学习全栈开发的开发者

前置知识

HTML、CSS、JavaScript基础,小程序开发入门知识

1. 小程序云开发介绍与环境准备

1.1 什么是小程序云开发

小程序云开发(CloudBase)是小程序官方提供的Serverless云服务,为开发者提供了云数据库、云函数、云存储等能力,让开发者无需搭建服务器,即可快速开发全栈应用。

云开发的核心优势:

  • 无需搭建和维护服务器,降低开发门槛
  • 一键部署,快速上线
  • 弹性扩展,自动应对流量变化
  • 安全可靠,数据加密存储
  • 与小程序无缝集成,开发体验佳

1.2 云开发核心能力

小程序云开发提供三大核心能力:

云数据库

基于MongoDB的文档型数据库,提供增删改查等操作,支持客户端直接操作和云函数操作。

云函数

运行在云端的JavaScript函数,可实现复杂业务逻辑,调用第三方API,操作数据库等。

云存储

用于存储图片、视频、音频等文件,提供上传、下载、删除等操作,自动生成访问链接。

1.3 支持云开发的小程序平台

目前主流的小程序平台大多提供了云开发能力:

  • 微信小程序:微信云开发
  • 支付宝小程序:支付宝云开发
  • 百度智能小程序:百度云开发
  • 字节跳动小程序:字节云开发

虽然各平台的云开发在API细节上略有差异,但核心概念和使用方式基本一致。本教程以微信云开发为例进行讲解,所学知识也适用于其他平台。

1.4 开通云开发环境

使用云开发前,需要先开通云开发环境:

  1. 安装并打开微信开发者工具
  2. 创建一个新的小程序项目(选择"云开发 QuickStart"模板)
  3. 在开发者工具的左侧菜单中,点击"云开发"按钮
  4. 按照提示开通云开发服务,创建第一个云环境
  5. 等待环境初始化完成(通常需要1-3分钟)

云开发环境创建成功后,你将获得:

  • 一个云数据库实例
  • 云函数运行环境
  • 5GB云存储空间(免费额度)
  • 每月一定额度的云函数调用次数

1.5 项目配置与初始化

创建项目后,需要进行云开发初始化配置:

1. 在app.js中初始化云开发环境:

// app.js
App({
  onLaunch() {
    // 初始化云开发环境
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // 环境ID,在云开发控制台中获取
        traceUser: true, // 是否追踪用户,建议开启
      });
    }
  }
});

2. 在project.config.json中配置云函数根目录:

3. 创建云函数目录:

在项目根目录下创建与cloudfunctionRoot同名的文件夹(通常为cloudfunctions),并右键点击该文件夹,选择"同步云函数列表"。

💡 小贴士

每个小程序账号可以免费创建两个云开发环境,建议一个用于开发测试,一个用于生产环境。环境创建后,环境ID是固定的,需要妥善保存。如果忘记环境ID,可以在云开发控制台的"设置"中查看。

2. 云数据库基础与操作

2.1 云数据库简介

云数据库是小程序云开发提供的文档型数据库,基于MongoDB实现,数据以JSON格式存储,适合存储非结构化或半结构化数据。

云数据库的特点:

  • 文档型数据库,数据格式灵活
  • 支持客户端直接操作和云函数操作两种方式
  • 提供细粒度的权限控制
  • 支持事务和索引
  • 自动备份和容灾

2.2 核心概念

云数据库的核心概念:

  • 集合(Collection):类似于关系型数据库中的表,用于存储文档的容器
  • 文档(Document):类似于关系型数据库中的行,是一组键值对的集合,格式为JSON
  • 字段(Field):类似于关系型数据库中的列,是文档中的一个键值对
  • 记录ID(_id):每个文档自动生成的唯一标识符

2.3 创建集合

可以通过两种方式创建集合:

1. 通过云开发控制台创建:

  1. 打开云开发控制台
  2. 选择"数据库"选项卡
  3. 点击"创建集合"按钮
  4. 输入集合名称(如"todos"),点击"确定"

2. 通过代码创建:

 {
    console.log('集合创建成功', res);
  })
  .catch(err => {
    console.error('集合创建失败', err);
  });

2.4 数据库操作(CRUD)

云数据库支持基本的CRUD操作(创建、读取、更新、删除):

2.4.1 插入数据(Create)

 {
  console.log('插入成功', res);
  // res._id 为插入的记录ID
})
.catch(err => {
  console.error('插入失败', err);
});

2.4.2 查询数据(Read)

 {
  console.log('查询成功', res.data);
})
.catch(err => {
  console.error('查询失败', err);
});

// 条件查询
db.collection('todos')
  .where({
    completed: false
  })
  .get()
  .then(res => {
    console.log('未完成的任务', res.data);
  });

// 查询单条数据
db.collection('todos')
  .doc('记录ID') // 指定记录ID
  .get()
  .then(res => {
    console.log('查询单条数据', res.data);
  });

2.4.3 更新数据(Update)

 {
    console.log('更新成功', res);
  })
  .catch(err => {
    console.error('更新失败', err);
  });

// 条件更新多条数据
db.collection('todos')
  .where({
    completed: true
  })
  .update({
    data: {
      isDeleted: true
    }
  })
  .then(res => {
    console.log('更新成功', res);
  });

2.4.4 删除数据(Delete)

 {
    console.log('删除成功', res);
  })
  .catch(err => {
    console.error('删除失败', err);
  });

// 条件删除多条数据
db.collection('todos')
  .where({
    isDeleted: true
  })
  .remove()
  .then(res => {
    console.log('删除成功', res);
  });

2.5 高级查询

云数据库支持丰富的查询操作符,实现复杂查询需求:

                                

2.6 权限管理

云数据库提供了细粒度的权限控制,确保数据安全。默认情况下,集合的权限设置为"仅创建者可读写"。

常用的权限设置:

  • 仅创建者可读写:只有创建该记录的用户才能读写,适用于用户私人数据
  • 仅创建者可写,所有人可读:适用于公开信息,但只有创建者可以修改
  • 所有人可读,仅管理员可写:适用于公告等公开只读信息
  • 仅管理员可读写:适用于敏感数据

可以在云开发控制台的"数据库" -> "集合权限"中修改权限设置。

本章内容到此结束,其他章节内容将陆续更新...

相关推荐教程