Cocos Creator微信小游戏启动优化：从加载页到首屏的定制实践

做微信小游戏发布这件事很多团队把精力全放在玩法和运营上结果第一次在真机上扫码就被“微信图标加进度条再加一片白屏”的组合拳打懵了。我自己第一次用 Cocos Creator 发布微信小游戏时也是这样——代码包上传完手机上一打开是默认加载页然后游戏引擎慢吞吞初始化中间还夹着一段黑屏体验非常割裂。后来陆续上线了几个项目才把这条链路彻底摸透。这篇内容就围绕 Cocos Creator 发布微信小游戏的完整流程展开重点讲两件事一是微信默认加载页到底能不能去掉、怎么定制二是从点击图标到游戏首帧画面之间的“隐形加载段”如何通过深度定制做成自己的品牌首屏。适合正在做微信小游戏、或者准备从其他平台迁移过来的同学参考尤其是对冷启动体验和用户留存有要求的项目。1. 默认加载页面到底从哪来微信加载页与引擎启动的边界1.1 微信客户端下载代码包时的加载页开发者也动不了先明确一个概念微信小游戏在用户第一次打开时微信客户端需要先下载游戏代码包。这个下载过程不归游戏代码管微信自己渲染了一个加载页——通常是游戏图标、游戏名称加上一条进度条。这个页面由微信客户端绘制它不在 Cocos Creator 的工程里也不在构建产物目录里所以开发者没有办法通过改代码“删除”它。很多新手到这里就卡住了以为是自己哪里没配好反复在工程里找配置项其实方向就错了。这里要先把“去除默认加载页面”这句话拆开理解微信客户端这个下载加载页不能去掉但可以自定义。在微信公众平台后台把默认的图标、文字、进度条替换成你自己的品牌背景图这是很多人忽略的一个免费优化点。真正能完全交给开发者控制的“加载页”是代码包下载完之后、游戏引擎初始化阶段的那一段这部分内容后面会单独讲。1.2 代码包下载完之后还有一个“隐形加载段”代码包下载完成之后趣味才开始。微信会执行 game.jsCocos 引擎开始初始化创建渲染上下文解析并加载启动场景最后渲染出第一帧。这一段过程短则一两秒慢则三四秒甚至更久具体看机型性能。如果项目没有做任何处理屏幕上就是一片空白或者一片死黑。这个“隐形加载段”才是开发者能深度定制、也最应该深度定制的地方。用生活里的话说微信客户端的下载加载页是快递外包装你改不了快递公司用什么箱子但开箱之后里面的东西怎么摆放、怎么减震是你自己说了算。游戏内的首屏加载页就是这个“内衬”做得越贴合用户的开箱体验越舒服。1.3 为什么要花力气处理这两层加载我见过不少项目玩法数值都做得不错评分和口碑却栽在启动体验上。用户从点开图标到真正能操作超过三秒就开始流失如果中间还夹杂着白屏、黑屏、页面突变第一印象直接被打折。处理默认加载页和游戏内首屏本质上不是“好看不好看”的问题而是留存问题。微信小游戏后台其实也一直在关注这些数据。开发者工具和真机调试里可以看到启动耗时后台也会统计启动率和崩溃率。优化这两层加载对过审、对推荐、对口碑都有实际好处投入产出比非常高。2. Cocos Creator 发布微信小游戏的准备工作2.1 版本选择和基础配置别踩坑Cocos Creator 目前主流是 2.4.x 和 3.8.x 两个大版本。老项目用 2.4 也能跑但我建议新项目直接上 3.x资源管线、assetManager 加载机制、整体性能表现都更现代。下面代码示例我按 3.x 的写法来用 2.x 的同学把 cc.assetManager 换成 cc.loader核心思路一样。需要特别提醒的是新版 Cocos Creator 的微信小游戏构建能力是以插件形式存在的。装完编辑器之后先到「扩展管理器」里确认有没有安装微信小游戏平台支持没有的话先装上再重启编辑器。这个步骤经常被忽略结果构建面板里怎么都找不到微信小游戏平台误以为编辑器有问题。2.2 构建面板里的关键参数每一项都要过一遍打开「项目」-「构建发布」选择「微信小游戏」平台有几个参数我建议每次发布前都仔细核对AppID填小游戏的正式 AppID不要拿小程序 AppID 混用也别在真机预览时用别人的。初始场景必须选启动场景一般是 Boot 或 Loading 场景。资源服务器地址如果要用远程资源这里填 CDN 根地址。首次启动如果依赖远程资源loading 场景本身必须保证轻量否则会出现下载加载页消失之后还要等网络的尴尬。MD5 Cache建议开启配合远程资源做缓存更新避免玩家拿到旧资源。引擎模块裁剪开启后只打包用到的引擎模块能明显减小首包体积和脚本执行时间。提示微信对主包首次下载包的体积限制很严格行业里比较稳妥的做法是控制主包在 4MB 以内。项目如果比较大必须用分包把玩法和资源拆出去。具体数值以微信官方最新公告为准发布之前一定要看后台的“包体限制”提示。2.3 微信开发者工具导入注意项目类型构建完成后产物默认生成在项目的 build/wechatgame 目录。打开微信开发者工具选择「小游戏」项目类型导入这个目录输入 AppID。没有正式 AppID 可以先申请测试号编译之后就能在模拟器里看到运行效果。这里有一个常见误区很多人在 Cocos Creator 里直接点“预览”以为预览到的就是微信小游戏效果。实际上 Creator 的浏览器预览和微信小游戏运行环境差别很大尤其涉及微信 API、首屏加载、分包加载这些功能必须用微信开发者工具和真机验证。上线前的每个改动我都建议至少在开发者工具和一台真机上各跑一遍。3. 微信默认加载页的定制实操3.1 公众平台后台配置加载页背景图微信客户端的下载加载页配置入口在微信公众平台mp.weixin.qq.com。登录小游戏账号后在「设置」-「基本设置」里找到加载页相关的配置项可以上传自定义背景图同时选择进度条的主题样式。整体配色尽量和游戏风格一致让用户在点开游戏之前就先进入品牌氛围。背景图的尺寸和格式后台一般会给出明确提示竖屏游戏普遍用 750px 左右的宽高比例格式用 JPG 或 PNG文件不要太大。如果后台提示格式或分辨率不符直接按官方给出的示例尺寸切图。尺寸这种事千万别自己发挥我见过有团队传了张超宽图加载页上被裁得只剩中间一条难看不说还显得很不专业。3.2 开发者工具里如何模拟首次加载效果自定义加载页保存后普通编译是看不到效果的因为它只在首次下载代码包时出现。最直接的验证方式是使用开发者工具右上角的「预览」功能生成预览二维码后真机扫码。真机首次加载这个代码包时微信会先展示自定义加载页这时就能确认背景图和进度条是否符合预期。如果不想每次都用真机开发者工具的缓存目录里也可以做清理。工具栏里有清缓存的入口清掉之后再预览会比较接近首次启动的状态。不过我的经验是工具模拟毕竟不是完整微信运行时真有条件还是要真机扫一遍尤其是要确认加载页进度到 100% 之后和游戏首屏的衔接是否顺畅。3.3 定制加载页的注意点这块内容虽然简单但有几个坑值得单独说后台配置保存后老用户如果代码包有本地缓存不会每次打开都看到加载页。只有代码包需要重新下载时才出现这是正常现象别以为是配置没生效。加载页背景色在 iOS 和 Android 上可能存在色差深色渐变背景尤其明显。建议关键信息不要放在屏幕最边缘避免被裁切或遮挡。自定义加载页不等于自定义转场。加载页结束到游戏首帧画面之间如果没有做任何处理依然会出现白屏这一段怎么替换放到第 4 节专门讲。4. 游戏内首屏深度定制用轻量启动场景替代白屏4.1 设计一个极简的 Boot 启动场景真正完全由开发者控制的首屏是游戏进程内的启动场景。我的做法是准备一个极简的 Boot 场景里面只有一个背景图、一个进度条和一个版本号文本再加一个脚本负责资源加载和流程编排。这个场景自身依赖的资源越少越好最好连图集都别用直接用一张单独的背景图。为什么强调“极简”因为 Boot 场景会在微信加载页结束之后立刻启动渲染。它自身的资源开销足够小几乎可以做到“加载页一结束游戏画面就出现”。用户感知上从微信下载进度条无缝过渡到游戏内进度条整个体验是连续的中间没有白屏空洞。如果 Boot 场景里不小心挂了一堆 UI 节点和脚本初始化一慢白屏又回来了那前面做的定制就全白费了。4.2 真实加载进度的代码实现在 Cocos Creator 3.x 里加载 Bundle 的进度回调是现成的。我在 Boot 场景里通常这样写import { _decorator, Component, ProgressBar, Label, assetManager, director } from cc; const { ccclass, property } _decorator; ccclass(BootScene) export class BootScene extends Component { property(ProgressBar) progressBar: ProgressBar null; property(Label) progressLabel: Label null; onLoad() { this.setProgress(0, 0); // 加载主包资源开发者工具里进度回调的 finished/total 是“加载单元数”维度 assetManager.loadBundle(main, (err, bundle) { if (err) { console.error(主 Bundle 加载失败, err); this.showRetry(); return; } this.setProgress(1, 1); director.loadScene(GameScene); }, (finished, total, item) { const ratio total 0 ? finished / total : 0; this.setProgress(ratio, Math.floor(ratio * 100)); }); } private setProgress(ratio: number, percent: number) { if (this.progressBar) { this.progressBar.progress ratio; } if (this.progressLabel) { this.progressLabel.string ${percent}%; } } }这段代码的核心逻辑是Boot 场景启动后立刻调用 assetManager.loadBundle 加载名为 main 的资源包progress 回调里更新进度条加载完成后再切换场景。这样玩家看到的进度条是真实反映资源加载进度的不是假动画。注意loadBundle 的 progress 回调里 finished/total 是“加载单元数”不是字节数。如果某个大资源占了一个加载单元进度条会在这个单元上停留很久然后又突然跳一大截。体感上像是不稳定但这就是真实进度。想做得平滑可以在真实进度上做插值过渡或者把大资源拆小、分批加载。4.3 加载失败怎么办加一个重试按钮很多团队只做了正常加载流程忘了做异常分支。微信小游戏运行在真实网络环境下用户可能在电梯里可能在地铁里弱网场景太常见了。如果 Bundle 加载失败游戏就卡在进度条 100% 前一动不动用户只能杀掉进程重开这种体验很伤。我的做法是在 Boot 场景里放一个默认隐藏的提示节点包含一段错误文案和重试按钮。加载失败时显示这个节点点击重试就重新触发 assetManager.loadBundle。代码上也不复杂把加载逻辑抽到一个方法里重试按钮直接调用这个方法就行。千万别小看这个细节弱网环境下它能把流失率拉回一大截。4.4 分包与远程资源怎么配合首屏优化最核心的一招是“主包极简、资源后置”。微信小游戏对主包体积有硬限制首包如果塞满场景和贴图下载加载页阶段就会非常久后面所有优化都白搭。具体做法是在 Cocos Creator 的 Assets 面板里选中业务资源文件夹在 Inspector 里给它命名 Bundle如果是纯玩法代码和资源勾选“配置为子包”。构建时这个 Bundle 会变成微信小游戏的一个分包。Boot 场景只依赖公共代码和主包内的必要资源玩法场景、UI、美术资源全部放子包由 Boot 场景按需加载。如果资源量仍然很大把非关键资源放到远程资源服务器。构建面板里配置“资源服务器地址”开启 MD5 Cache微信会按需下载远程资源并做本地缓存。远程资源适合音频、新手引导图、运营活动素材这类对实时性要求不高的内容核心玩法所需的资源还是尽量打进子包避免第一局游戏就被网络拖累。4.5 首帧渲染与视觉衔接的技巧代码逻辑到位了视觉衔接也别忽略。微信加载页的进度条结束后如果 Boot 场景背景色和加载页背景色差太多会有一个明显的“闪变”过程。我通常的做法是加载页背景主色是什么Boot 场景背景就是什么进度条样式也保持近似用户几乎察觉不到页面切换。另外Cocos Creator 里场景的渲染背景色受摄像机 ClearColor 影响。如果 Boot 场景的摄像机没有设置 ClearColor默认可能是灰白色和深色加载页拼在一起会很突兀。记得把 Boot 场景的摄像机 ClearColor 改成和背景图同色。还有一个容易被忽视的点不要在 Boot 场景里初始化广告 SDK、不要同步请求运营配置、不要加载任何网络资源这些全部放到进入主场景后再处理否则会直接拖长首屏时间。5. 常见问题与排查技巧实录5.1 自定义加载页不生效遇到这个问题先别急着怀疑后台有问题。按下面顺序排查确认你登录的账号类型是小游戏不是小程序。小程序和小游戏的后台配置项长得像但加载页配置并不通用。确认配置的是首次下载代码包的加载页保存后最好重新打开一下后台页面确认状态。清理微信开发者工具缓存用预览二维码在真机上首次下载验证。换一个网络环境再试4G 和 WiFi 对代码包缓存的影响不一样。还有一个容易被忽略的细节自定义加载页通常在代码包需要重新下载时才展示。如果代码包体积很小微信还没有从服务器拉取就已经走了本地缓存加载页可能一闪而过甚至不出现。这不算故障是微信的缓存策略。5.2 进度条卡在 99% 不动这是加载 UI 最容易踩的坑。常见原因有三个某个大文件占了单一加载单元进度回调长时间不触发看起来像卡住。处理方式是压缩单个资源体积拆大图启用压缩纹理。加载完成后 director.loadScene 是同步过程如果目标场景首次实例化时脚本初始化太重主线程会被阻塞画面停在进度条满的状态。进度回调里 percent 用了四舍五入99.6% 会显示 100%但实际还在等后续资源观感上就是“卡住”。我之前排查过一个项目最后定位到是一张 4MB 多的 UI Atlas 被当作一个加载单元用户在低端安卓机上要等两三秒进度才动一下。把大图拆小并启用压缩纹理后问题明显缓解。5.3 iOS 和 Android 表现不一致同一个构建包iOS 和 Android 的冷启动表现经常不一样。iOS 引擎初始化通常更快但微信运行环境的差异会导致某些 API 行为不同Android 低端机则首包解压慢、脚本编译慢白屏时间更长。所以最好在两个平台都做真机冷启动测试记录从点击图标到首帧渲染的耗时。如果 Android 白屏格外严重检查一下是否开启了基础库的 JIT 编译相关配置以及在项目设置里把不需要的引擎模块全部裁剪掉。启动场景里尽量少挂组件、少放 UI 节点这些都是能真金白银省下来的毫秒。5.4 首包体积控制清单下面这张表是我发布项目时反复对照的检查清单可以直接抄作业检查项推荐做法作用首包大小控制在 4MB 以下缩短首次下载时间主场景依赖仅保留 Boot 场景必要资源避免启动时加载无关资源打包素材贴图全部压缩、音频用 MP3/AAC减小包体和运行时内存引擎模块裁剪未使用的引擎模块减少脚本执行时间分包玩法场景和资源拆到子包主包只放启动壳远程资源运营素材放 CDN实时更新且不占包体MD5 Cache构建面板开启远程资源更新不冲突5.5 build-templates 深度定制还有一个很多人不知道的深度定制入口在项目根目录创建 build-templates/wechatgame 文件夹里面的文件在构建时会自动覆盖到构建产物中。比如你想给 game.json 加网络超时时间配置或者修改 project.config.json 里的项目名、AppID都可以通过这个文件夹直接控制。举个例子我在 game.json 里常用的配置{ deviceOrientation: portrait, showStatusBar: false, networkTimeout: { request: 10000, connectSocket: 10000, uploadFile: 10000, downloadFile: 10000 } }这样每次构建出来的产物都会带上这些配置不会因为重新构建而丢失。用它还能统一定制引擎启动前的一些代码逻辑是深度定制微信小游戏外层行为的利器。不过要提醒一句覆盖 game.js 要非常谨慎改动不当会让引擎起不来。没有十足把握之前先用 game.json 和 project.config.json 这类配置文件入手比较稳妥。6. 一些实际操作中的体会做了几款微信小游戏之后我最大的感受是启动体验不是上线前最后一天能优化的而是从项目初期架构就要留出位置。很多团队一开始把所有场景都塞在主包里等上线前再想拆分包结果业务代码耦合严重拆包拆到崩溃。更合理的做法是第一天就规划好 Boot 场景、主包壳、子包资源三者的边界后续每个版本都按这个边界往里加内容。再分享一个我自己的土办法每次验证启动体验我都会拿一台旧的安卓机测试。新旗舰机和模拟器都太“宽容”了掩盖了真实性能问题。记录从点击图标到游戏第一帧的时间连续测几次取平均值这个数字比任何性能分析工具都直观。如果这台旧安卓机上的启动耗时能压进三秒以内其他机型基本问题不大。最后再提一个扩展方向这套“轻量启动场景 真实进度条 分包/远程资源”的思路其实不止适用于 Cocos Creator。很多团队用 Unity 导出微信小游戏或者做其他平台的小游戏核心逻辑完全一致。加载页和首屏是留住用户的第一道门槛值得多花点时间打磨。