如果你想免费、快速的开发出一个完整的项目，用小程序的云开发可能是最好的选择。小程序的云开发所用到的主要是前端开发的知识。
注册微信小程序
小程序的注册非常方便，打开小程序注册页面，按照要求填入个人的信息，验证邮箱和手机号，扫描二维码绑定你的微信号即可，3分钟左右的时间即可搞定。
注册页面：小程序注册页面
注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦，也就是需要你使用一个其他邮箱才行。
当我们注册成功后，就可以自动登入到小程序的后台管理页面啦，如果你不小心关掉了后台页面，也可以点击小程序后台管理登录页进行登录。
后台管理页：小程序后台管理登录页
小程序和微信公众号的登录页都是同一个页面，他们会根据你的不同的注册邮箱来进行跳转。
进入到小程序的后台管理页后，点击左侧菜单的开发进入设置页，然后再点击开发设置，在开发者ID里就可以看到AppID(小程序ID)，这个待会我们有用。
注意小程序的ID（AppID）不是你注册的邮箱和用户名，你需要到后台查看才行哦~
必备工具与云开发文档
大家可以根据自己的电脑操作系统来下载相应的版本，注意要选择稳定版 Stable Build的开发者工具。
开发者工具：小程序开发者工具下载地址
和学习任何编程一样，官方技术文档都是最值得阅读的参考资料。技术文档大家先只需要花五分钟左右的时间了解大致的结构即可，先按照我们的教学步骤学完之后再来看也不迟哦。
技术文档：云开发官方文档
由于小程序的云开发在不断新增功能，更新非常频繁，所以要确保自己的开发者工具是最新的哦（不然会报很多奇奇怪怪的错误），比如你之前下载过要先同步到最新才行~
体验云开发模板小程序
安装完开发者工具之后，我们使用微信扫码登录开发者工具，然后使用开发者工具新建一个小程序的项目：
- 项目名称：这个可以根据自己的需要任意填写；
- 目录：大家可以先在电脑上新建一个空文件夹，然后选择它；
- AppID：就是之前我们找到的AppID(小程序ID)（也可以下拉选择AppID）
- 开发模式为小程序（默认），
- 后端服务选择小程序·云开发
点击新建确认之后就能在开发者工具的模拟器里看到云开发QuickStart小程序，在编辑器里看到这个小程序的源代码。
接下来，我们点击开发者工具的工具栏里的预览图标，就会弹出一个二维码，使用微信扫描这个二维码就能在手机里看到这个小程序啦。
如果你没有使用微信登录开发者工具，以及你的微信不是该小程序的开发者是没法预览的哦。
在手机里（或模拟器）操作这个小程序，把小程序里的每个按键都点一遍，看看会有什么反应。我们会发现很多地方都会显示“调用失败”等，这非常正常，我们接下来会通过一系列的操作让小程序不报错。
开通云开发服务
点击微信开发者工具的“云开发”图标，在弹出框里点击“开通”，同意协议后，会弹出创建环境的对话框。这时会要求你输入环境名称和环境ID，以及当前云开发的基础环境配额（基础配额免费，而且足够你使用哦）。
建议你环境名称可以使用 xly、环境ID自动生成即可，当你的云开发环境出现问题的时候，你可以提供你的环境ID，云开发团队会有专人为你解答。
按照对话框提示的要求填写完之后，点击创建，会初始化环境，环境初始化成功后会自动弹出云开发控制台，这样我们的云开发服务就开通啦。大家可以花两分钟左右的时间熟悉一下云开发控制台的界面。
找到云开发的环境ID
点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境ID。
当云开发服务开通后，我们可以在小程序源代码cloudfunctions文件夹名看到你的环境名称。如果在cloudfunctions文件夹名显示的不是环境名称，而是“未指定环境”，可以鼠标右键该文件夹，选择“更多设置”，然后再点击“设置”小图标，选择环境并确定。
指定小程序的云开发环境
在开发者工具中打开源代码文件夹miniprogram里的app.js，找到如下代码：
在 env: 'my-env-id'处改成你的环境ID，如 env: 'xly-snoop'
下载Nodejs
NodeJS是在服务端运行JavaScript的运行环境，云开发所使用的服务端环境就是NodeJS。npm是Node包管理器，通过npm，我们可以非常方便的安装云开发所需要的依赖包。
npm是前端开发必不可少的包（模块）管理器，它的主要功能就是来管理包package，包括安装、卸载、更新、查看、搜索、发布等，其他编程语言也有类似的包管理器，比如Python的pip，PHP的composer、Java的maven。我们可以把包管理器看成是windows的软件管理中心或手机的应用中心，只是它们用的是可视化界面，包管理器用的是命令行Command Line。
下载地址：Nodejs下载地址
大家可以根据电脑的操作系统下载相应的NodeJS安装包并安装（安装时不要修改安装目录，啥也别管直接next安装即可）。打开电脑终端（Windows电脑为cmd命令提示符，Mac电脑为终端Terminal），然后逐行输入并按Enter执行下面的代码：
如果显示为v10.15.0以及6.11.3（可能你的版本号会有所不同），表示你的Nodejs环境已经安装成功。
学编程要仔细，一个字母，一个单词，一个标点符号都不要出错哦。注意输上面的命令时node、npm的后面有一个空格，而且是两个短横杠–。
部署并上传云函数
部署并上传云函数
cloudfuntions文件夹图标里有朵小云，表示这就是云函数根目录。展开cloudfunctions，我们可以看到里面有login、openapi、callback、echo文件夹，这些就是云函数目录。而miniprogram文件夹则放置的是小程序的页面文件。
cloudfunctions里放的是云函数，miniprogram放的是小程序的页面，这并不是一成不变的，也就是说你也可以修改这些文件夹的名称，这取决于项目配置文件project.config.json里的如下配置项：
但是你最好是让放小程序页面的文件夹以及放云函数的文件夹处于平级关系且都在项目的根目录下，便于管理。
使用鼠标右键其中的一个云函数目录比如login，在右键菜单中选择在终端中打开，打开后在终端中输入以下代码并按Enter回车执行：
如果显示“npm不是内部或外部命令”，你需要关闭微信开发者工具启动的终端，而是重新打开一个终端窗口，并在里面输入 cd /D 你的云函数目录进入云函数目录，比如 cd /D C:\download\tcb-project\cloudfunctions\login进入login的云函数目录，然后再来执行npm install命令。
这时候会下载云函数的依赖模块，下载完成后，再右键login云函数目录，点击“创建并部署：所有文件”，这时会把本地的云函数上传到云端，上传成功后在login云函数目录图标会变成一朵小云。
在开发者工具的工具栏上点击“云开发”图标会打开云开发控制台，在云开发控制台点击云函数图标，就能在云函数列表里看到我们上传好的“login”云函数啦。
上传所有云函数
接下来我们按照这样的流程把其他所有云函数（如openapi）都部署都上传，也就是要执行和上面相同的步骤，总结如下：
- 右键云函数目录，选择在终端中打开，输入 npm install命令下载依赖文件；
- 然后再右键云函数目录，点击“创建并部署：所有文件”
- 在云开发控制台–云函数–云函数列表查看云函数是否部署成功。
login、openapi、echo、callback这些云函数在后面都会用到的哦，一定要确定自己部署上传成功，不然后面会报错的哦。
npm包管理器与依赖模块
为什么要在云函数目录执行npm install，而不是其他地方？这是因为npm install会下载云函数目录下的配置文件package.json里的dependencies，它表示的是当前云函数需要依赖的模块。package.json在哪里，就在哪里执行npm install，没有package.json，没有dependencies，就没法下载啊。
执行npm install命令下载的依赖模块会放在node_modules文件夹里，大家可以在执行了npm install命令之后，在电脑里打开查看一下node_modules文件夹里下载了哪些模块。
既然npm install是下载模块，那它是从哪里下载的呢？就以wx-server-sdk为例，我们可以在以下链接看到wx-server-sdk的情况：
为什么package.json里依赖的是一个模块wx-server-sdk，但是node_modules文件夹里却下载了那么多模块？这是因为wx-server-sdk也依赖三个包tcb-admin-node、protobuf、jstslib，而这三个包又会依赖其他包，子子孙孙的，于是就有了很多模块。
node_modules文件夹这么大（几十M~几百M都可能），会不会影响小程序的大小？小程序的大小只与miniprogram文件夹有关，当你把云函数都部署上传到服务器之后，你把整个cloudfuntions文件夹删掉都没有关系。相同的依赖（比如都依赖wx-server-sdk）一旦部署到云函数之后，你可以选择不上传node_modules时，因为已经上传过了。
获取openid与云函数login
当我们把云函数login部署上传成功后，就可以在模拟器以及手机（需要重新点击预览图标并扫描二维码）里点击获取openid了。
点击获取openid
openid是小程序用户的唯一标识，也就是每一个小程序用户都有一个唯一的openid。点击“点击获取openid”，在用户管理指引页面如果显示“用户id获取成功”以及一串字母+数字，那么表示你login云函数部署并上传成功啦。如果获取openid失败，你则需要解决login云函数的部署上传，才能进行下面的步骤哦。
调用云函数的解读
小程序的首页是”pages/index/index”，我们可以从app.json的配置项或者模拟器左下角的页面路径可以看出来。在index.wxml里有这段代码：
也就是当点击“点击获取openid”按钮时，会触发bindtap绑定的事件处理函数onGetOpenid，在index.js里可以看到onGetOpenid事件处理函数（在index.js里找到事件处理函数onGetOpenid对比理解）调用了wx.cloud.callFunction()接口（打开技术文档对比理解）
技术文档：调用云函数wx.cloud.callFunction
调用云函数的方法很简单，只需要填写云函数的名称name（这里为login），以及需要传递的参数（这里并没有上传参数），就可以进行调用。在success回调函数里添加以下代码打印res对象：
添加完成之后记得保存代码哦，文件修改没有保存会在标签页有一个小的绿点。可以使用快捷键（同时按）Ctrl和S来保存（Mac电脑为Command和S）。
编译之后，再点击“点击获取openid”按钮，就能看到完整的res对象，res对象有三个参数：
- requestID：云函数执行 ID，可用于在云开发控制台查找日志，打开云开发控制台–云函数–日志，可以在这里根据云函数函数名以及requestID来筛选查看云函数的调用日志（含返回结果）；
- result：云函数返回的结果，login云函数返回的结果里包含appid、event对象，我们可以通过res.result.appid以及res.result.event访问它们；
- errMsg：显示云函数是否调用成功
事件处理函数onGetOpenid调用云函数成功之后，干了三件事情：
- 使用console.log打印openid，可以在点击按钮触发云函数在控制台看到该打印结果；
- 把获取到的appid赋值给app.js文件里的globalData全局对象；
- 跳转到userConsole页面；
而userConsole页面就只是从globalData里将openid取出来通过setData渲染到页面。
小任务：你明白为啥wx.cloud.callFunction()是小程序端的API了么？思考一下为啥云开发会有小程序端的API和服务端API的区别？能理解多少是多少，不清楚也没有关系，后面会有更多内容助你理解。
云函数login解读
为什么调用云函数login返回的res的result对象里会包含event对象、appid、userInfo这些结果？这就取决于云函数是怎么写的了。使用开发者工具打开login云函数（在cloudfuntions文件夹里）的index.js。
这是一个箭头函数的写法，其中event和context是参数。我们将两个打印日志修改为以下代码，相当于备注一下到底打印到哪里去了：
保存之后，右键点击index.js文件，选择云函数增量上传:（更新文件），更新login云函数，我们再来点击“点击获取openid”按钮，打印的结果在哪里呢？在云开发控制台的云函数日志里面（注意不是开发者工具的控制台）。打开云开发控制台–云函数–日志，按函数名筛选，选择login云函数，可以看到云函数被调用的日志记录，我们可以在日志里发现：
- event对象包含程序用户的 openid 和小程序的 appid，而openid就相当于用户的身份证，我们可以根据openid获取到用户的昵称、头像等信息（后面会说明）；
- 而context对象则是云函数的调用信息和运行状态。
- 在返回结果里我们可以看到return返回的数据
小任务：比较一下云开发控制台的云函数日志打印的结果和开发者工具控制台打印的结果，深入了解event对象、context对象、result对象与返回结果，这是云函数的比较重要的知识点。
云函数的打印日志会显示在云开发控制台的日志里面，这一点非常重要，要多加利用。只要是打印日志，无论是显示在开发者工具控制台还是显示在云开发控制台的就没有不重要的。
getWXContext()API是云开发服务端的工具类API，会返回小程序用户的openid、小程序appid、小程序用户的unionid等。说这么多不如直接打印，在下面添加一行打印信息：
保存之后，右键点击index.js文件，选择云函数增量上传:（更新文件），更新login云函数，我们再来点击“点击获取openid”按钮，然后去云开发控制台的云函数日志里看到底返回了什么结果。
技术文档：getWXContext()
对照技术文档来理解返回的结果。
注意小程序用户 unionid只有在开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用才能获得。
return
return语句是终止函数的执行，并返回一个指定的值给函数调用者。这里返回了4个值，而前面我们就调用过login云函数，就是函数的调用者，所以我们打印的事件处理函数onGetOpenid的回调函数的res对象正是这个return返回的结果。那既然如此，我们在return多加一些内容看看，比如我们之前的一些数据结构案例，将return函数改为如下代码：
保存之后，右键点击index.js文件，选择云函数增量上传:（更新文件），更新login云函数，我们再来点击“点击获取openid”按钮，然后去云开发控制台的云函数日志里看到底返回了什么结果。
这里我们多次反复提及更新了index.js文件之后就要选择云函数增量上传:（更新文件），更新login云函数，希望大家平时的时候注意，这也是小程序云开发服务端和小程序端一个非常大的区别。
新建云函数
鼠标右键cloudfunctions云函数根目录，在弹出的窗口选择新建Node.js云函数，比如输入sum，按Enter确认后，微信开发者工具会在本地（你的电脑）创建出sum云函数目录，同时也会在线上环境中创建出对应的云函数（也就是自动部署好了，可以到云开发控制台云函数列表里看到）
打开sum云函数目录下的index.js，添加 sum:event.a+event.b,到return函数里（把多余的内容可以删掉了），然后记得选择云函数增量上传:（更新文件），更新sum云函数。
这个a和b是变量，但是和前面不一样的是，在服务端我们并没有声明a和b啊，这是因为我们可以在小程序端声明变量。
点击开发者工具模拟器的“快速新建云函数”，会跳转到addFunction页面，打开addFunction.wxml，我们看到测试云函数绑定的是testFunction事件处理函数。
我们去看addFunction.js里的testFunction，看变量a和b这两个小程序端的变量是怎么和服务端的变量关联起来的，而又是如何把结果渲染到页面的。testFunction调用云函数sum同样是通过wx.cloud.callFunction，不同的是在data里有a和b：
data里填写的是传递给云函数的参数，也就是先把小程序端的参数传递给云函数，然后云函数处理之后再返回res对象，我们可以在success回调函数里打印res对象：
编译之后，我们再点击测试云函数，在控制台就能看到打印的结果，res.result.sum就是3。直接把res.result.sum通过setData赋值到result就能渲染出数字，那这个res.result是什么？JSON.stringify()又是什么？
我们可以打印一下res.result，以及JSON.stringify(res.result)
res.result是对象，而JSON.stringify(res.result)是json格式， JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，因为对象如果直接渲染到页面是会显示 [object Object]的。
小任务：将小程序的参数传递给云端，有没有一点wx.request的感觉？相当于我们通过云函数写好了一个数据API，然后在小程序端调用。新建一个云函数，把各种数学运算都部署到云端，然后通过传递参数，调用这些算法，并将结果渲染到页面。
体验上传图片
上传图片到云存储
使用模拟器以及手机端点击云开发QuickStart小程序的上传图片按钮，选择一张图片并打开，如果在文件存储指引页面显示上传成功和文件的路径以及图片的缩略图，说明你的图片就上传到云开发服务器里啦。
点击云开发控制台的存储图标，就可以进入到存储管理页查看到你之前上传的图片啦，点击该图片名称可以看到这张图片的一些信息，如：文件大小、格式、上传者的OpenID以及存储位置、下载地址和File ID。复制下载地址链接，在浏览器就能查看到这张图片啦。
值得注意的是由于QuickStart小程序将“上传图片”这个按钮上传的所有图片都命名为my-image，所以上传同一格式的图片就会被覆盖掉，也就是无论你上传多少张相同格式的图片，只会在后台里看到最后更新的那张图片。以后我们会教大家怎么修改代码，让图片不会被覆盖。
组件支持
我们可以把下载地址作为图床来使用的，也就是你可以把图片的下载地址放到其他网页图片是可以显示的。云存储的图片还有一个FileID（既云文件ID，以cloud://开头）则只能用于小程序的特定场景，也只有部分组件的部分属性支持，把链接粘贴到浏览器也是打不开的。
技术文档：组件支持
比如我们在index页面的index.wxml里输入以下代码，在image组件的src属性里输入你的云存储图片的FileID，它是可以显示出来的。
但是如果你退出登录开发者工具，图片就不会显示，而且还会报错，所以不要把图片的FileID当做图床用，FileID另有它用。
体验云调用之服务端调用
重新点击开发者工具的预览图标，然后用手机扫描二维码，在手机端点击云开发QuickStart的云调用里的服务端调用，就可以发送模板消息和获取小程序码。
点击获取小程序码，如果显示调用失败，说明你的openapi云函数没有部署成功，需要你先部署成功才行哦。调用成功，就能获取到你的小程序码啦，这个小程序码也会保存到云开发的存储里。
发送模板消息，只能在手机微信里预览测试哦，使用微信开发者工具是发送不了模板消息，而且控制台还会报错
点击发送模板消息，你的微信就会收到一则服务通知，该通知是由你的小程序发出的购买成功通知。这就是微信的模板消息啦，很多微信公众号、小程序都会有这样的功能，使用小程序云开发，我们也可以轻松定制自己的服务通知（后面会教大家如何定制）。
体验前端操作数据库
点击微信开发者工具的云开发图标，打开云开发控制台，点击数据库图标进入到数据库管理页，点击集合名称右侧的+号图标，就可以创建一个数据集合了，这里我们只需要添加一个counters的集合（不需添加数据）即可。
在开发者工具的编辑器里展开miniprogram文件夹，打开pages文件下databaseGuide里的databaseGuide.js文件，在这里找到 onAdd: function (){}、 onQuery: function (){}、 onCounterInc: function (){}、 onCounterDec: function (){}、 onRemove: function (){}分别选中绿色的代码块，然后同时按快捷键Ctrl和/（Mac电脑的快捷键为Command和/），就可以批量取消代码的注释。
//是前端编程语言JavaScript的单行注释，位于 // 这一行的代码都不会执行，我们使用快捷键就是批量取消这些代码的注释，让整段代码生效。之所以显示为绿色，是微信开发者工具为了让我们看得更清晰而做的语法高亮。
以上的函数是在小程序的前端页面来操作数据库，点击开发者工具模拟器云开发QuickStart里的前端操作数据库，
- 在第1步（数据库指引有标注），我们会获取到用户的openid，也就是说你没有获取到openid是没法通过小程序的前端来操作数据库的哦
- 第2步，需要我们在云开发控制台里的数据库管理页创建一个counters的集合（不需添加数据）；
- 第3步，点击按钮页面的按钮“新增记录”（按钮就在这个页面的第4条与第5条之间，看起来不是那么明显），这时会调用 onAdd方法，往counters集合新增一个记录（之前手动添加有木有很辛苦？），我们可以去云开发控制台的数据库管理页查看一下counters集合是不是有了一条记录；大家可以多点击几下新增记录按钮，然后去云开发控制台看数据库又有什么变化。也就是小程序前端页面通过 onAdd方法，在数据库新增了记录。
- 第4步，点击按钮查询记录，这时调用的是 onQuery方法就能在小程序里获取到第3步我们存储到数据库里的数据啦
- 第5步，点击计数器按钮+号和-号，可以更新count的值，点击+号按钮会调用 onCounterInc方法，而点击-号 onCounterDec方法，比如我们点击加号到7，再去数据库管理页查看最新的一条记录（也就是最后一条），它的count由原来的1更新到了7（先点刷新按钮），我们再点击-号按钮到5，再来数据库管理页查看有什么变化变化（先点刷新按钮）
- 第6步，点击删除记录按钮，会调用 onRemove方法，这时会删掉数据库里最新的记录（也就是第5步里的那一条记录）。
通过实战我们了解到，databaseGuide.js文件里的 onAdd、 onQuery、 onCounterInc、 onCounterDec、 onRemove可以实现小程序的前端页面来操作数据库。
这些函数大家可以结合databaseGuide.js文件和云开发技术文档关于数据库的内容来理解。（关于前端是如何操作数据库的，我们之后还会深入讲解，这里只需要了解大致的逻辑即可）
在前面JavaScript的章节里我们了解到数据以及数据的存储是非常重要的，而有了数据库，用函数生成的数据能够比缓存存储的更加持久，而且在上面我们实现了对数据进行增(添加)、删(删除)、改(修改、更新)、查(查询并渲染到页面)，不仅如此，缓存的容量也比较有限，最多不过10M，而数据库可以存几百G以上，可见它的重要性。
开始一个新的云开发项目
基于云开发QuickStart模板小程序
云开发QuickStart模板小程序有很多多余的页面，这个我们只需要把miniprogram文件夹下的pages、images、components、style文件夹里的文件清空，以及app.json的pages配置项里的页面删除，把app.wxss里的样式代码都删掉就是一个全新的开始啦。这是方法之一，也可以使用下面的方法（推荐学习时使用下面的方法）。
基于没有使用云开发的项目改造
当然我们也可以把前面章节没有使用云开发的项目改造成使用云服务，首先在小程序的根目录下新建一个文件夹，比如cloudfunctions，然后在project.config.json添加云函数文件夹的路径配置即可，
然后新建一个miniprogram文件夹，把小程序除了project.config.json以外的其他文件，比如pages、utils、images、app.js、app.json等文件都放到miniprogram文件夹里，再在project.config.json添加miniprogramRoot配置:
值得一提的是，云函数部署上传成功，我们就可以一直调用，只要你的小程序的appid以及环境ID没有变，你创建再多的小程序项目，都可以直接调用部署好的云函数，比如前面的login、echo、callback、sum等云函数。也就是说云函数一旦部署成功，它就一直在云端服务器里，哪怕你把小程序本地的云函数都删掉也没有关系。
当新建了并配置了云函数根目录为cloudfunctions文件夹之后，云函数根目录里并没有云函数，我们可以右键点击云函数根目录cloudfunctions文件夹选择同步云函数列表，可以把所有云端的云函数列表都列举出来（这只是列举了列表），而要修改云函数里面的内容，我们可以右键点击其中的一个云函数目录选择下载云函数即可。
除此之外，我们需要小程序的app.js的生命周期函数onLaunch里使用wx.cloud.init()来初始化云开发能力：
云开发能力全局只需要初始化一次即可，这里的traceUser属性设置为true，会将用户访问记录到用户管理中，在云开发控制台的运营分析—用户访问里可以看到访问记录。
基础库与wx.cloud
在小程序端初始化云开发能力的代码里，涉及到wx.cloud以及基础库版本的知识。关于wx.cloud，我们可以和之前在控制台了解wx对象一样，直接在开发者工具的控制台里输入：
来了解对象有哪些属性与方法。我们可以看到有如下方法：
而关于基础库，有三个地方需要注意它的存在，平时开发的时候需要留意
- 开发者工具的project.config.json里有这样一个属性libVersion，这个也可以在开发者工具工具栏右上角的详情里的本地设置里的调试基础库，建议切换到最新，切换后libVersion的值也会修改到切换的版本；
- 官方文档基础库的更新日志，小程序更新非常频繁，而更新的核心就是基础库：所以基础库更新日志要经常留意
- 每个API，技术文档都会标明它的基础库支持的最低版本，而小程序·云开发 SDK是2.2.3以上的基础库才开始支持的。