ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Cocos Creator打包微信小游戏全流程:构建、分包、真机调试与避坑指南

Cocos Creator打包微信小游戏全流程:构建、分包、真机调试与避坑指南 简介这组源代码展示了Cocos Creator工程打包为微信小游戏的完整实现适合有一定 Cocos Creator 基础、希望快速上手微信小游戏发布的开发者。压缩包内共592个文件体积仅1.67MB核心以289个json配置文件、180个png图片资源、81个meta元数据和17个js脚本为主同时包含plist图集、fnt位图字体、bin二进制资源与mp4演示文件可清晰看到场景、预制体、动画和资源管理的组织方式。目前已有3286人学习下载说明其在同类资源中具有较高参考价值。通过整理这份源代码读者能直观了解Cocos Creator项目导出微信小游戏时所需的目录结构、资源引用关系和关键配置文件尤其适合在打包过程中遇到资源加载或配置问题的开发者对照排查。 去年年初接了一个休闲游戏项目需求很明确用 Cocos Creator 开发然后打包成微信小游戏发布。当时团队里没人完整走过这条链路我一开始也觉得无非是“构建一下”——真正上手才发现构建参数怎么配、主包 4MB 的限制怎么破、服务器域名为什么一直被拦截、开发者工具里跑得好好的真机却白屏每一步都有坑。这篇就把完整的打包流程和产物解析写清楚包括构建后那份“源代码”里每个文件是干嘛的、如何拆包分包、好友排行榜怎么接以及我实际踩过的各种坑。适合两类人一是刚准备把 Cocos Creator 游戏发布到微信小游戏平台的开发者二是已经能构建通过、但被真机异常和上线审核卡住的朋友。1. 整体方案与选型分析1.1 为什么选 Cocos Creator 而不选其他方案微信小游戏的开发路径现在主要有三条纯原生小游戏开发直接用 JavaScript 写调用wxAPI、Unity 导出微信小游戏、Cocos Creator 构建微信小游戏。我这次选 Cocos Creator最核心的原因是项目资产复用。我们团队已经有现成的 Cocos 项目美术资源、预制体、动画系统全是 Creator 资产如果改用原生开发等于全部重写用 Unity 导出微信小游戏在当前阶段还偏重度引擎运行时体积偏大性能调优的复杂度高对一个休闲游戏来说是杀鸡用牛刀。从跨平台策略上看Cocos Creator 一个工程可以同时发布 Web、iOS、Android、微信小游戏、抖音小游戏等多个平台业务代码基本不用改。日常开发时直接在浏览器里 preview跑通逻辑后再针对微信平台做适配效率比多端各写一套高得多。这也是我建议小团队优先考虑 Cocos Creator 的原因开发成本低发布路径平滑。再补一句热词里经常有人搜“cocos creator 打包 apk”那是另一个话题——把项目构建成 Android 原生应用产物是 APK运行在安卓手机上和微信小游戏完全是两条发布渠道。两者在框架维护、微信 API 接入、包体限制上有本质区别下面讨论的都是微信小游戏这条线APK 场景不混在一起讲。1.2 打包的本质不是翻译代码而是组装一个微信工程很多人第一次接触时会有一个误解觉得 Cocos Creator 打包微信小游戏是把 C/TypeScript 代码“翻译”成微信小游戏原生代码。其实不是。Cocos Creator 3.x 使用 TypeScript 作为游戏逻辑语言构建时会把 TS 编译成 JavaScript再把引擎运行时、场景配置、纹理、音频、动画等资源全部序列化最后按微信小游戏要求的目录结构组装成一个标准的微信小游戏项目。这个项目可以直接被微信开发者工具打开、预览、上传。微信小游戏的本质是一个运行在微信客户端里的 JavaScript 应用入口是game.js配置信息写在game.json微信客户端提供了wx全局对象开放各种原生能力存储、网络、支付、开放数据域等。Cocos Creator 做的事情就是在你的业务代码和wxAPI 之间搭好桥同时把渲染、音频、输入等能力适配到小游戏环境——这样一来你的游戏才能在微信这个“容器”里正常跑起来。类比一下打包过程更像是在做一个“安装包”Cocos Creator 是生产线它把游戏代码、资源、引擎三样东西装箱再贴上微信小游戏的标签。至于这个“箱子”里放的到底是可读的 JS 还是编译过的字节码取决于构建选项里怎么设置后面会讲到。2. 环境准备与构建配置2.1 工具链版本怎么搭配几年下来我的习惯是Cocos Creator 用 LTS 版本微信开发者工具用稳定版。如果你是新手不建议追最新版 Creator最新版往往带一些新特性但社区踩坑资料还不多也不建议用太老的版本否则微信开发者工具那边可能接口对不上。我这里用的是 Cocos Creator 3.8.x 微信开发者工具稳定版配合比较顺。还需要一个小游戏 AppID。去微信公众平台注册一个“小游戏”账号主体类型可以是个人或企业审核通过后在后台“开发-开发设置”里能看到 AppID。个人主体的支付、类目等能力受限但做基础测试和体验完全够用。真机预览通常需要该 AppID 的开发者权限。补一个环境检查清单Cocos Creator 3.8.x 已安装能正常新建/打开项目。微信开发者工具已安装并登录建议打开“服务端口”方便自动预览。已注册小游戏账号拿到 AppID。项目目录路径不能有中文和空格否则构建阶段容易报奇怪错误。2.2 构建发布面板里那些关键选项在 Cocos Creator 中打开“项目-构建发布”选择平台为微信小游戏会弹出一堆配置项。这里我把最影响产物行为和包体体积的几项列出来逐个说明它到底控制什么。配置项推荐值作用与原因应用ID微信小游戏 AppID填入wx开头的 AppID构建物会带上对应标识初始场景游戏启动主场景必须是玩家打开游戏后看到的第一个场景设备方向landscape / portrait按游戏类型定横屏游戏选 landscapeMD5 缓存开启资源文件名会带 hash 值避免用户更新后读取缓存旧资源源码模式调试时开上线关开启后产物保留可读源码便于排查问题但包体会更大主包压缩类型默认 / 按需决定主包内资源压缩策略影响启动加载速度字节码编译按需开启将脚本编译为.jsc字节码提升代码保护级别这里重点说两个选项。MD5 缓存建议发布版一定要开。不开的话每次发新版本文件名不变微信的缓存策略可能让用户继续读到旧资源出现“界面更新了但资源还是旧版”的怪问题。开启之后文件内容一变文件名就变缓存自然失效。字节码编译这个选项和“源代码”关系很大。微信小游戏支持将 JavaScript 编译成 JSC 字节码构建时勾选后最终产物里的脚本会变成.jsc后缀的文件而不是明文 JS。这样别人拿到包后无法直接读到你的业务逻辑源码对代码保护有实际价值。但需要注意真机预览和部分调试场景可能不支持我是建议正式提审包开启日常调试关闭。3. 打包到真机运行的完整流程3.1 从构建到微信开发者工具的 7 步操作整个流程我拆成 7 步照着做基本能通在 Cocos Creator 中打开项目菜单栏选择“项目-构建发布”。构建平台选择“微信小游戏”填好 AppID、初始场景、设备方向等参数。点击“构建”按钮等待进度条跑完。首次构建会比较慢因为要编译引擎和全部资源。构建完成后点“生成”或“打开目录”找到构建输出路径默认在项目的build/wechatgame目录下。打开微信开发者工具选择“导入项目”目录指向build/wechatgameAppID 填同一个wxAppID。初次导入时工具会提示“是否使用测试号”建议用正式 AppID否则请求合法域名、开放数据域等功能会受影响。编译通过后点击“预览”生成二维码用手机微信扫码即可在真机运行。有一个高频坑Cocos 构建输出目录如果已经存在同名构建再次构建时可能因为文件占用而失败。解决办法是先关闭微信开发者工具的项目窗口再回 Cocos 点构建。3.2 主包超限4MB 的限制怎么破微信小游戏对主包体积有严格限制主包目前要求在 4MB 以内整个小游戏主包所有分包允许更大范围。首次做时很容易超因为 Cocos 默认把引擎、首场景相关资源、所有脚本都打进主包。我的处理顺序是先砍资源再拆分包最后才考虑远程加载。砍资源最有效的是勾选构建面板里的“模块裁剪”。Cocos Creator 引擎有很多功能模块比如物理系统、3D 粒子、Spine、DragonBones如果你的游戏根本没用物理直接不勾选物理模块引擎体积能小不少。然后检查图集把零碎小图合成图集减少文件数量同时开启纹理压缩ETC2/ASTC图片体积能降 40% 以上。如果主包还是超就拆分包。微信小游戏支持在game.json里声明subpackages把非启动必备的玩法关卡、额外场景拆成独立分包只有在玩家进入对应模块时才下载。Cocos Creator 3.x 提供了按场景或 Bundle 分包的能力在构建面板中把某些 Bundle 设置为“远程”或“分包”构建时就会被分离出来。举个例子game.json里分包配置大致长这样{ deviceOrientation: landscape, subpackages: [ { name: level1, root: level1/ }, { name: music, root: music/ } ] }注意启动场景和启动时必定用到的公共资源必须留在主包不能为了体积把小游戏第一个画面需要的场景也拆出去否则用户打开游戏会长时间白屏或直接报错。分包的加载时机建议结合游戏流程来控制进入关卡前预加载再用wx.loadSubpackage触发下载。3.3 远程资源加载包体不够CDN 来凑分包能解决一部分体积问题但如果是重度游戏资源总大小轻松超过 30MB这时候远程资源加载几乎是必选项。在 Cocos Creator 构建配置里可以把某些 Bundle 或资源设置为“远程 Bundle”构建后这些资源不会进入微信包体而是生成一个可供上传到 CDN 的目录。小游戏在运行时引擎会自动从你配置的远程地址下载对应资源并缓存到本地。这里有一个大坑微信小游戏请求的网络地址必须是 HTTPS并且要在微信公众平台后台配置合法域名。默认情况下没有配置的域名在小游戏环境里会被直接拦截表现就是资源加载失败、画面白屏。本地调试可以在微信开发者工具里勾选“不校验合法域名”但真机预览和正式版本不会放行。我在第一次上线时就是没配合法域名自己电脑上模拟器里一切正常手机上一加载资源就报url not in domain list排查了半天才找到原因。所以建议项目一开始就确认资源服务器走 HTTPS域名提前加进后台白名单CDN 的 CORS 跨域也要配好不然引擎的fetch或XMLHttpRequest一样会被拦。4. 构建产物源码结构与关键文件解读4.1 构建完的wechatgame目录里到底装了什么构建完成后build/wechatgame目录就是完整的微信小游戏项目。很多朋友拿到这个目录会有点懵我来逐项说明文件 / 目录作用game.js小游戏入口文件微信客户端会从这里启动游戏game.json小游戏全局配置包括设备方向、分包、子包、网络超时等project.config.json微信开发者工具的项目配置记录 AppID、编译设置等assets/序列化后的场景、预制体、资源配置文件src/游戏业务代码目录通常包含chunks等子目录cocos-js/Cocos Creator 引擎运行时脚本.jsc文件开启字节码编译后脚本会以字节码形式存在cocos-js/cc.js引擎主模块被game.js引用game.js是入口中的入口。微信小游戏启动时会先运行game.js它负责初始化 Cocos 引擎、加载引导配置和启动场景。实际调试时如果遇到“启动白屏但引擎没报错”的情况可以先在这个文件附近打日志确认引擎是否加载成功。game.json则是微信层面的静态配置。除了刚才讲的分包它还控制着小游戏的窗口背景色、deviceOrientation、networkTimeout等参数。修改game.json后回到微信开发者工具需要重新编译才能生效。4.2 源码模式与字节码模式这两个“源代码”不是一回事这部分和大家搜索“源代码”这个词的意图最贴近。Cocos Creator 构建微信小游戏时可以通过构建参数控制脚本的产出形态。源码模式下src/目录里是可直接阅读的 JavaScript 文件虽然经过了压缩和混淆处理但逻辑大体可读。好处是排错方便、堆栈信息清晰坏处是别人解包后能分析你的业务逻辑甚至能找到一些敏感接口地址。字节码模式下脚本会被编译成.jsc字节码文件微信开发者工具的 Sources 面板里不能直接看到明文源码逆向难度显著提升。但注意字节码不等于绝对安全运行在用户设备上的东西理论上都有可能被分析服务端校验和敏感数据保护不能省。我在实际项目中是“开发永远源码模式提审包开字节码”这样兼顾调试体验和代码保护。另外提醒一点不管哪种模式客户端代码里都不要硬编码服务器后台的密钥、支付回调密钥、管理员口令等敏感信息客户端没有秘密需要隐私的内容必须放到服务端。4.3 好友排行榜怎么接开放数据域最小实现热词里有人搜“Unity 微信小游戏怎么获取好友排行榜”Cocos 这边其实也一样要通过微信的开放数据域实现。简单说微信为小游戏提供了一块与主域隔离的 JavaScript 运行环境专门用来跑好友关系链数据和绘制排行榜主域拿不到原始好友数据只能拿到绘制好的sharedCanvas纹理。Cocos 里的接法一般是在小游戏项目下新增一个openDataContext目录里面写好独立的index.js这个文件里调用wx.getFriendCloudStorage获取好友的游戏数据再通过 Canvas 把排行榜画出来。主域方面Cocos 提供 API 将sharedCanvas转成纹理贴到游戏场景的 3D/2D 对象上。核心逻辑示意如下// 开放数据域 index.js let sharedCanvas wx.getSharedCanvas(); let ctx sharedCanvas.getContext(2d); wx.getFriendCloudStorage({ keyList: [score], success: (res) { const data res.data; // 排序后绘制排行榜 drawRankList(ctx, data); } });主域里先调用wx.setUserCloudStorage把玩家自己的分数上传再在需要显示排行榜时触发开放数据域去拉取好友数据。需要注意开放数据域的代码要写在特定目录下不能直接在 Cocos 场景脚本里调用wx.getFriendCloudStorage能力限制是平台规则不是引擎问题。5. 常见问题与避坑实录5.1 构建和导入阶段最容易踩的坑报错“xxx 文件不存在”或构建中断多数是项目路径带中文、空格或者特殊字符微信开发者工具对这类路径兼容很差。把项目放到纯英文路径下重试。导入项目提示 AppID 不合法检查构建时填写的应用 ID 是不是wx开头的 18 位字符串并且这个 AppID 必须是“小游戏”类型不能是小程序或其他类型。后台注册错了类型构建出来的包也无法正常使用。微信开发者工具能打开但一直编译失败多半是 Cocos Creator 和微信开发者工具版本相差太大。比如用太老的 Creator 版本构建产物里引用的 API 在当前微信工具里已经废弃。优先升级 Creator 到 3.8再重新构建。5.2 真机运行的几个严重问题模拟器正常、真机白屏最常见的三个原因一是请求的服务器域名没配合法域名且非 HTTPS二是某些资源只在真机环境下才会被拦截本地绝对路径、file://协议三是 iOS 上不允许加载明文 HTTP 资源。优先从网络层排查手机连接电脑后开 vConsole 看具体报错。首包加载特别慢检查一下主包里是不是塞了过大的启动场景、UI 图集、音频文件。微信对首包下载是有限速的资源越大用户等待越久。建议把启动场景单独优化背景图压缩成 jpg/webp音频用 AAC 格式主包能瘦身很多。Storage 写入失败微信小游戏本地缓存有容量限制直接写入大对象比如整张图片 base64、大 JSON时容易失败。改用wx.setStorageSync时做好 try/catch同时尽量只存关键数据大内容走服务器或本地文件系统缓存。iOS 刘海屏和底部横条遮挡 UI小游戏环境没有原生安全区自动避让需要调用wx.getSystemInfoSync拿到safeArea字段自行调整 UI 布局。这一点在做 UI 适配时很容易被忽略。5.3 上线前一定要自查的细节提交微信审核前我习惯过一遍这个清单关闭调试模式把构建参数切到发布配置开 MD5、开字节码、确认模块裁剪。在微信公众平台后台配置好 request/uploadFile/downloadFile 合法域名全部走 HTTPS。版本号更新game.js或构建参数里的版本号要递增否则开发者工具可能提示上传失败。确认提审包没有使用未开放的 API尤其是涉及诱导分享、虚拟支付相关能力微信审核对这块卡得严。真机跑一遍完整流程登录、请求数据、加载远程资源、本地存储、打开分包内容、退出重进每一步都确认没有致命报错。整个流程走下来你会发现打包这件事本身并不难难的是对产物结构、包体策略、微信平台规则的理解。我的个人体会是第一次做微信小游戏打包至少预留一个完整工作日来走通全流程不要指望最后两小时提审上线。尤其是分包和远程资源这两块一旦项目做大了才想起来返工成本会非常高。最后再分享一个经验把整套构建流程脚本化。Cocos Creator 支持命令行构建可以做成自动打包脚本把 Debug/Release、字节码开/关、版本号这些参数全部参数化。这样每次提审前只要跑一条命令产物目录、包体信息、MD5 值都能自动生成既省时间又避免手点配置漏项。我第一次上线就是靠这个脚本减少了很多重复劳动后续加新功能再打包时特别省心。本文还有配套的精品资源点击获取
返回列表