多平台小游戏适配

用生活化的比喻，让你理解各平台差异、跨平台适配策略和小游戏性能优化

前置知识：第05章 微信小游戏开发、4_1_game-architecture（游戏架构）

---

阅读指南（初学者必看）

为什么你需要学习多平台适配？

微信小游戏是最大的平台，但不是唯一的。抖音、快手、B站都有自己的小游戏平台，且用户群体不同。一套代码发布多平台，能显著扩大用户覆盖。但各平台 API 不同、限制不同，需要一套跨平台适配策略。此外，小游戏运行环境受限，性能优化是上线前必须攻克的关卡。

学完本章，你能回答：

• 微信、抖音、快手、B站小游戏有什么差异？
• 如何用平台抽象层实现一套代码多平台运行？
• 跨平台发布需要注意哪些坑？
• 小游戏性能瓶颈在哪？如何监控和优化？

本文结构

第一部分：平台差异（API/功能/限制对比）
第二部分：跨平台适配（平台抽象层设计）
第三部分：小游戏性能优化专项

---

一、平台差异

1.1 主流小游戏平台

1. 微信小游戏
   - 市场最大，10亿+月活
   - API最完善，文档最全

2. 抖音小游戏
   - 7亿+日活，推荐机制强
   - 变现能力好，内容传播强

3. 快手小游戏
   - 3亿+日活，用户下沉
   - 社交属性强，增长潜力大

4. B站小游戏
   - 3亿+月活，二次元用户多
   - 适合年轻向、创意类游戏

5. 华为快游戏
   - 硬件厂商预装优势
   - 华为生态，5MB首包限制

6. Facebook Instant Games
   - 海外市场，200MB包体限制
   - 社交传播，国际化

1.2 详细对比表

维度	微信	抖音	快手	B站	华为	Facebook
API前缀	wx.	tt.	ks.	bl.	hbs.	FBInstant
用户规模	10亿+月活	7亿+日活	3亿+日活	3亿+月活	华为生态	海外
首包限制	4MB	4MB	4MB	4MB	5MB	200MB
虚拟支付	✅	✅	✅	✅	✅	✅
激励视频广告	✅	✅	✅	✅	✅	✅
好友关系链	✅ 完整	有限	有限	有限	有限	有限
分享能力	✅ 强	中	中	弱	弱	中
子包	✅	✅	⚠️ 部分	⚠️ 部分	✅	❌
WebGL	✅	✅	✅	✅	✅	✅
开放数据域	✅	❌	❌	❌	❌	❌

生活类比：多平台适配就像"开连锁店"。同一个品牌，在商场（微信）、步行街（抖音）、社区（快手）、学校（B站）开店。产品核心一样，但每个地方的装修和运营要适配当地规则。

1.3 易踩的坑

跨平台常见坑：

1. API 命名差异
   微信：wx.login()       抖音：tt.login()
   微信：wx.showToast()   抖音：tt.showToast()
   看起来一样？注意参数可能不同！

2. 行为差异
   微信分享：wx.shareAppMessage() → 分享到聊天
   抖音分享：tt.shareAppMessage() → 可能分享到视频评论
   同一个API，行为不同！

3. 功能缺失
   微信有开放数据域（好友排行），其他平台没有
   → 需要降级方案：自己的服务器排行榜

4. 审核差异
   微信：审核3~7天，对虚拟支付管控严
   抖音：审核1~3天，对内容合规要求高
   → 发布前要了解各平台审核规则

---

二、跨平台适配

2.1 平台检测

class PlatformDetector {
  static detect() {
    if (typeof wx !== 'undefined' && wx.getSystemInfoSync) return 'wechat';
    if (typeof tt !== 'undefined' && tt.getSystemInfoSync) return 'bytedance';
    if (typeof ks !== 'undefined' && ks.getSystemInfoSync) return 'kuaishou';
    if (typeof bl !== 'undefined' && bl.getSystemInfoSync) return 'bilibili';
    if (typeof hbs !== 'undefined' && hbs.getSystemInfoSync) return 'huawei';
    if (typeof FBInstant !== 'undefined') return 'facebook';
    if (typeof window !== 'undefined') return 'web';
    return 'unknown';
  }

  static getInfo() {
    let platform = this.detect();
    switch (platform) {
      case 'wechat': return wx.getSystemInfoSync();
      case 'bytedance': return tt.getSystemInfoSync();
      case 'kuaishou': return ks.getSystemInfoSync();
      case 'huawei': return hbs.getSystemInfoSync();
      case 'facebook': return { platform: 'facebook', model: 'unknown', system: 'unknown' };
      case 'web': return { platform: 'web', model: 'browser', system: navigator.userAgent };
      default: return null;
    }
  }

