CocosCreator中AssetsBundle部署和加载

一、资源包的区别 

1.微信小游戏子包

• 由【微信】提供的支持；
• 子包只能放资源，不能放代码；
• 子包只能放在腾讯的服务器上；
• 所有子包的总大小不能超过20M。

2.AssetsBundle资源包（简称：ab包）

• 由【引擎】提供的支持；
• 资源和代码都可以放在ab包中；
• ab包存放的服务器没有限制；
• ab包大小没有限制；
• 支持本地和远程两种方式。

（1）本地ab包

• 构建后在构建出的项目目录的assets目录中；
• 加载时传递包名即可；
• ab包中没有index.js文件。

（2）远程包

• 构建后在构建出的项目的根目录的remote目录中；
• 加载时需要通过url加载；
• ab包中有index.js文件。

二、在微信中使用远程包

1.将ab包配置成远程包

2.构建是需要添加远程ab包地址

【注意】

• 这里的地址配置是必须的，引擎会在这里的配置上自动追加“remote/” + 对于ab包名发起请求；
• 这里没有配置的话会有当前地址作为默认地址；

3.代码中加载远程包

loadRemoteBundle(bundleName: string) {
    // 这里的地址需要和构建配置一致，额外追加上“remote”
    // 构建那里配置的url引擎会自动追加“remote/”去请求资源
    // 两边地址不一样的话，就需要在服务器那里处理两种路由地址
    let url = 'http://192.168.1.22:3000/assets/remote/';
    const bundleUrl = url + bundleName;
    return new Promise((resolve, reject) => {
        assetManager.loadBundle(bundleUrl, (err, bundle: AssetManager.Bundle) => {
            if (err) {
                return reject(err);
            }
            resolve(bundle);
        });
    });
}

三、部署ab包服务器

1.参考下面的教程部署express服务器
部署Node.js的web服务器_nodejs打包部署web项目-CSDN博客文章浏览阅读951次。web服务器_nodejs打包部署web项目https://blog.csdn.net/Nick_Li_/article/details/103061238

 2.将下面的代码替换到index.js中

// webserver/index.js
const express = require('express')
const path = require('path')

const app = express()

let bundles = [
   "resources",
   "testMap",
   "testView",
];

for (let i = 0; i < bundles.length; i++) {
   const bundleName = bundles[i];
   const bundlePath = path.join(__dirname, 'public', 'remote', bundleName);
   const urlPath = '/assets/remote/' + bundleName;
   app.use(urlPath, express.static(bundlePath));
}

app.listen(3000, () => {
   console.log("启动成功：", `http://${getIpAddress()}:3000/project*`);
});

3.将构建出的remote目录放在public目录中

4.启动服务器

// 在服务器目录打开命令行，执行以下命令
node index.js

 5.调试

到这里就可以用微信开发者工具打开构建的微信小游戏项目进行调试了，示例中的两个页面即是testMap和testView这两个bundle包的资源