目录
1.5 云开发能力体验
在前面的章节，我们已经创建了一个云开发QuickStart小程序项目，这个项目是云开发默认的Demo小程序，通过这个小程序我们可以来体验云开发的的一些能力，比如云存储、云函数、数据库、云调用等多方面的能力。
1.5.1 体验云存储的能力
1、上传图片到云存储
使用模拟器以及手机端点击云开发QuickStart小程序的上传图片按钮，选择一张图片并打开，如果在文件存储指引页面显示上传成功和文件的路径以及图片的缩略图，说明你的图片就上传到云开发服务器里啦。
点击云开发控制台的存储图标，就可以进入到存储管理页查看到你之前上传的图片啦，点击该图片名称可以看到这张图片的一些信息，如：文件大小、格式、上传者的OpenID以及存储位置、下载地址和File ID。复制下载地址链接，在浏览器就能查看到这张图片啦。
值得注意的是由于QuickStart小程序将“上传图片”这个按钮上传的所有图片都命名为my-image，所以上传同一格式的图片就会被覆盖掉，也就是无论你上传多少张相同格式的图片，只会在后台里看到最后更新的那张图片。以后我们会教大家怎么修改代码，让图片不会被覆盖。
2、安全便捷的fileID
每一个上传到云存储的文件都有一个全网唯一的fileID（也就是云文件ID，以cloud://开头），fileID只能用于小程序的内部，比如将fileID传入到SDK就可以对文件进行下载、删除、获取文件信息等操作，非常方便。
部分小程序组件（如image、video、cover-image等）和接口，支持直接传入云文件的fileID，当然也只有部分组件的部分属性支持，把链接粘贴到浏览器也是打不开的。
比如我们在index页面的index.wxml里输入以下代码，在image组件的src属性里输入你的云存储图片的FileID，它是可以显示出来的。
<image src="你的图片的FileID"></image>
3、https链接与CDN加速
如果我们想在浏览器中可以直接下载云存储里的文件，或将云存储作为图床，可以使用文件的下载地址或使用fileID获取私有权限文件的https临时链接（这个在后面的章节会介绍），也就是我们可以把图片的https链接如下载地址复制粘贴到浏览器，或者放到其他网页，图片是可以显示的。
云存储无需进行繁杂的配置，https链接默认支持CDN加速，并提供免费的CDN域名。CDN会将云存储的内容分发至最接近用户的节点，直接由服务节点快速响应，可以有效降低用户访问延迟。
4、云存储与openid
在云开发控制台的存储里，我们可以看到每张图片的详细信息都有上传者 Open ID，无论你是使用开发者工具在模拟器的小程序里上传还是预览在手机的小程序里上传，只要你用的是同一个微信账号，这个上传者openid都是一致的，云存储会自动记录上传者的openid。
要注意的是，如果你不经过小程序端，直接使用云开发控制台的云存储管理界面上传文件，是没有openid的，这是小程序端与管理端（控制台、云函数）的区别。
1.5.2 体验云函数的调用
1、获取用户的openid
当我们把云函数login部署上传成功后，就可以在模拟器以及手机（需要重新点击预览图标并扫描二维码）里点击获取openid了。
1、点击获取openid
openid是小程序用户的唯一标识，也就是每一个小程序用户都有一个唯一的openid。点击“点击获取openid”，在用户管理指引页面如果显示“用户id获取成功”以及一串字母+数字，那么表示你login云函数部署并上传成功啦。如果获取openid失败，你则需要解决login云函数的部署上传，才能进行下面的步骤哦。
2、调用云函数的解读
小程序的首页是”pages/index/index”，我们可以从app.json的配置项或者模拟器左下角的页面路径可以看出来。在index.wxml里有这段代码：
<button class="userinfo-nickname" bindtap="onGetOpenid">点击获取openid</button>
也就是当点击“点击获取openid”按钮时，会触发bindtap绑定的事件处理函数onGetOpenid，在index.js里可以看到onGetOpenid事件处理函数（在index.js里找到事件处理函数onGetOpenid对比理解）调用了wx.cloud.callFunction()接口（在技术文档搜索找到这个接口对比理解），如下所示：
onGetOpenid: function() {
// 调用云函数
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
调用云函数的方法很简单，只需要填写云函数的名称name（这里为login），以及需要传递的参数（这里并没有上传参数），就可以进行调用。事件处理函数onGetOpenid调用云函数成功之后，干了三件事情：
- 使用console.log打印openid，可以在点击按钮触发云函数在开发者工具调试器的console控制台看到该打印结果；
- 把获取到的appid赋值给app.js文件里的globalData全局对象；
- 跳转到userConsole页面；
而userConsole页面就只是从globalData里将openid取出来通过setData渲染到页面。代码的具体含义，在后面的章节我们也会一一讲解。
3、云函数与openid
当我们在小程序端调用login云函数的时候，就能返回用户的openid，这个openid的值和我们之前在云存储看到的也是一样的。那云函数是通过什么方法获取到这个值的呢？我们可以打开login云函数下面的index.js文件，看到有类似下面的代码：
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID,
}
它使用到了Cloud.getWXContext()的接口，用来获取小程序端调用云函数的上下文context，也就是说只有用户在小程序端调用这个接口，才会返回相应用户的openid。
1.5.3 体验前端操作数据库
1、创建集合并修改权限
点击微信开发者工具的云开发图标，打开云开发控制台，点击数据库图标进入到数据库管理页，点击集合名称右侧的+号图标，就可以创建一个数据集合了，这里我们只需要添加一个counters的集合（不需添加数据）。
同时建议修改一下counters集合的权限，使用控制台创建的集合默认的权限为“仅创建者可读写”，在学习时可能会出现一些新手不太容易理解的问题，可以暂时修改为“所有用户可读，仅创建者可读写”，具体含义后面的章节会有详细介绍。
2、取消注释代码
在开发者工具的编辑器里展开miniprogram文件夹，打开pages文件下databaseGuide里的databaseGuide.js文件，在这里找到onAdd: function (){}、 onQuery: function (){}、 onCounterInc: function (){}、 onCounterDec: function (){}、 onRemove: function (){}分别选中绿色的代码块，然后同时按快捷键Ctrl和/（Mac电脑的快捷键为Command和/），就可以批量取消代码的注释。
//是前端编程语言JavaScript的单行注释，位于//这一行的代码都不会执行，我们使用快捷键就是批量取消这些代码的注释，让整段代码生效。之所以显示为绿色，是微信开发者工具为了让我们看得更清晰而做的语法高亮。
2、前端操作数据库的页面逻辑
以上的函数是在小程序的前端页面来操作数据库，点击开发者工具模拟器云开发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文件和云开发技术文档关于数据库的内容来理解。（关于前端是如何操作数据库的，我们之后还会深入讲解，这里只需要了解大致的逻辑即可）
3、云数据库与openid
在云开发控制台的数据库标签里，留意一下通过点击小程序端新增记录的按钮在counters集合里创建的记录，在这个集合里我们可以看到每条记录除了有_id字段以外，还有一个_openid字段，这个字段就存储着小程序用户的openid，用来标志每条记录的创建者（也就是小程序的用户）。
我们可以自定义 _id（也就是给数据添加一个_id字段并填入任意值），但不可自定义和修改 _openid。 _openid是在文档创建时由系统根据小程序用户默认创建的，可以用来标识和定位文档。和云存储一样，数据库的记录也和openid有着紧密的联系。
4、openid与云开发
总结一下，用户在小程序里有着独一无二的openid，相同的用户在不同的小程序openid也不同，因此我们完全可以用openid来区分用户，而且openid贯穿于小程序端、云存储、云函数、数据库等之中：
- 使用云开发时，用户在小程序端上传文件到云存储，这个openid会被记录在文件信息里；
- 添加数据到数据库这个openid会被保存在
_openid的字段里； - 我们还可以使用云函数的
Cloud.getWXContext()来获取用户的openid；
1.5.4 用户信息与登录
在小程序端，我们无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态openid，openid贯穿于小程序端、云存储、云函数、数据库等之中，这也就让小程序云开发在处理用户登录以及用户操作云开发资源相比传统方式要方便很多。
1、获取用户信息
在云开发QuickStart小程序有一个获取用户信息（如头像）的功能，点击该按钮会首先弹出授权弹窗，是否允许小程序获取你的公开信息（昵称、头像、地区及性别），确认允许之后，你的头像就显示在小程序上了。
这个功能实现的源代码大致来自两个部分，一个是index.wxml里的button组件，以及与button组件绑定的事件处理函数onGetUserInfo和调用了wx.getUserInfo这个API。
//下面的代码在index.wxml里可以找到
<button
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo"
class="userinfo-avatar"
style="background-image: url({
{avatarUrl}})"
size="default"
></button>
//下面的事件处理函数在index.js里可以找到
onLoad: function() {
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
onGetUserInfo: function(e) {
if (!this.data.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
使用onGetUserInfo来获取用户信息的作用和 wx.getUserInfo API基本效果是一样的，区别在于wx.getUserInfo 这种方式最好是在用户允许获取公开信息（也就是res.authSetting[‘scope.userInfo’]的值为true）之后再调用，如果用户拒绝了授权就不会再有弹窗（除非用户删掉了你的小程序再使用），调用就会失败，而使用组件的方式是用户主动点击，用户即使拒绝了，再点击仍会弹出授权弹窗。所以推荐先使用组件来获取用户授权，然后再来使用wx.getUserInfo来获取用户信息。
2、openid、用户信息与登录
就代码而言，上面的案例你可以不必懂，只需要明白获取用户信息与登录是有很大的区别的。也就是说尽管我们已经获取到了用户的头像、昵称等信息，但是这不能称之为真正意义的登录，因为用户的昵称、头像、性别、地区这些信息都不是用户唯一的凭证，而且用户可以随意修改。
上面的案例也仅仅只是获取了用户信息的授权，以及获取了用户信息并显示在小程序上，并没有将用户的信息存储到数据库、也没有将用户的头像存储到云存储，因此当我们点击开发者工具“清除缓存”的按钮，将所有信息清除之后，小程序就无法识别这个用户了。
只有获取到了用户身份的唯一ID也就是openid，我们才能把用户行为比如点赞、评论、发布文章、收藏等与用户挂钩，用户这些行为都与数据库有关，而能够确定点赞、评论、文章、收藏这些数据与用户关系的就是openid，也就是说只要获取到了openid就意味着用户已经登录，而获取用户信息（如头像、昵称）不过是一个附加服务，这两个是可以完全独立的。没有openid，我们也无法把用户信息给存储到数据库，也就没法让用户自定义用户信息。无论是用户行为，还是用户的信息，openid都是一个重要的桥梁。
值得一提的是，获取用户信息和显示用户信息也是两个不同的概念，小程序的open-data就可以用于展示微信用户的信息，比如我们可以直接在miniprogram目录index文件夹下的index.wxml文件里添加如下代码：
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
<open-data type="userCity" lang="zh_CN"></open-data>
<open-data type="userProvince" lang="zh_CN"></open-data>
<open-data type="userCountry" lang="zh_CN"></open-data>
在无需用户授权的情况下，open-data组件可以直接将用户的信息显示在小程序上，但是小程序的开发者却并不能获取到用户的信息，open-data只能用于显示用户信息。显示用户信息、获取用户信息以及获取用户的openid这三者是不同的概念，所以不要弄混哦。
关于云调用的体验，可以按照QuickStart给的案例说明按照步骤体验就可以了，这里就不多做介绍了，在后面的学习中，我们都会一一实现。