微信小游戏开发之使用云开发作为后台服务

主题

结合官方文档,介绍微信云开发的使用,并补充了文档中没有讲清楚的部分

特别说明

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关键字有什么作用呢?

asyncawait关键字在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()是云函数异常的回调结果。

注意: 这里只是简单介绍了asyncawait关键字作用,要想深入了解它们的原理和进阶用法,可以关注我的公众号「掉队程序员」,我会在公众号持续更新这方面内容。

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集成微信云开发和调用微信开放能力

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章