cocos creator 3.7.x 发布游戏到微信小游戏

cocos creator 自带了构建功能，可以将你的游戏发布到微信平台，总体上是简单易操作，但是如果你想只是点点点就搞定，那就大错特错了！这里面还是有很多问题需要解决，下面就根据我自己用macbook pro下的构建过程来看看吧：

一、软件准备

在正式发布前，必须先安装相关的软件，一是cocos creator，目前已经更新到3.7.1；二是微信开发者工具，通过百度搜索即可下载，目前版本是1.06.2301171 RC，帮助文档地址：https://developers.weixin.qq.com/doc/。

二、创建构建发布

能够构建发布的前提是你的游戏已经可以正常运行，在模拟器中显示正常。点击cocos creator项目->构建发布；

设置相关参数：

后面部分的参数：

点击构建，大约1分钟左右，提示构建成功，那么恭喜完成重要一步。如果有错，可以检查代码和参数设置，重新再试。

三、微信开发者工具测试

为什么不是调试，因为在微信开发者工具中，你的代码已经处于被编译状态，可读性很差，几乎不能用你的源代码分析错误原因，只能根据一些console log来加以判断。

1. 首次进入无法运行

提示openDataContext undefined，屏幕显示也不是预先设置的横屏。打开根目下game.json文件，发现的确为空，将内容修改和屏幕方向做好设置，问题解决，具体代码如下：

{
  "deviceOrientation": "landscape",
  "openDataContext": "openDataContext",
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 500000
  }
}

但是如果你再次构建了项目，进入微信开发者工具，会发现又报错，需要再次修改。这时候可以直接修改微信模版来解决，具体目录在 <你的游戏工程目录>/build-templates/wechatgame/game.json ，文件名还是game.json,按照以上设置，以后再次构建就不会有这个错误提示了。

2. 运行几秒后无法点击

通常情况下，运行一会儿，估计就几秒后，就会发现无法响应屏幕点击事件，你可能会想肯定是我程序出问题了，其实不是，微信开发者工具有设置，如果不是正式登录而是以游客方式进入，就只能正常运行很短时间，这时候需要你正是注册并登陆。

（1）点击微信开发者工具->切换账号->扫二维码。

（2）点击设置->项目设置->基本信息

将AppId复制下来，设置到你的构建参数里面，参见第二节内容。

如果一切顺利，你可以运行程序了，否则只有一步步检查下，是不是其他错误，也有可能是node_modlues引用的问题，如果是请参见我的另一篇专门的博客，这里就不重复介绍了。

3. JSON深拷贝问题

我这里还遇到了JSON拷贝问题，也就是在cocos creator下运行正常，但是在微信开发者工具中发现了一些显示和存储错误，一检查是对常量的使用不规范。不同的typescript版本和环境下可能导致错误，如定义一个常量:

export const test: {} = {
    "data": []
};

然后为两个变量赋值，如： a = test; b= test; a和b在不同位置作了push等操作，发现最终是对同一个变量操作了，整个代码逻辑完全混乱！解决办法很简单，用好JSON.stringify即可：

a =  JSON.parse(JSON.stringify(test));

这样就彻底解决这个问题了。

四、打包微信真机程序

前提是你已经完成前面的步骤，保证微信小游戏能在开发者工具中运行。点击工具->真机调试，工具会自动编译上传，形成二维码，扫描二维码即可真机运行。但是可没有这么容易，肯定会报错，微信当前版本只能支持4m的主包和20m的总包。游戏程序哪有不超过这个数的，因此必须想尽办法减少包体大小。

1. 总体思路

是把主包缩小到4m以内，其他资源远程访问。

2. 构建参数修改

为实现这一目标，首先对构建发布的参数，做一设置：

（1）设置资源服务器地址。自己搭建，网上购买，微信购买都可以，目的就一个能够让你的程序访问得到就可以；

（2）设置md5缓存。

（3）设置AppId。将项目设置中获取的AppId填写到构建参数的AppId部分。

（4）配置主包为远程包。设置此项，确保最大化减少程序包体。

实际修改效果，请看第二节创建构建发布的截图。

3. 资源打包

目的就是将原来本地的资源设置为远程访问，目的也是为了减少主包体大小，确保在4m以内。可以直接将游戏的resources目录整体设置为远程包，选择resources目录：

设置远程参数：

4.将资源拷贝到服务器

重新构建发布你的游戏，进入发布的路径，你会发现一个remote目录，将此remote目录整体拷贝到你的服务器就可以了；然后必须将本地remote目录删除。remote目录应该在：<你的游戏工程目录>/build-templates/wechatgame/remote 。

5.终极压缩包体

很大可能经过了这一系列操作也没有能把包体压缩到4m以内，感到无比绝望！你会发现光是cocos engine自带的内容就超过了3.9m，这种情况下当然无路如何无法压缩到4m以内的。所以，必须使用cocos的裁剪功能，就是把不必要的cocos engine的内容删除掉，确保包体减少，具体做法是点击cocos creator->项目-> 项目设置 -> 功能裁剪，在里面会看到功能列表：

仔细检查下，确定不用的功能取消勾选即可，多试几次然后打包构建，就会发现cocos的engine的体积明显减少了！你的主包终于在4m以内了！祝贺，最复杂的步骤解决了！

6.设置不校验域名

按照微信小程序发布规则，你的域名必须注册/备案，否则不能作为远程资源服务器，在测试过程中可以将这个校验规则屏蔽掉，减少调试的麻烦，具体在微信开发者工具->设置->项目设置->本地设置，勾选对应选项即可：

好了，这下就可以用手机查看你的游戏程序了！

下面是我的微信小游戏24点世纪大作战，欢迎大家下载。