我的知识记录分享

1.5 云开发能力体验

2020-9-24 糖果小宝 小程序学习

在前面的章节，我们已经创建了一个云开发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()接口（在技术文档搜索找到这个接口对比理解），如下所示：

function() 

调用云函数的方法很简单，只需要填写云函数的名称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有着紧密的联系。

1.5.4 openid与云开发

总结一下，用户在小程序里有着独一无二的openid，相同的用户在不同的小程序openid也不同，因此我们完全可以用openid来区分用户，而且openid贯穿于小程序端、云存储、云函数、数据库等之中：

• 使用云开发时，用户在小程序端上传文件到云存储，这个openid会被记录在文件信息里；
• 添加数据到数据库这个openid会被保存在_openid的字段里；
• 我们还可以使用云函数的Cloud.getWXContext()来获取用户的openid；

关于云调用的体验，可以按照QuickStart给的案例说明按照步骤体验就可以了，这里就不多做介绍了，在后面的学习中，我们都会一一实现。