creator中TS如何引入jszip并使用

听说要import,试了一下,没软用,去官方也没找到一个像样的demo

import xxx require(“xxx”);

我是作为插件导入的,然后直接用
`JSZip.loadAsync(data).then( (zip)=> {
// …

});`

@499393815
import jszip = require(‘path to js file’)
jszip 是any类型, 能用, 没有提示;

我通过一个ZipUtil迂回的引用到了jszip,但是又出现一个问题,说的不清楚,直接上demo吧,望各位大佬能解惑JSZipTest.rar (1.1 MB)

补充一下代码已经跑到这一行了

但是出现报错

1、使用 npm 或者 yarn jszip
2、使用jszip2.6.0版本为好 经过测试 3.0的 async 版本 性能差 解压高达1秒 2.6.0只需 20ms
3、写一个压缩脚本 :

  var zip = new Zip();
  const data = fs.readdirSync('data')
  const jsons = zip.folder('jsons')
  for (const file of data) {
    jsons.file(`${file}`, fs.readFileSync(`data/${file}`))
}
var content = zip.generate({
    base64: false,
    type: 'uint8array',
    compression: 'DEFLATE',
    streamFiles: true
});
fs.writeFileSync("jsons.zip", content, 'binary');

生成的zip上传到服务器

3、下载服务器上的zip 并解压 搞定

    const JSZip = require('jszip');
    const zip = new JSZip();
    const data = await oft.rem.load(url, 'binary');
    console.info('下载用时:', Date.now() - starTime);
    const file = zip.load(data, {});、
    const keys = Object.keys(file.files);
    for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        if (key.indexOf('.json') >= 0) {
            const name = key.split('jsons/')[1].split('.')[0];
            this.data[name] = JSON.parse(file.files[key].asText());
        }
    }
    console.info('解压赋值总耗时:', Date.now() - starTime);

4、ok了

1赞

必须要用jszip来生成.zip吗?我用的是winrar,感觉我上面的报错是不是2个格式有冲突导致的

2.x版本没有async不会卡界面么?

解压就20ms 卡啥界面

最后的解压可以了吗兄弟

import JSZip from "jszip";

/**
 * 下载zip文件并解压
 */
export async function loadzip() {
  return new Promise((resolve, reject) => {
    // 远程加载 resources 文件夹下的 resources.zip 文件, 以二进制方式读取, 从远程服务器直接下载文件同理
    const url = cc.url.raw("resources/resources.zip");
    cc.loader.load({ url, type: "binary" }, async (error: Error, data: any) => {
      if (error) {
        reject(error);
      }

      try {
        // 这里打印出来发现已经转化成了 UInt8Array
        console.log(data);

        // 开始使用jszip操作数据
        const jsZip = new JSZip();
        const zip = await jsZip.loadAsync(data); // 解压 zip 包
        const { files } = zip; // 获取全部文件

        /**
         * 这里将 resources 目录的一张图片和一个json文件解压
         * 读取json文件内容
         * 并将HelloWorld.png渲染出来
         */

        /**
         * 读取json文件
         * 文件内容为
         * {
         *   "hello": "Hello JSZip"
         * }
         */
        if ("test.json" in files) {
          const text = await files["test.json"].async("text"); // jszip以文本形式读取文件内容
          const json = JSON.parse(text);
          console.log(json["hello"]); // 控制台输出 "Hello JSZip"
        }

        /**
         * 读取图片
         */
        if ("HelloWorld.png" in files) {
          const file = await files["HelloWorld.png"].async("base64"); // 以base64形式读取
          const imgData = "data:image/png;base64," + file; // 转化为 dataUrl

          // 将base64图片加载到一个image对象
          const img = new Image();
          img.src = imgData;

          // 并使用texture的 initWithElement方法将image对象转换为texture
          const texture = new cc.Texture2D();
          texture.initWithElement(img);
          texture.handleLoadedTexture();

          // 将texture渲染到画布中预先放置的 New Srpite 节点
          const sprite = cc.find("Canvas/New Sprite");
          sprite.setContentSize(texture.width, texture.height);
          sprite.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(
            texture
          );
        }
        resolve();
      } catch (err) {
        reject(err);
      }
    });
  });
}

yarn add jszip @types/jszip

之前有过这个想法, 把每个游戏关卡都打包成一个压缩包
试了一下文本和图片, 音频或者其他资源同理
jszip-test.zip (1.8 MB)

1赞

他最后的解压写错了, jszip.file应该是添加文件进压缩包吧, 压缩包内容在files中

方案很好,如果下载zip呢?你么有什么好的方案吗?cocos里的http貌似没办法拿到下载进度

嗯, 自己写xhr, 从请求头获取Content-Length

如果我是native游戏,需要自己写xhr+一套jsb 然后c++到两端的oc和java 吗?

刚试了一下

function downloadZip(item, callback) {
  const url = item.url;
  const xhr = cc.loader.getXMLHttpRequest(),
    errInfo = "Load binary data failed: " + url + "";
  xhr.open("GET", url, true);
  xhr.responseType = "arraybuffer";
  xhr.addEventListener("progress", (event: ProgressEvent) => {
    const progress = event.loaded / event.total;
    console.log(`加载进度: ${(progress * 100).toFixed(2)}%`);
  });
  xhr.onload = function() {
    var arrayBuffer = xhr.response;
    if (arrayBuffer) {
      var result = new Uint8Array(arrayBuffer);
      callback(null, result);
    } else {
      callback({ status: xhr.status, errorMessage: errInfo + "(no response)" });
    }
  };
  xhr.onerror = function() {
    callback({ status: xhr.status, errorMessage: errInfo + "(error)" });
  };
  xhr.ontimeout = function() {
    callback({ status: xhr.status, errorMessage: errInfo + "(time out)" });
  };
  xhr.send(null);
}

cc.loader.downloader.addHandlers({
  zip: downloadZip
});

这个就需要你自己搞了, 我没有做过native的还

好的,感谢你的回复。

jszip