  static isMiniGame() {
    return ['wechat', 'bytedance', 'kuaishou', 'bilibili', 'huawei', 'facebook'].includes(this.detect());
  }
}

2.2 平台抽象层

// 平台抽象层
class PlatformAdapter {
  constructor() {
    this.platform = PlatformDetector.detect();
    this.features = this.getFeatures();
  }

  getFeatures() {
    const featureMap = {
      wechat:    { payment: true, ads: true, socialRank: true, share: 'chat', subpackage: true },
      bytedance: { payment: true, ads: true, socialRank: false, share: 'video', subpackage: true },
      kuaishou:  { payment: true, ads: true, socialRank: false, share: 'dm', subpackage: false },
      bilibili:  { payment: true, ads: true, socialRank: false, share: 'weak', subpackage: false },
      huawei:    { payment: true, ads: true, socialRank: false, share: 'weak', subpackage: true },
      facebook:  { payment: true, ads: true, socialRank: false, share: 'link', subpackage: false },
      web:       { payment: false, ads: false, socialRank: false, share: 'link', subpackage: false },
    };
    return featureMap[this.platform];
  }

  // 登录（统一接口）
  async login() {
    switch (this.platform) {
      case 'wechat': return new Promise((res, rej) => wx.login({ success: res, fail: rej }));
      case 'bytedance': return new Promise((res, rej) => tt.login({ success: res, fail: rej }));
      default: return { code: 'mock' };
    }
  }

  // 排行榜（平台差异大，需要统一抽象）
  async getRanking(type) {
    if (this.features.socialRank) {
      // 微信：用开放数据域
      return this._getSocialRanking(type);
    } else {
      // 其他平台：用自己服务器的排行榜
      return this._getServerRanking(type);
    }
  }

  // 分享（统一接口，内部处理差异）
  share(config) {
    const shareImpl = {
      wechat: () => wx.shareAppMessage(config),
      bytedance: () => tt.shareAppMessage(config),
      facebook: () => FBInstant.shareAsync({ intent: 'REQUEST', image: config.imageUrl, text: config.title, data: config.query }),
      web: () => navigator.share?.({ title: config.title, url: location.href }),
    };
    return shareImpl[this.platform]?.();
  }

  // 创建激励视频广告
  createRewardedVideoAd(adUnitId) {
    switch (this.platform) {
      case 'wechat': return wx.createRewardedVideoAd({ adUnitId });
      case 'bytedance': return tt.createRewardedVideoAd({ adUnitId });
      case 'huawei': return hbs.createRewardedVideoAd({ adUnitId });
      case 'facebook': return FBInstant.getRewardedVideoAsync(adUnitId);
      default: return null;
    }
  }
}

const platform = new PlatformAdapter();
export default platform;

2.3 完整的平台抽象层架构

平台抽象层架构：

┌──────────────────────────────────────┐
│            游戏业务代码                │
│  只调用 Platform API，不直接调用 wx/tt │
├──────────────────────────────────────┤
│          平台抽象层（Adapter）          │
│  ├─ 登录适配                          │
│  ├─ 支付适配                          │
│  ├─ 广告适配                          │
│  ├─ 分享适配                          │
│  ├─ 存储适配                          │
│  └─ 音频适配                          │
├──────────────────────────────────────┤
│  wx │ tt │ ks │ bl │ hbs │ FB │ web  │
└──────────────────────────────────────┘

设计原则：
1. 统一接口：所有平台提供相同的方法签名
2. 优雅降级：某平台不支持的功能，提供降级方案
3. 平台特化：某个平台独有的功能，通过 feature flag 开关
4. 构建时剔除：用条件编译去掉不需要的平台代码，减少包体

2.4 构建配置

构建时平台适配（以 Webpack 为例）：

// webpack.config.js
const platform = process.env.PLATFORM || 'wechat';

module.exports = {
  resolve: {
    alias: {
      '@platform': path.resolve(__dirname, `src/platforms/${platform}`),
    },
  },
  define: {
    'process.env.PLATFORM': JSON.stringify(platform),
  },
};

目录结构：
src/
  platforms/
    wechat/
      adapter.js   ← wx.xxx 适配
      payment.js   ← 微信支付
    bytedance/
      adapter.js   ← tt.xxx 适配
      payment.js   ← 抖音支付
    web/
      adapter.js   ← Web 适配
      payment.js   ← 模拟支付
  game/            ← 业务代码，只 import '@platform/adapter'

