微信小游戏分包加载

摘要

随着游戏的代码量与资源增多，微信小游戏的 4M 资源空间已经无法满足需求。那么如何解决这个问题呢？分包加载能让 4M 变为 8M！

正文

什么是分包加载

分包加载，即把游戏内容按一定规则拆分在几个包里，在首次启动时加载主包，然后在主包内触发下载其他子包，这样可以有效降低首次启动的消耗时间。在 CocosCreator 中，分包从 v2.0.7 开始支持。

如何使用分包

KUOKUO 在这里用实际操作来详细讲解。
首先我创建了两个场景，load 与 game 场景，在两个场景的画布节点上分别绑定了 load.js 与 game.js 脚本。
为了让子包大一些，我复制了十几份图片，拖入到 game 场景中，如图。

图片资源都在 res 文件夹中，我们点选 res 文件夹。就能在右侧属性面板上配置子包，注意要记住你为其起的名字，子包加载的 API 不看文件夹名字，看的是你配置的名字，所以我这里习惯起一个一样的名字，如图。

Game脚本

为了知道何时进入 game 游戏场景，我在 game.js 中这样写的。

Load脚本

子包加载的方法，我们可以选择用 CocosCreator 的，也可以用微信的。两者区别就是，微信的带进度回调，而 CocosCreator 的只有一个完成回调。
我们先看 CocosCreator 的怎么用。

// 官方示例代码
cc.loader.downloader.loadSubpackage('01_graphics', function (err) {
    if (err) {
        return console.error(err);
    }
    console.log('load subpackage successfully.');
});

官方给出了加载一个子包的代码，但是如果多个子包呢？怎么确认都加载完了呢？找一个标志量呗！来看 KUOKUO 给的示例。

如果再来一个子包，判断条件改一下就行了。学会了吧^.！

加载效果

微信API

效果实现了，但是我们获取不到进度。
我们来看微信的API怎么用的。

// 官方示例代码
const loadTask = wx.loadSubpackage({
  name: 'stage1', // name 可以填 name 或者 root
  success: function(res) {
    // 分包加载成功后通过 success 回调
  },
  fail: function(res) {
    // 分包加载失败通过 fail 回调
  }
})

loadTask.onProgressUpdate(res => {
  console.log('下载进度', res.progress)
  console.log('已经下载的数据长度', res.totalBytesWritten)
  console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})

与 CocosCreator 不同的是，它可以有回调监听。怎么用呢？来看 KUOKUO 给的示例。

是不是没那么难！