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,按照以上设置,以后再次构建就不会有这个错误提示了。

  1. 运行几秒后无法点击

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

(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以内,其他资源远程访问。

  1. 构建参数修改

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

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

(2)设置md5缓存。

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

(4)配置主包为远程包。设置此项,确保最大化减少程序包体。

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

  1. 资源打包

目的就是将原来本地的资源设置为远程访问,目的也是为了减少主包体大小,确保在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点世纪大作战,欢迎大家下载。

猜你喜欢

转载自blog.csdn.net/a17432025/article/details/129216666