构建命令：
PLATFORM=wechat npm run build   → 微信小游戏
PLATFORM=douyin npm run build   → 抖音小游戏
PLATFORM=web npm run build      → Web版

---

三、小游戏性能优化专项

3.1 性能指标与监控

性能指标：
1. 帧率（FPS）
   - 目标：60FPS
   - 最低：30FPS
   - 低于30FPS会明显卡顿

2. 帧时间（Frame Time）
   - 60FPS = 16.67ms/帧
   - 30FPS = 33.33ms/帧

3. 内存使用
   - 首包：建议<4MB
   - 运行时：建议<100MB

4. 启动时间
   - 冷启动：<3秒
   - 热启动：<1秒

class PerformanceMonitor {
  constructor() {
    this.frames = [];
    this.maxFrames = 60;
    this.lastTime = performance.now();
    this.fps = 0;
    this.frameTime = 0;
    this.memory = 0;
  }

  beginFrame() { this.frameStartTime = performance.now(); }

  endFrame() {
    let now = performance.now();
    let ft = now - this.frameStartTime;
    this.frames.push(ft);
    if (this.frames.length > this.maxFrames) this.frames.shift();
    this.frameTime = ft;
    this.fps = 1000 / (now - this.lastTime);
    this.lastTime = now;
    if (performance.memory) {
      this.memory = performance.memory.usedJSHeapSize / 1024 / 1024;
    }
  }

  getStats() {
    let avg = this.frames.reduce((a, b) => a + b, 0) / this.frames.length;
    return {
      fps: this.fps.toFixed(1),
      frameTime: this.frameTime.toFixed(2),
      avgFrameTime: avg.toFixed(2),
      memory: this.memory.toFixed(2)
    };
  }

  getWarnings() {
    let w = [];
    if (this.fps < 30) w.push('FPS过低，游戏卡顿');
    else if (this.fps < 55) w.push('FPS偏低，需要优化');
    if (this.frameTime > 33) w.push('帧时间过长');
    if (this.memory > 100) w.push('内存使用过高');
    return w;
  }
}

3.2 渲染优化

DrawCall 批处理

class DrawCallOptimizer {
  constructor() {
    this.batches = new Map();
  }

  addSprite(sprite) {
    let tid = sprite.texture.id;
    if (!this.batches.has(tid)) {
      this.batches.set(tid, { texture: sprite.texture, sprites: [] });
    }
    this.batches.get(tid).sprites.push(sprite);
  }

  render(renderer) {
    for (let [tid, batch] of this.batches) {
      renderer.setTexture(batch.texture);
      renderer.beginBatch();
      for (let sprite of batch.sprites) renderer.drawSprite(sprite);
      renderer.endBatch();
    }
    this.batches.clear();
  }
}

图集优化

class TextureAtlas {
  constructor(size = 2048) {
    this.size = size;
    this.textures = new Map();
    this.canvas = document.createElement('canvas');
    this.canvas.width = size;
    this.canvas.height = size;
    this.ctx = this.canvas.getContext('2d');
    this.packWidth = 0;
    this.packHeight = 0;
    this.rowHeight = 0;
  }

  addImage(name, image) {
    if (this.packWidth + image.width > this.size) {
      this.packWidth = 0;
      this.packHeight += this.rowHeight;
      this.rowHeight = 0;
    }
    if (this.packHeight + image.height > this.size) throw new Error('Atlas full');
    this.ctx.drawImage(image, this.packWidth, this.packHeight);
    this.textures.set(name, {
      x: this.packWidth, y: this.packHeight,
      width: image.width, height: image.height,
      u0: this.packWidth / this.size, v0: this.packHeight / this.size,
      u1: (this.packWidth + image.width) / this.size,
      v1: (this.packHeight + image.height) / this.size
    });
    this.packWidth += image.width;
    this.rowHeight = Math.max(this.rowHeight, image.height);
  }
}

3.3 内存优化

对象池（带重置函数）

class ObjectPool {
  constructor(createFn, resetFn, initialSize = 10) {
    this.createFn = createFn;
    this.resetFn = resetFn;
    this.pool = [];
    this.active = new Set();
    for (let i = 0; i < initialSize; i++) this.pool.push(this.createFn());
  }

  acquire() {
    let obj = this.pool.length > 0 ? this.pool.pop() : this.createFn();
    this.active.add(obj);
    return obj;
  }

