微信小游戏开发之Cocos Creator使用微信云开发和微信开放能力

主题

Cocos Creator集成微信云开发和调用微信开放能力

特别说明

CocosCreator微信小游戏开发系列文章，是我在逐步开发过程中，基于官方文档之上，记录一些重点内容，以及对官方文档中有些知识点的补充和分析。

正文

上篇讲了如何使用微信云开发作为后台服务，但是它的场景是用于直接在微信开发者工具中创建的项目，而我们的目的是在Cocos Creator项目使用微信云开发，及使用微信生态的开放能力，那么我们该怎么做呢？

Cocos Creator文档中只提到了怎么发布“微信小游戏”，以及如何使用自带的第三方服务，而Cocos Creator自带的TCB云开发服务，因为局限性太大（具体的原因可以看我之前的文章），被我放弃了。

我们先来看看，发布微信小游戏的过程：

1. Cocos Creator项目构建发布微信小游戏

选择“菜单栏->项目—>构建发布”，如下图：

发布配置

各发布配置项的具体含义，可以看这里，我只说一下常用的几项内容：

发布平台：项目要运行的平台，下拉列表中有几大类可以选择“小游戏”、“web”、“Android”、“iOS”、Mac等；
发布路径：项目编译好后的文件存放位置，默认是在根目录的build目录下；
初始场景：即项目运行时，第一个加载的场景
appid：如果发布为微信小游戏，这里就是在微信公众平台创建的小程序的appid；
允许分离引擎：勾选它的目的是为提升小游戏启动速度。引擎分离的好处是，在你手机上已经有其他小游戏已经使用了CocosCreator引擎插件时，我们的小游戏启动时就不会全量的去下载引擎插件了，微信只需要增量更新引擎两个版本的差异部分就可以了。需要特别注意：
- 微信开发者工具中的详情 -> 本地设置 -> 调试基础库需要设置为 2.9.0 或以上版本。
- 微信开发者工具中的详情 -> 本地设置 -> 使用本地的插件选项，用于设置是否禁用引擎插件，通常 无需勾选。（该选项只在微信开发者工具中有效）

发布配置好之后，先“构建”，完成后再点“运行”。如果第一次运行，还需要到编辑器 “菜单栏”—> “偏好设置” ->原生开发环境中设置微信开发者工具路径。或者，直接打开微信开发者工具，选择导入项目，选择项目根目录下的build目录，打开后可以运行起来。

2. 减小的引擎包的大小

选择“菜单栏 -> 项目 -> 项目设置 -> 模块设置”，项目场景中没有使用的组件模块，在项目打包时，可以不编译进引擎包中，因为引擎包的大小也是算在首包包体中，如下图：

模块设置

3. 如何集成微信开发工具的云开发

上面讲了项目发布构建后的目录默认是在项目根目录下的build，在微信工具中运行的也是build目录，按照上一节讲的云开发使用，是基于微信工具的，那么云开发的代码应该在build目录下了，但是build目录的代码和配置会随着每次构建而变化，而云开发的代码和配置也会被覆盖掉，然后要每次都重新配置。如果是这样，肯定不行啊，下面说一种我觉得比较方便的解决方法：

上一章提了微信工具创建的小游戏项目project.config.json文件，增加cloudfunctionRoot字段，用于指定本地已存在的目录作为云开发的本地根目录，那么project.config.json文件肯定也有用于指定本地已存在的目录作为小游戏的本地根目录的字段了。

在project.config.json文件中搜索miniprogramRoot,指定当前项目中的一个目录：

{
  "miniprogramRoot": "wechatgame/"
}

而我们只需要把CocosCreator项目构建的发布路径build修改成微信工具创建项目的根目录，这样CocosCreator项目的代码编译好后，在微信工具项目中云开发的相关配置不会被覆盖掉，而且项目还把cocos项目编译后的代码，作为小游戏代码直接运行了。

当然还有其他的集成方式，比如cocos项目中创建buildTemplate模版目录，也可以集成微信云开发。

4. 调用微信开放能力

要在Cocos项目中使用微信生态能力，比如：分享、云函数调用、用户信息等，代码要怎么实现呢？

第一时间跑去查阅官方文档，可是文档中根本没有类似的说明，没办法只能去Cocos社区搜一下了，找了一圈下来，只找到一些代码片段，用法跟在微信开发工具中使用的方法没有不同啊，都是使用wx.开头，照着写到js脚本中，然后模拟器运行，报错Uncaught ReferenceError: wx is not defined。

其实是我思维被限制住了，要使用微信小程序的api能力，当然需要到微信开发工具下，才能正常使用，所以需要区分运行环境，如下代码：

if (cc.sys.platform === cc.sys.WECHAT_GAME) {
    //微信小游戏环境下才执行
    wx.cloud.callFunction({
        name: 'query',
        data: {},
        success: res => {},
        fail: err => {}
    })
}

比较不友好的是，在VS Code编辑js脚本时，使用微信的api没有智能提示功能。

总结

Cocos Creator项目集成微信云开发，通过将Cocos项目代码构建好后，放到微信工具中带有云开发能力的项目目录下。
Cocos项目调用微信开放能力，和在微信工具创建的项目中用法一致，只是多了一步判断运行环境。

结尾

既然您看到这了，说明文章对你还有吸引力，帮忙点个赞再走吧，谢谢！

关注我的公众号「掉队程序员」，持续输出更多内容！

自己动手写，分解项目中的各个模块需求，通过查文档和搜索Cocos社区，解决碰到的问题，最终在微信上线了下面这款微信小游戏《成语锦衣卫》，欢迎大家扫码体验，并作为参考项目模版，开发出属于自己的小游戏

欢迎大家扫码体验

预告

下一节和朋友们说一说：Cocos Creator不同分辨率的背景图和场景内容适配