微信小游戏开发从0到上线实战路线

微信小游戏从2018年开放至今，已经成为一个不需要买量也能靠社交裂变跑起来的分发渠道。对于个人开发者来说，它的吸引力在于：无需版号（休闲类目下部分场景）、无需应用商店审核、一套代码可以同时跑在微信和抖音等多个宿主环境。但真正动手做，你会发现坑并不少。这篇文章把我从零做一个休闲小游戏到上线的完整路线和踩过的坑梳理出来。

一、先搞清楚技术选型

微信小游戏本质是一个运行在微信客户端内的 JavaScript 运行环境，它提供了 Canvas、WebGL、音频、文件系统、网络等 API，但没有 DOM、没有 BOM。这意味着你不能直接把一个网页游戏丢进去跑。

常见的三条路线：

• 原生手写：直接用 wx.createCanvas() 和 requestAnimationFrame 写渲染循环，适合体量小、逻辑简单的游戏，包体最小，性能最好。
• Cocos Creator：国内最主流的选择，编辑器成熟，支持一键发布到微信小游戏，适合中大型项目。缺点是包体偏大，需要做资源分包。
• LayaAir / Egret：也是成熟引擎，LayaAir 在 3D 和小游戏适配上有优势，Egret 社区活跃度近年下降。

如果你只是想做一个类似「跳一跳」的休闲游戏，我建议先用原生手写跑通一遍，理解渲染循环、触摸事件、资源加载这三件事，再决定要不要上引擎。

二、开发环境与项目结构

下载「微信开发者工具」，新建项目时选择「小游戏」，会生成一个基础模板。核心文件只有几个：

game.js          // 入口文件，游戏从这里开始执行
game.json        // 全局配置，如 deviceOrientation、networkTimeout
project.config.json  // 项目配置，appid 等
js/
  main.js        // 主逻辑
  databus.js     // 全局状态

game.json 里最常改的是屏幕方向：

{
  "deviceOrientation": "portrait",
  "showStatusBar": false,
  "networkTimeout": {
    "request": 5000
  }
}

注意：小游戏没有 index.html，所有代码从 game.js 开始执行。如果你用引擎，引擎会帮你生成这个入口。

三、渲染循环：一切的核心

小游戏的渲染依赖一个持续的循环。原生写法大致如下：

const canvas = wx.createCanvas();
const ctx = canvas.getContext('2d');

function loop() {
  update();   // 更新逻辑
  render();   // 绘制画面
  requestAnimationFrame(loop);
}

loop();

这里有两个关键点：

• 不要用 setInterval。requestAnimationFrame 会跟随屏幕刷新率，通常是 60fps，而 setInterval 在后台或卡顿时会堆积任务。
• 逻辑与渲染分离。update 里只算数据，render 里只画图，这样后期加暂停、加变速会容易很多。

四、触摸事件与适配

小游戏没有 click 事件，所有交互靠触摸：

wx.onTouchStart(e => {
  const touch = e.touches[0];
  const x = touch.clientX;
  const y = touch.clientY;
  // 判断是否点中按钮
});

屏幕适配是新手最容易翻车的地方。不同机型宽高比差异很大，建议用「设计分辨率 + 等比缩放」的方案：以 750 宽为设计基准，计算 scale = screenWidth / 750，所有坐标乘以 scale 后再绘制。这样在 iPhone 和安卓大屏上表现一致。

五、资源加载与包体限制

微信小游戏主包限制 4MB，总包（含分包）限制 20MB。超过主包限制就必须做分包。常见做法：

• 首屏必需的图片、音频放主包；
• 关卡资源、大图、音效放分包，用 wx.loadSubpackage 按需加载；
• 图片尽量压缩，能用图集就用图集，减少 HTTP 请求数；
• 音频用 mp3 或 m4a，避免 wav。

加载资源用 wx.createImage() 或引擎的 loader，注意加载是异步的，要等 onload 回调完成再进入游戏场景，否则会出现白图。

六、上线前必须检查的几件事

1. 性能：用开发者工具的 Performance 面板看帧率，低于 50fps 就要优化。常见瓶颈是每帧 new 对象、频繁绘制文字、大图缩放。
2. 内存：小游戏内存超过 200MB 左右容易被系统杀掉，及时销毁不再使用的图片和音频。
3. 分享与裂变：wx.shareAppMessage 是免费流量的核心，分享卡片要有吸引力，标题和图片要反复测试。
4. 广告接入：激励视频广告（wx.createRewardedVideoAd）是个人开发者最现实的变现方式，注意广告加载失败要有降级逻辑。
5. 审核合规：不能诱导分享、不能有赌博元素、不能出现未备案的支付。休闲类目下部分内容仍需资质，提交前看清楚类目要求。

七、给独立开发者的建议

微信小游戏的红利期早就过了，但「小体量、强社交、快迭代」的机会一直存在。我的建议是：先用一周做一个极简原型，验证核心玩法是否有「再来一局」的冲动，再投入美术和关卡。不要一上来就做大型 RPG，个人开发者耗不起。

另外，把游戏同时发布到抖音小游戏、QQ 小游戏，代码复用率能到 80% 以上，多一个渠道就多一份自然量。技术选型时优先考虑跨平台能力，这一点比引擎本身的性能更重要。