小程序云开发实战

实验预计耗时：60分钟

前置实验教程：微信小程序开发实战

1. 课程背景

1.1 课程目的

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

在本次实验中，我们会将在线书城项目的改造为小程序云开发的模式，简化开发过程。

1.2 课前知识准备

学习本课程前，学员需要了解以下前置知识：

• 小程序云开发：开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
• 云开发提供了几大基础能力支持：
  • 云数据库：无需自建数据库，小程序云开发提供一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库。
  • 云存储：无需自建存储，小程序云开发结合 CDN 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理。
  • 云函数：云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码，同时微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码。
  • 云调用：原生微信服务集成。小程序云开发基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力，比如发送模板消息、获取小程序码等操作都可以在云函数中完成，详情可见具体开发指引。

2.实验环境

2.1 实验操作环境

本课程需要以下实验操作环境：

1. 可以接入互联网的笔记本电脑或者台式机（本实验使用 Windows 系统）
2. 要求有腾讯云账号，能够访问腾讯云官网 https://cloud.tencent.com
3. 安装微信开发者工具

2.2 实验架构图

本实验案例以一个简单的在线书城为例，涉及图书搜索，搜索列表页，搜索详情页等模块，实验架构图如下：

2.3 实验的数据规划表

下载online-bookstore-cloud

下载图书图片信息

3. 实验流程

本实验案例以腾讯云云函数为平台，构建一个简单的图书管理系统，用户可以通过URL访问获取文章信息和文章列表。

本实验涉及两个部分：

1. 第一个云开发小程序
2. 云开发小程序功能体验
3. 使用小程序云开发改造在线书城项目

4. 实验步骤

任务1 第一个云开发小程序

【任务目标】

在本任务中，您将了解如何开通并快速开发一个云开发小程序项目。

【任务步骤】

1、开通小程序云开发

1.打开微信开发者工具，点击菜单栏中的【云开发】选项；

2.在弹出的弹框中点击【开通】按钮；

3.点击开通后会弹出一个弹框，点击【确认】按钮；

4.在弹出的创建环境填写框中填写环境名称（本实验案例的环境名称为”test-env“），点击【确定】按钮后即可开通小程序云开发环境；

5.查看云开发控制台；

2、第一个云开发小程序

1.打开微信开发者工具，新建云开发模板，如下图所示：

2.打开 miniprogram 目录下的 app.js，将项目的云开发环境配置改成上一步骤中申请的（注意填写环境ID，而不是环境名，环境ID的查看方式参考后面步骤）；

env: 'test-env-cpaq3',

点击左上方的【云开发】按钮，可进入云开发控制台；

环境ID可以在云开发控制台-设置-环境设置中查看。

3.在微信开发者工具中，选择cloudfunctions文件夹，分别在每个云函数包上点击鼠标右键，选择创建并部署：云端安装依赖（不上传node_modules）选项。

4.等到云函数上传成功后则可以调用云函数了；

5.在云开发控制台的云函数一栏中，可以查看到云函数的上传情况。

任务2 云开发小程序功能体验

【任务目标】

通过快速案例，分别掌握云存储、云数据库以及云函数的使用。

【任务步骤】

1、小程序云存储使用

1.使用任务1中快速创建的小程序，点击上传图片，选择任意一个图片并点击打开；

2.上传成功后可以在云开发后台可以看到相应的图片信息：

3.点击图片名称可以查看图片详情，其中图片的下载地址可以用于网页加载显示。

2、小程序云数据库使用

1.打开云开发控制台，进入到数据库管理页；

2.选择添加集合，集合名为counters；

3.可以看到 counters 集合出现在左侧集合列表中（注：集合必须在云开发控制台中创建）；

4.打开miniprogram/pages/databaseGuid/databaseGuid.js文件，定位到onAdd方法，把注释掉的代码解除注释。代码中我们可以看到，默认集合已经为counters。

5.点击【前端操作数据库】选项，点击两次【下一步】按钮，到达步骤3

6.在步骤3页面点击新增记录选项（若新增记录成功，此处会快速闪过提示：“新增记录成功”）；

7.打开云开发控制台，进入数据库页签，选择创建的集合，可以看到新建的数据记录。

3、小程序云函数使用

1.在云函数根目录 cloudfunctions 上右键选择新建 Node.js 云函数，命名为 sum；

2.在创建的 cloudfunctions/sum/index.js 文件中删除并替换原始的 return 脚本，代码参考如下；

  return {
    sum: event.a + event.b
  }

3.在 cloudfunctions/sum 目录上右键选择 上传并部署：云端安装依赖（不上传 node_modules），上传 sum 函数；

4.点击快速新建云函数页签进入详情页；

5.在详情页中点击测试云函数页签；

6.测试云函数的调用结果与期望输出一致，说明编写的云函数可以使用；

任务3 使用小程序云开发改造在线书城项目

【任务目标】

通过小程序云开发，快速导入并实现在线书城项目。

【任务步骤】

1、在线书城项目导入

1.将准备好的项目（online-bookstore-cloud）解压，导入微信开发者工具；

下载online-bookstore-cloud

2.将项目的云开发环境ID修改成你自己申请的；

3.将图书图片信息（位置为：图书相关数据/图书图片）通过云开发控制台上传到腾讯云存储；

下载图书图片信息

4.创建名为 books 的数据库；

5.选择创建好的数据库 books，在右侧的菜单栏选择导入按钮，将准备好的图书信息（在图书相关数据/图书信息.json）导入数据库。

6.导入成功后，将 books 集合内图书信息中所有数据的 image 字段的值进行更新，改成上一步上传到云开发控制台存储中的图片的地址；

存储中的图片的地址查看方式如下：

7.设置云数据库的读写权限，设置为所有用户可读，仅创建者可读写。

8.接下来，可在微信开发者工具体验云开好的微信小程序啦。

至此，您已完成了小程序云开发的全部任务。

5. 注意事项

如实验资源无需保留，请在实验结束后及时销毁，以免产生额外费用。