  release(obj) {
    if (this.active.has(obj)) {
      this.active.delete(obj);
      this.resetFn(obj);
      this.pool.push(obj);
    }
  }

  releaseAll() {
    for (let obj of this.active) { this.resetFn(obj); this.pool.push(obj); }
    this.active.clear();
  }
}

let bulletPool = new ObjectPool(
  () => ({ x: 0, y: 0, vx: 0, vy: 0, active: false }),
  (bullet) => { bullet.x = 0; bullet.y = 0; bullet.vx = 0; bullet.vy = 0; bullet.active = false; },
  100
);

资源管理器（引用计数 + LRU）

class ResourceManager {
  constructor() {
    this.resources = new Map();
    this.loading = new Map();
    this.referenceCount = new Map();
    this.maxCache = 50 * 1024 * 1024;
    this.currentCache = 0;
  }

  async load(key, loader) {
    if (this.resources.has(key)) {
      this.referenceCount.set(key, (this.referenceCount.get(key) || 0) + 1);
      return this.resources.get(key);
    }
    if (this.loading.has(key)) return this.loading.get(key);
    let promise = loader().then(resource => {
      this.resources.set(key, resource);
      this.referenceCount.set(key, 1);
      this.loading.delete(key);
      this.currentCache += this.estimateSize(resource);
      return resource;
    });
    this.loading.set(key, promise);
    return promise;
  }

  release(key) {
    let count = this.referenceCount.get(key) || 0;
    if (count > 1) { this.referenceCount.set(key, count - 1); return; }
    let resource = this.resources.get(key);
    if (resource) {
      this.currentCache -= this.estimateSize(resource);
      this.resources.delete(key);
      this.referenceCount.delete(key);
    }
  }

  estimateSize(resource) {
    if (resource instanceof HTMLImageElement) return resource.width * resource.height * 4;
    if (resource instanceof ArrayBuffer) return resource.byteLength;
    return 0;
  }

  gc() {
    if (this.currentCache <= this.maxCache) return;
    let entries = Array.from(this.resources.entries());
    entries.sort((a, b) => (this.referenceCount.get(a[0]) || 0) - (this.referenceCount.get(b[0]) || 0));
    for (let [key, resource] of entries) {
      if (this.currentCache <= this.maxCache * 0.8) break;
      if ((this.referenceCount.get(key) || 0) === 0) this.release(key);
    }
  }
}

3.4 加载优化

分包加载

class SubpackageLoader {
  constructor() {
    this.loaded = new Set();
    this.loading = new Map();
  }

  async load(name) {
    if (this.loaded.has(name)) return true;
    if (this.loading.has(name)) return this.loading.get(name);
    let promise = this.doLoad(name);
    this.loading.set(name, promise);
    try { await promise; this.loaded.add(name); return true; }
    finally { this.loading.delete(name); }
  }

