【心得】CocosCreator3.0.0 构建广告用playable单一Html

非常感谢你的回复,但原来我就发现,Audio是无法cc.assetManager.downloader.register拦截的。
因为Web平台最终还是会调用这个函数。https://forum.cocos.org/t/topic/122105

// 这个是player-web.ts文件
static loadNative (url: string): Promise<AudioBuffer> {

        return new Promise((resolve, reject) => {

            const xhr = new XMLHttpRequest();

            const errInfo = `load audio failed: ${url}, status: `;

            xhr.open('GET', url, true);

            xhr.responseType = 'arraybuffer';

            xhr.onload = () => {

                if (xhr.status === 200 || xhr.status === 0) {

                    audioContextAgent!.decodeAudioData(xhr.response).then((buffer) => {

                        resolve(buffer);

                    }).catch((e) => {});

                } else {

                    reject(new Error(`${errInfo}${xhr.status}(no response)`));

                }

            };

            xhr.onerror = () => { reject(new Error(`${errInfo}${xhr.status}(error)`)); };

            xhr.ontimeout = () => { reject(new Error(`${errInfo}${xhr.status}(time out)`)); };

            xhr.onabort = () => { reject(new Error(`${errInfo}${xhr.status}(abort)`)); };

            xhr.send(null);

        });

    }

// 所以我最后使用以下方法拦截。

function hookAudioHttp() {

    XMLHttpRequest.prototype.open = function (method, url, async, user, password) {

      this.url = url;

      Object.defineProperty(this, 'response', {

        get: function () { return this.data; },

        configurable: true

      });

    }

    XMLHttpRequest.prototype.send = function (body) {

      var data = window.assetsMap[this.url];

      this.data = decode(data);

      // this.response = decode(data);

      this.onload();

    }
  }

我有点好奇,几位的自定义ts文件是怎么加载的,我这里会跳到file://开头去,就加载失败了

大佬 可以给一套模板工具么 就是能直接使用的

这个文档已经写得挺清楚的了,你可以看一下,或者具体问题,具体提问。

大佬您有任何问题都能够提出来,
虽然我不一定能即时回,
但我之后有看到必会给您回复。

首先感谢大佬分享。
大佬给的信息挺清晰的,只是我卡在systemjs的路径那块,总是被引用到file:开头的路径,所以还在找方案解决中

这裡就如同我文章所说的,
systemjs预设读取档案是透过file://来寻找本机的档案,
您得魔改systemjs的systemjs.preload()方法,
来让他读取自己的脚本,
如果实在不知道怎麽实现这部分的话,
您可以直接下载我展示用的index.html,
参考裡面的写法来实现,
如果您之后还有其他问题,
欢迎您提出,
谢谢。

为了感谢楼主的文章在我开始做的时候给的参考。我给一下SystemJS的另一个思路,不需要修改SystemJS,只需要修改一下依赖方式。

  • 首先先看一下register接口,是有三个参数,第一个可以理解为是注册的key,第二个是个数组,可以理解为这个文件所依赖的其它文件,第三个就是本文件的内容了。
    System.register("", [], function(){});
  • 而我的修改就是:第一个参数和二个参数,以application.js为例,将文件路径改为chunks协议。(别问我这个协议怎么知道的,我是参考了一下bundle里面的index.js脚本,因为这个脚本就是使用的chunks协议,得来全不费功夫。)
    // application.js
    System.register([], function (_export, _context) {});
    // 增加key为"chunks:///application.js"
    System.register("chunks:///application.js", [], function (_export, _context) {});
  • 然后使用引用这个application.js的index.js文件,把文件路径改为chunk
    // index.js
    System.register(["./application.js"], function (_export, _context) {});
    // 修改为chunks协议
    System.register(["chunks:///application.js"], function (_export, _context) {});
  • 最后一步,既然这个application.js的整个加载方式我们都改了,那SystemJS只有一个key为chunks:///application.js的东西,那怎么找到这个文件呢,答案很简单,就是我们在index.html中把application.js手动引用进来。
    // index.html
    <script src="application.js" charset="utf-8"> </script>
  • 这样就大功告成了,其它文件也是相同的道理。
2赞

大佬,有兴趣更新一下github了嘛?

1赞

因为一些与公司的私事,
故暂时不会更新这项目了,
未来有机会的话,
会在考虑重启这项目。

1赞

mark~~~

好的~~~

Can it get bundles from the server? I have tried but no success. I need to build single html and load bundle from web to reduce file size.

我使用了這段代碼,但它無法在服務器上加載捆綁包。

香港人?。。。

是否有把bundle设置成远程包并且配置服务器地址

2
我已將資源放在 aaa 文件夾中,將其設置為 1 個捆綁包。在將平台構建為 Web 移動項目並將該捆綁包上傳到服務器之後。你可以看到下面的照片。我不知道我哪裡出錯了,在服務器上獲取捆綁包。