Cocos跨平台发布指南：QQ小程序与微信小游戏的完整发布流程与优化策略

monkeyhlf

已于 2025-03-09 14:48:07 修改

阅读量782

点赞数 9

文章标签：游戏引擎小程序

于 2024-09-24 18:18:07 首次发布

本文链接：https://blog.youkuaiyun.com/xcvmonkey/article/details/140093561

版权

引言：双平台发布的价值

用户覆盖：微信小游戏覆盖12亿月活用户，QQ小程序触达8亿年轻用户
技术统一性：Cocos Creator支持一键构建多平台，降低开发成本
性能挑战：双平台均存在包体限制（微信主包≤4MB，QQ主包≤10MB），需针对性优化

一、环境准备

1.1 工具安装

Cocos Creator：推荐v2.4.3+，支持双平台构建模板
微信开发者工具：需配置路径至Cocos偏好设置
QQ开发者工具：从官网下载并登录QQ开发者账号

1.2 项目初始化

适配UI布局：微信采用750 1334逻辑分辨率，QQ建议640 1136
跨平台代码隔离：通过 cc.sys.platform 判断运行环境实现差异化逻辑

二、微信小游戏发布流程

2.1 构建配置

在这里插入图片描述

2.2.Cocos creator 的功能剔除选项、

这里插入图片描述](https://i-blog.csdnimg.cn/direct/2bd08a240ba84783939558ae625403c5.png)
在这里插入图片描述

2.3.项目发布

将remote文件上传至相应cdn资源服务器地址目录
如果该资源下载地址的目录不是第一次使用，记得刷新
单击刚才新导入的工程即可运行

2.4. 在上传资源之前检查游戏分包设置是否正确

在这里插入图片描述

2.5.点击上传版本

在这里插入图片描述

2.6.登陆微信公众平台

https://mp.weixin.qq.com/ 扫描二维码，进入后台设置
查看当前版本

2.7.关键步骤：

配置微信开发者工具路径（偏好设置→原生开发环境）
勾选“分离引擎”减少主包体积
启用资源热更新，规避4MB限制

2.8.审核避坑指南

内容合规：避免虚拟支付、诱导分享等违规设计
性能指标：确保首屏加载时间<3秒，FPS≥30
测试账号：需提前在微信公众平台配置白名单

三、QQ小程序发布流程

3.1 账号与项目创建

注册QQ开放平台账号（https://q.qq.com）
创建项目时选择“游戏”类目，需提供软著或授权书
配置服务器域名（需HTTPS）

3.2 构建与调试

// QQ特有API适配示例
if (cc.sys.platform === qq) {
  qq.showToast({ title: "QQ专属提示" });
}

差异点处理：

登录体系：QQ采用OpenID+UnionID，需对接QQ互联SDK
社交分享：支持QQ空间、QQ好友等传播渠道

3.3、构建发布

在这里插入图片描述

资源下载地址的目录建议不用同一个, 避免冲突

3.2、修改脚本

1. 修改qgame/game.js

添加GameGlobal.globalThis = GameGlobal;
在这里插入图片描述

2.修改qgame/src/system.bundle.js

添加window[“global”]=window;
在这里插入图片描述

3.3、手q开发工具点击开始

1.点击新建项目

在这里插入图片描述

2.项目目录选择上文发布的工程目录即可(填写相应的项目配置信息)

【确定】进入下一个界面
在这里插入图片描述

3.项目发布

将remote文件上传至相应cdn资源服务器地址目录
如果该资源下载地址的目录不是第一次使用，记得刷新
单击刚才新导入的工程即可运行

4.上传版本

在这里插入图片描述

5.登陆QQ开放平台

在这里插入图片描述

四、双平台优化策略

4.1 资源管理

4.1.1.分包方案：

微信：主包+资源包+引擎包
QQ：基础库分包+功能模块分包

动态加载：使用 cc.assetManager.loadBundle按需加载

4.1.2.小游戏配置分包步骤：

打开项目设置 -> 功能裁剪 -> 模块配置，勾选需要的模块以减少主包体积。
在 构建发布 面板中选择目标平台（如微信小游戏）。
确保主包资源不超过平台限制（微信主包不超过 4MB）。

4.1.3. 构建项目

构建时，Cocos 会自动将子包目录下的资源分离到对应分包中。
构建完成后，检查生成的 build 目录，确认子包文件是否生成。

4.1.4. 代码加载子包

使用微信原生 API（微信小游戏）

// 加载子包
const task = wx.loadSubpackage({
  name: 'subpackage1', // 与配置的子包名称一致
  success: () => {
    console.log('子包加载成功');
    // 加载子包中的场景或资源
    cc.assetManager.loadBundle('subpackage1', (err, bundle) => {
      bundle.loadScene('sceneName', (err, scene) => {
        cc.director.runScene(scene);
      });
    });
  },
  fail: (err) => {
    console.error('子包加载失败:', err);
  }
});

使用 Cocos AssetManager（跨平台推荐）

// 动态加载子包
cc.assetManager.loadBundle('subpackage1', (err, bundle) => {
  if (err) {
    console.error('分包加载失败:', err);
    return;
  }
  console.log('分包加载成功');
  
  // 加载子包中的场景
  bundle.loadScene('subScene', (err, scene) => {
    cc.director.runScene(scene);
  });

  // 或加载子包中的预制体
  bundle.load('prefab/Item', cc.Prefab, (err, prefab) => {
    const node = cc.instantiate(prefab);
    cc.director.getScene().addChild(node);
  });
});

4.1.5.分包资源管理

资源放置：将子包专属资源（场景、预制体、图片等）放在配置的子包目录下（如 assets/subpackage1）。
代码隔离：避免主包代码直接引用子包内的脚本，使用动态加载：

// 动态加载子包脚本
import('subpackage1/Scripts/Enemy').then(module => {
  const Enemy = module.default;
  const enemy = new Enemy();
});

4.1.6. 注意事项

大小限制：微信小游戏主包 ≤ 4MB，总包 ≤ 20MB。
首次加载：主包需包含启动必备资源，子包按需加载。
测试验证：真机测试分包加载流程，避免本地缓存干扰。

4.2 性能调优

优化方向	微信方案	QQ方案
渲染性能	禁用非可视区节点更新	使用离屏Canvas
内存管理	对象池复用+定时GC	手动释放未引用资源
网络请求	合并接口+本地缓存	使用QQ云开发数据库