  async doLoad(name) {
    if (typeof wx !== 'undefined' && wx.loadSubpackage) {
      return new Promise((resolve, reject) => {
        wx.loadSubpackage({ name, success: resolve, fail: reject });
      });
    }
    // Web环境动态加载
    return new Promise((resolve, reject) => {
      let script = document.createElement('script');
      script.src = `subpackages/${name}/index.js`;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
}

资源预加载

class ResourcePreloader {
  constructor() {
    this.queue = [];
    this.loading = false;
    this.loaded = new Map();
    this.onProgress = null;
  }

  add(url, type = 'image') { this.queue.push({ url, type }); }

  async start() {
    if (this.loading) return;
    this.loading = true;
    let total = this.queue.length, loaded = 0;
    while (this.queue.length > 0) {
      let item = this.queue.shift();
      try { this.loaded.set(item.url, await this.loadItem(item)); }
      catch (e) { console.error(`Failed to load ${item.url}`, e); }
      loaded++;
      if (this.onProgress) this.onProgress(loaded / total, item.url);
    }
    this.loading = false;
    return this.loaded;
  }

  loadItem(item) {
    return new Promise((resolve, reject) => {
      if (item.type === 'image') {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = item.url;
      } else if (item.type === 'json') {
        fetch(item.url).then(r => r.json()).then(resolve).catch(reject);
      } else {
        fetch(item.url).then(r => r.arrayBuffer()).then(resolve).catch(reject);
      }
    });
  }
}

3.5 自动画质降级

class PerformanceOptimizer {
  constructor() {
    this.monitor = new PerformanceMonitor();
    this.quality = 'high';
    this.autoAdjust = true;
    this.targetFPS = 60;
  }

  startMonitoring() {
    let lastTime = performance.now(), frames = 0;
    let check = () => {
      frames++;
      let now = performance.now();
      if (now - lastTime >= 1000) {
        let fps = frames * 1000 / (now - lastTime);
        if (this.autoAdjust) this.adjustQuality(fps);
        frames = 0; lastTime = now;
      }
      requestAnimationFrame(check);
    };
    check();
  }

  adjustQuality(currentFPS) {
    if (currentFPS < this.targetFPS * 0.8) this.decreaseQuality();
    else if (currentFPS > this.targetFPS * 0.95 && this.quality !== 'high') this.increaseQuality();
  }

  decreaseQuality() {
    if (this.quality === 'high') { this.quality = 'medium'; this.applyMediumQuality(); }
    else if (this.quality === 'medium') { this.quality = 'low'; this.applyLowQuality(); }
  }

  applyHighQuality() { /* 全特效、高分辨率 */ }
  applyMediumQuality() { /* 减少粒子数量、降低阴影质量 */ }
  applyLowQuality() { /* 关闭后处理、降低渲染分辨率 */ }
}

---

自问自答

Q：需要为每个平台维护一份代码吗？ A：不需要。核心游戏逻辑和渲染代码是共享的，只有平台相关的 API 调用需要适配。通过平台抽象层，90%+ 的代码是共享的，只有 10% 的适配层不同。

Q：所有平台都要同时发布吗？ A：建议先做微信，验证游戏模型可行后再扩展到其他平台。每个平台都有审核成本和运维成本，同时维护太多平台会分散精力。

Q：小游戏引擎（Cocos/Laya）已经做了跨平台，还需要自己写适配层吗？ A：引擎提供了基础的跨平台能力，但业务层的适配（登录流程、支付对接、分享策略、排行榜实现）还是需要自己写。建议在引擎基础上再封装一层业务适配。

Q：Web 版有什么用？ A：Web 版是开发调试和测试的最佳环境。你可以在浏览器中快速开发调试，然后打包到各小游戏平台。Web 版也方便做网页试玩版（试玩广告）。

Q：抖音和微信的用户群体有什么区别？ A：微信用户覆盖全年龄段，社交传播强，适合休闲/社交类游戏。抖音用户偏年轻，内容传播强，适合创意/短视频传播类游戏。快手下沉市场用户多，B站二次元用户多。游戏类型要匹配平台用户特征。

Q：如何判断小游戏是否需要优化？ A：FPS低于55、帧时间超过20ms、内存持续增长、设备发热严重，都是优化信号。先用性能分析工具定位瓶颈：渲染问题减少DrawCall，内存问题使用对象池，加载问题分包预加载。

Q：如何平衡画质和性能？ A：提供画质选项、自动降级策略、根据设备性能调整。低端机自动关闭特效、降低分辨率，高端机开启全特效。

---

实践任务

• 任务1：实现一个平台抽象层，支持微信和抖音两个平台的登录、分享、支付 API
• 任务2：将你的游戏分别打包到微信和抖音平台，记录两个平台的审核差异和注意事项
• 任务3：为不支持开放数据域的平台实现服务器端排行榜，与微信版好友排行榜共存
• 任务4：设计一个条件编译方案，使构建时自动剔除非目标平台的代码，减少包体
• 任务5：对比同一游戏在微信和抖音的数据表现（留存、付费率、分享率），分析平台差异
• 任务6：实现一个性能监控器，实时显示 FPS、帧时间、内存占用，并在性能下降时自动降级画质
• 任务7：实现 DrawCall 批处理器，将同纹理的精灵合并为一次绘制调用
• 任务8：实现一个对象池系统，用于管理子弹、敌人等频繁创建销毁的对象

---

与其他章节的关联

本章内容	关联章节	关联点
平台API差异	第05章 微信小游戏开发	微信是适配的基础平台
分包策略	第05章 微信小游戏开发	不同平台子包支持不同
广告变现	第05章 微信小游戏开发	各平台广告SDK和规则不同
条件编译	4_1_game-architecture	构建系统设计的一部分
Web调试	2_2_h5-rendering-mastery	Web版是开发调试的基础环境
性能优化	2_3_browser-memory-mastery	内存管理和GC优化通用
渲染优化	2_2_h5-rendering-mastery	DrawCall和图集优化通用

---

上一章：05-微信小游戏开发 | 返回学习路线图