上一篇介绍mpvue的目录结构以及做了一些前端的基本的开发配置工作。并且在项目中引入了vant WeApp这个UI组件库，至此，项目的前端配置大致完成。本篇主要是了解博客项目的后端服务，也就是微信小程序开放提供的『云开发』功能。

什么是小程序云开发

首先，还是需要你花费几分钟的时间大概的阅读一下微信提供的云开发文档：

传送门：

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html

简单地说，小程序提供的云开发就是一款 serverless 服务，它为开发者提供了「云函数」、「云数据库」和「云文件存储」这些基本功能，并且将这些能力封装成特定的接口，可以按照 wx.cloud.xxx这种方式来进行调用。

使用云开发的优势：

1.简单的微信登录：

小程序的云开发可以自动实现用户登录的校验，所以不需要再次校验用户身份，就可以直接在云函数内使用 wx-server-sdk 提供的getWXContent 方法获取到openid（微信用户身份的唯一标识）。

如果用户授权了小程序获取昵称等信息，这些信息也会自动出现在小程序云开发的管理控制台中的用户登录部分。

2.免费的数据库和存储：

小程序云开发提供了免费 1GB 的数据库存储和免费5GB的文件存储，虽然这个存储量并不是很大，但是对于尝鲜的个人开发者来说，还是绰绰有余。当然，土豪朋友可以忽略，基础版、旗舰版、豪华版总有一款可以满足需求。

3.使用简单：

你只需要了解js和简单的异步的知识(promise)，就可以完成小程序云开发的内容。

至于缺点，就是云开发的业务逻辑都在小程序端完成，所以云开发并不适合应用在有复杂逻辑的大型web管理系统，也不容易脱离小程序的生态系统。

但是，对于一些之前并无后端开发经验的前端开发者来说，无需搭建服务器，免域名备案，免费存储，仅仅是开发一款简单的，轻量级的前后端交互应用，使用云开发还是很香的。

云开发配置

1.开发前的配置：

首先，进行云开发环境初始化，在src/main.js文件中添加如下语句：

raceUser属性为true决定了可以将用户访问记录到用户管理中，并且在控制台中可见。

env属性可以打开云开发控制台面板的设置 -> 环境设置拷贝你的当前环境ID并填入。

这里的资源环境文档中有详细说明，云开发默认提供了两个相互独立的环境，一个环境对应一整套独立的云开发资源，包括数据库、存储空间、云函数等。在实际开发中，建议每一个正式环境搭配一个测试环境。我这里的环境名当初是随便起的，之后才发现名称不能修改。囧......为了不重蹈覆辙，大家起名前最好按照文档的建议分别起名为test（测试环境）和 release（正式环境）好做区分。

2.云开发数据库：

云开发提供了一个 JSON 数据库，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。

如何使用呢，首先打开云开发控制台面板，可以尝试直接在数据库新建一个示例集合并插入几条记录，如下：

3.云函数的配置：

云开发的环境和数据库内容已经准备的差不多，接下来介绍一下云函数的使用。

首先需要配置云函数的根目录，在/static目录下创建文件夹funtions，然后在project.config.json文件下新增字段：

"cloudfunctionRoot": "static/functions/",

这可能在编译后不会生效，保险起见，可以在npm start 后检查dist/project.config.json文件，看一下刚刚的字段是否添加成功，如果没有，请在dist/project.config.json中也添加上述字段。或者删除dist目录重新编译。

在微信开发者工具侧栏目录结构中可以看到我们新建的functions文件夹，这个文件夹就是用来存放和编写本地云函数，右键选择你的开发环境。

选择好环境后我们可以新增一个云函数，需要注意的是，这一步骤必须在微信开发者工具中进行。

打开微信开发者工具。

在编辑器窗口下，右键/static/funtions，选择新建Node云函数。

填写云函数名，如demo。

可能会弹出的窗口，并询问你是否安装wx-server-sdk，点击确定（如果安装没有进行，可以自己手动在命令行中运行npm install）。

完成以上步骤后就可以在index.js中编写云函数了。

简单的增删查改

1.云函数的编写：

云函数的编写可以返回visual studio code中进行，上面新建的云函数如果你仔细观察就可以发现在云函数入口函数那里已经返回了用户的openid、appid这些信息，不过这些暂时不会用到。

接下来演示的仅仅是对我们之前数据库的数据进行简单的查询删除和修改操作，如果想要了解更多操作和用法，可以查阅微信云开发文档。

首先打开statics/functions文件夹下我们创建的demo/index.js文件，先删除云函数入口函数里面的内容。

如下所示，添加云函数代码：

需要注意的是云函数的初始化环境也就是cloud.init里面的env属性是需要在云函数配置内添加的。打开云开发控制面板，点击云函数找到我们之前创建的名称为demo那条云函数，点击右侧配置项添加环境变量：

最后，别忘了在微信开发者工具右键点击你的demo云函数，上传并部署到服务器。

2.前端api的封装：

上面的功课做完就意味着后端的增查删工作已经完成。在进行前端页面的展示之前，需要做一点准备工作，为了更好的管理api，或者说在逻辑页面使用api尽量地简洁美观，这里需要对api的回调做下简单的封装。

在util文件夹下新建api.js文件，添加如下代码：

3.前端页面展示：

接下来就是很熟悉的前端渲染过程了，熟悉vue开发流程的可以很快速编写这套前端的增删查逻辑，过程我这里不再赘述了，直接贴代码：

最终的呈现的页面效果如下：

至此，一套具备简单的增删查前后端交互页面的配置和编写算是基本完成，后续程序的逻辑编写也是在这套模板上进行的扩充设计。接下来这里将会详细的介绍博客小程序的各个业务逻辑的编写。