微信小程序云开发流程微信小程序云开发的像素级的步骤拆解，从0到1的教会你怎么用云函数开发项目，让你一个人就能实现前后端的

今天回顾了一下云开发的一些流程，将整个微信小程序云开发的步骤做一个记录。我将以下面这个简单的例子进行演示：

如上图所示。

1、点击「我的」的tab，点击获取头像昵称，进行登录，并且将我的userInfo和openid缓存到localStorage中，实现只需要登录一次的目的。
2、点击「首页」的tab，点击「+1」按钮，就会往云数据库存储一条分数为1的记录，openid是我自己的日志；点击「-1」按钮，就会往云数据库存储一条分数-1的记录。
3、点击「数据」的tab，就会把openid为我自己的数据全部查询并展示出来。

为了方便大家的理解，我将从5个部分来对整个流程做一个记录：

什么是云开发
初始化云开发
登录功能(云函数的创建)
创建记录(云数据的插入)
查询记录(云数据的查询)

什么是云开发

相当于微信官方给我们免费的搭建一台适配于小程序的服务器，所有相关的环境都预装好了。我们只需要在上面写一些函数，用于对数据做一些增删改查的操作，非常方便。

这样，就可以实现一个前端把整个前后端的事情都完成了，大大提高了人效。

初始化云开发准备工作

我们按照官方文档的顺序一步一步来操作。

进入微信小程序开发文档，进入快速开始模块，按照指示的顺序，做好开发前的准备工作。

1、进入到微信小程序后台，复制AppId。

2、创建项目，将上面复制的AppId粘贴到自己新增的项目中。这里注意一定要选择「不使用云服务」。如果选择了「使用云服务」的话，会自动产生很多无用的文件，重新删除比较麻烦。而刚开始勾选「不使用云服务」，会初始化一个比较简单的项目，后面需要使用云函数的时候再新增目录即可。

生成的初始化项目如下：

3、开通云开发的环境。点击下面的云开发，

新建环境生成一个唯一的id,选择自己喜欢的名字即可，点击保存。

最后生成的云开发后台大致是这样的：

4、创建云函数

在pages同级下面，创建一个叫做cloudFuncs的文件夹，作为存储云函数的空间。然后进入「project.config.json」文件中，配置"cloudfunctionRoot": "cloudFuncs/",保存文件。这样，我们就把云函数的配置空间做好了。

登录功能(云函数的创建)

1、登录页面要实现的功能：当没有登录的时候，展示的是「获取头像昵称」的按钮；等登录了之后，就展示自己的昵称头像和openid，代码如下：

2、js的逻辑梳理：我们可以在data中定义userInfo和openid的字段，通过getUserInfo方法获取userInfo信息，通过定义云函数「login」方法获取到openid，并且把userInfo和openid都存储到storage中。

我们在云函数中定义login方法，并且「上传并部署：云端安装依赖」，并到云开发的工具中查找云函数是否顺利的上传成功。

接下来就是在「我的页面」中调用云函数。

这样获取openid的云函数「login」就能正常的使用了，好棒。

创建记录(云数据的插入)

回到上面的目标。

在首页要实现点击「+1」按钮，就会往云数据库存储一条分数为1，openid是我自己的日志；点击「-1」按钮，就会往云数据库存储一条分数-1的日志。

1、首先进入到「云开发」的「数据库」中，创建一个logs的表，点击保存。

2、然后定义一个「createLogs」的云函数，并且上传并部署。用于将数据存储到logs表中，需要注意的是：我之前写习惯了mongoose的写法，很容易就写成了collections，而小程序中的云数据库用的是collection，这个一定要注意。一些api的具体使用，我就不在这里详细的解释了，到小程序的官方文档中查一下就好了，我直接把代码贴出来。

对了，这里的「cloud.init()」一定要写在「const db = cloud.database()」之前。刚开始因为我的编程习惯问题，想把所有的const都写在一起，但小程序编译之后就报错了，百度查了一下解释说：要等云环境初始化成功后再能获取database，那就按照官方的规矩来吧。