主题
结合官方文档,介绍微信云开发的使用,并补充了文档中没有讲清楚的部分
特别说明
CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的补充和分析。
正文
1. 在微信开发者工具中创建并配置云开发项目
先在微信开发者工具中创建一个小游戏项目,如下图:
图中的AppID,如果还没有注册的,需要先到微信公众平台注册一个小程序,因为使用测试号生成的AppID,无法看到图中的“后端服务->小程序-云开发”选项。
项目创建好并打开项目后如上图所示,看到 cloudfunction 目录提示“未选择环境”,是因为你还没开通云开发,点击上图红色框中的“云开发”,会弹出“云开发控制台”,直接选择“开通”。如果开通了还是没有绑定环境,可以关闭再重新打开项目。
开通后,会弹出协议弹窗(有兴趣的可以点进去看看),直接“同意”,需要填写创建新环境需要的名称和付费套餐,付费套餐都有免费额度,未超过免费额度不收费,所以我直接选择的个人预付费,套餐计费详情可以点这里,如下图:
根据个人情况选择套餐就好了,提交订单,然后耐心等待环境初始化。
云开发控制台是管理云开发资源的地方,控制台提供以下能力:
- 运营分析:查看云开发监控、配额使用量、用户访问情况
- 数据库:管理数据库,可查看、增加、更新、查找、删除数据、管理索引、管理数据库访问权限等
- 存储管理:查看和管理存储空间
- 云函数:查看云函数列表、配置、日志
2. 云函数介绍
云开发环境创建好以后,可以先关掉控制台了,回到游戏项目里环境会自动绑定环境好(如果还是没有绑定环境,可以关闭再重新打开项目),环境绑定好后,就可以开始尝试编写云函数了。
云函数即在云端(服务器端)运行的函数。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用。云函数之间也可互相调用,叫做云调用。
云函数的写法与一个在本地定义的JavaScript
方法无异,代码运行在云端Node.js
中。当云函数被小程序端调用时,定义的代码会被放在Node.js
运行环境中执行。
我们可以像在Node.js
环境中使用JavaScript
一样,在云函数中进行网络请求等操作,还可以通过云函数后端 SDK 搭配使用多种服务,比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作,这部分可参考数据库和存储后端 API 文档。
云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者可以直接使用该 openid,有了openid相当于拿到了用户的唯一uid,其他的数据都通过uid来关联。
其实在项目创建时,开发者工具已经自动为我们准备好了两个云函数模版login和uploadScore,分别介绍获取openid和小程序上传数据到云数据库中,我们可以结合官方文档来掌握他们的写法。
3. 云函数创建和编写
接下来,在项目根目录找到project.config.json
文件,搜索cloudfunctionRoot
字段,如果没有新增cloudfunctionRoot
字段,它的作用是指定本地已存在的目录作为云开发的本地根目录,示例:
{
"cloudfunctionRoot": "cloudfunction/"
}
选中 cloudfunction 目录,鼠标右键唤出菜单,包含以下选项:
- 查看当前环境
- 新建 Node.js 云函数
- 同步云函数列表
- 开启云函数本地调试
1. 创建一个云函数
选择“新建Node.js云函数”,然后输入云函数的名称,比如query,确定后本地会创建如下图的“目录结构和文件”,同时会自动上传云函数到线上环境中:
cloudfunction
|-- query (以云函数名字命名的目录,存放该云函数的所有代码)
|-- config.json (配置文件)
|-- index.js (云函数入口文件)
|-- package.json (npm包定义文件)
|-- ... (自定义文件)
config.json
:目前知道的可配置内容是定时触发器和云调用权限(可以点击参考对应的官方文档)。
index.js
:云函数被调用时实际执行的入口函数是index.js
中导出的main
方法
package.json
:默认定义了最新wx-server-sdk
依赖,将云函数用到的依赖放到文件中,部署和本地调试时工具会执行npm install
来看下index.js
的代码:
// 云函数模板
const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init({
// API 调用都保持和云函数当前所在环境一致
env: cloud.DYNAMIC_CURRENT_ENV
})
/**
* exports.main即为云函数执行的入口方法
* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
* event 参数包含小程序端调用传入的 data
*/
exports.main = async (event, context) => {
// console.log 的内容可以在云开发云函数调用日志查看
console.log(event)
// 获取 WX Context (微信调用上下文),包括 OPENID、APPID等信息
const wxContext = cloud.getWXContext()
// 可执行其他自定义逻辑
...
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
env: wxContext.ENV,
}
}
一个云函数,可以类比成服务器的一个api接口,但是在自己的服务器api接口中,我们一般需要做token和验签等身份校验的工作,而在云函数中wx-server-sdk
帮我们做了这些工作,通过wxContext.OPENID
能直接拿到唯一标识openid,相当于api接口中的用户uid,我们只需要专注于业务逻辑的实现。
再来看云函数的调用方式:
//Promise风格的调用
wx.cloud.callFunction({
// 云函数名称
name: 'query',
// 传给云函数的参数
data: {
name: 'cloud'
},
})
.then(res => {
console.log(res.result)
})
.catch(console.error)
为什么是这么调用呢?
来看exports.main
方法,函数声明用了async
关键字,方法体执行完后,会返回Promise对象,那async
关键字有什么作用呢?
async
和await
关键字在JavaScript中代表函数的异步执行和同步执行。
什么是async
异步执行呢,举个例子,你在火车站窗口排队买票,售票员给你买票时,发现你没带身份证,所以售票员不能给你买票,要你带着身份证来才给你买。售票员不会因为你没带身份证,而一直等着你拿到身份证,不给其他人买票;实际上你怎么去拿身份证,中间花了多久,售票员不会在意,他只要你拿着身份证就可以找他买票。
这个例子中“去拿身份证”的过程,就是一个async
异步执行过程,它不会影响售票员给其他人买票,等你拿到身份证了,就可以找售票员买票。
我们继续延伸这个例子:在售票员给你买票时,必须要等付完钱,才能出票。你打开手机扫码付钱的过程,是售票员必须要等待的,这个等待过程就是await
同步执行。
async
修饰的函数必须要等到方法体中所有await
声明的函数执行完后,async函数才会得到一个resolve状态的Promise对象。
而如果在执行async
异步函数的过程中,一旦异步函数出现错误,整个async函数就会立即抛出错误,但是如果在async函数中对异步函数通过try/catch
封装,并在catch方法体中返回Promise.reject()
,这样async函数将得到一个reject状态的Promise,有效的避免因为异步函数导致整个async函数的终止,这就推导出了如下的调用链:
wx.cloud.callFunction(...).then(res => {...}).catch(...)
then()
是云函数执行完成的回调结果,catch()
是云函数异常的回调结果。
注意: 这里只是简单介绍了async
和await
关键字作用,要想深入了解它们的原理和进阶用法,可以关注我的公众号「掉队程序员」,我会在公众号持续更新这方面内容。
2. 同步云函数列表
在右键菜单中,选择“同步云函数列表”,可以将线上环境中的云函数列表同步到本地,开发者工具会根据云函数的名字,在本地中创建出对应的云函数目录。
而在一个云函数目录上右键,在菜单中选择"下载",云函数代码会被下载到指定目录(指定到同名的云函数目录下)。
注意: 如果本地已经存在该云函数,则会覆盖本地的代码。
3. 开启云函数本地调试
在微信开发工具中提供了一套与线上环境一致的Node.js
云函数运行环境,让开发者可以在本地对云函数进行调试,等同于预发布测试环境,在本地调试完毕以后在将云函数上传部署。
具体的调试过程,官方文档讲的很清楚,可以看这里。
4. 云函数上传部署
云函数上传部署分为 所有文件 和 云端安装依赖(不上传node_modules)
如果想在云函数中使用自定义的配置文件,比如:配置风控开关,怎么办呢?
在云函数执行过程中,通过__dirname
可获取当前云函数的根目录,而和云函数打包上传的文件(两种上传部署都会将除node_modules目录下的其他文件一起上传),可以通过__dirname
加相对路径引用获取。
这两种上传方式的区别在于:
用到平台相关的Node.js native
依赖,即依赖需要在相应平台下编译(Windows / macOS / Linux ...)的,务必注意:如果使用全量上传而不是云端安装依赖,则需在 Linux 平台(CentOS 7 最佳)下编译后再上传,否则可能出现环境兼容性问题。即涉及到Node.js native
依赖的,最好选择 云端安装依赖(不上传node_modules)。
总结
微信云开发入门很简单,但是想要熟练使用,必须对Node.js语法进一步学习,结合自己小程序的业务需求,不断的去解决问题,就能很快的上手云开发了。
结尾
既然您看到这了,说明文章对你还有吸引力,帮忙点个赞再走吧,谢谢!
关注我的公众号「掉队程序员」,持续输出更多内容!
自己动手写,分解项目中的各个模块需求,通过查文档和搜索Cocos社区,解决碰到的问题,最终在微信上线了下面这款微信小游戏《成语锦衣卫》,欢迎大家扫码体验,并作为参考项目模版,开发出属于自己的小游戏
预告
下一节和朋友们说一说:Cocos Creator集成微信云开发和调用微信开放能力