微信小游戏开发入门：从 0 到上线，一篇讲清

微信小游戏不是“小程序里嵌一个游戏”，而是基于微信运行时的轻量游戏形态。它没有 DOM，不能直接写 WXML/WXSS，核心是 Canvas/WebGL 渲染 + wx API + JavaScript 逻辑。对个人开发者和小团队来说，它门槛低、传播快，适合休闲、益智、IO、模拟经营等轻量玩法。

一、先认识三个文件

一个原生微信小游戏项目，最核心的文件很少：

• game.js：入口文件，相当于程序的主函数。
• game.json：全局配置，比如屏幕方向、状态栏、分包。
• project.config.json：开发者工具的项目配置。

如果你用 Cocos Creator、LayaAir、Unity 等引擎，最终也会导出一个微信小游戏项目，入口仍然是 game.js，只是代码由引擎生成。

二、开发前准备

1. 在微信公众平台注册“小游戏”账号，拿到 AppID。
2. 下载并安装微信开发者工具。
3. 新建项目，选择“小游戏”，填入 AppID。
4. 选择“原生”或“引擎”。小项目建议原生，复杂 3D 项目再上引擎。
5. 先跑通官方模板，再改成自己的玩法。

三、最小可运行示例

下面这段代码很少，但已经包含画布、触摸和动画循环。新建项目后，把 game.json 和 game.js 改成这样即可运行。

game.json：

{
  "deviceOrientation": "portrait",
  "showStatusBar": false
}

game.js：

const canvas = wx.createCanvas()
const ctx = canvas.getContext('2d')
const info = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync()
const w = info.windowWidth
const h = info.windowHeight
canvas.width = w
canvas.height = h

let x = w / 2
let y = h / 2

wx.onTouchMove(e => {
  const t = e.touches[0]
  x = t.clientX
  y = t.clientY
})

function loop() {
  ctx.fillStyle = '#101418'
  ctx.fillRect(0, 0, w, h)

  ctx.fillStyle = '#4fc3f7'
  ctx.beginPath()
  ctx.arc(x, y, 30, 0, Math.PI * 2)
  ctx.fill()

  ctx.fillStyle = '#fff'
  ctx.font = '16px sans-serif'
  ctx.fillText('拖动手指移动圆点', 20, 40)

  requestAnimationFrame(loop)
}

loop()

这段代码做了四件事：创建画布、获取屏幕尺寸、监听触摸、每帧重绘。点击“编译”就能看到效果。

四、核心能力地图

• 渲染：Canvas 2D 或 WebGL。复杂 3D 用引擎。
• 生命周期：wx.onShow、wx.onHide，用来暂停和恢复游戏。
• 触摸：wx.onTouchStart、wx.onTouchMove、wx.onTouchEnd。
• 音频：wx.createInnerAudioContext。
• 存储：wx.setStorageSync、wx.getStorageSync。
• 网络：wx.request，需要配置合法域名。
• 分享：wx.shareAppMessage。
• 排行榜：开放数据域，独立目录，不能访问主域 DOM。
• 广告：Banner、激励视频、插屏，按官方文档接入。
• 支付：虚拟支付通常需要资质，涉及内购往往需要版号。

五、开发流程

本地调试 → 真机预览 → 上传体验版 → 提交审核 → 发布。

注意：小游戏审核通常需要类目资质、隐私协议、内容合规；涉及内购或虚拟支付要版号。个人主体能做的类目有限，商业化前先查最新政策。

六、性能与适配建议

• 用 devicePixelRatio 适配高清屏，但别盲目放大画布。
• 图片资源压缩，图集合并，及时销毁不用的对象。
• 避免每帧 new 对象，减少 GC。
• 长列表和粒子用对象池。
• 短音效可复用，背景音乐切后台要暂停。
• 包体有限制，资源尽量 CDN 动态加载，具体大小以官方文档为准。
• 真机测试低端安卓，帧率比模拟器更真实。

七、常见坑

• 没有 DOM，别用 document、window。
• 小游戏入口是 game.js，不是小程序的 app.js。
• 开放数据域代码独立，不能和主域混用。
• 网络请求域名要备案并配置。
• 分享回调、广告拉取有失败率，要做好兜底。
• 审核政策会变，上线前看最新规范。

八、下一步做什么

先做玩法原型，再补 UI、音效、存档、排行榜和广告。不要一开始就上大引擎大项目。小游戏的核心是“短平快”：3 秒懂，30 秒爽，1 分钟愿意分享。

结语

微信小游戏开发并不神秘：一个入口文件、一个配置、一块画布，就能跑起来。上面不到 30 行代码已经包含渲染、触摸和循环。接下来要做的，是把你的玩法一点点加进去。