跳至正文

Egret引擎的RES.getResByUrl方法在微信小游戏平台的实现流程

一 如何适配微信小游戏平台

Egret引擎构建微信小游戏版本后,会在library目录下生成image.js文件,通过重写ImageProcessor类来适配微信小游戏平台,以代替默认的图片加载器。
示例代码如下。

const processor = new ImageProcessor();
RES.processor.map("image", processor);

二 主要接口

image.js主要实现了以下3个接口。

  • onLoadStart 所有的图片加载最终都会进入这个函数,并实现了简单的缓存机制。
  • loadImage 加载本地或远程图片。
  • download 调用wx.downloadFile下载文件。

2.1 onLoadStart

onLoadStart是最重要的接口,它的内部逻辑是:
1、判断要加载的资源是本地还是远程?如果本地,直接调用 loadImage,否则下一步;
2、判断是否属于缓存目录?如果不是,直接调用 loadImage,否则下一步;
3、根据路径查询预定义的映射表,得到对应的缓存目录,从而判断缓存文件是否存在?如果存在,直接调用 loadImage,否则下一步;
4、调用download 接口下载文件到缓存目录,成功后,再调用 loadImage 把该文件从缓存目录加载到内存。

onLoadStart的精简代码如下所示。

onLoadStart(host, resource) {
        let imageSrc = root + url;
        if (RES['getVirtualUrl']) {
            imageSrc = RES['getVirtualUrl'](imageSrc);
        }

        if (!path.isRemotePath(imageSrc)) { //判断是本地加载还是网络加载
            //正常本地加载
            return loadImage(imageSrc, scale9Grid);

        }
        if (!needCache(root, url)) {
            //无需缓存加载
            return loadImage(imageSrc, scale9Grid);
        }
        //通过缓存机制加载
        const fullname = path.getLocalFilePath(imageSrc);
        if (fs.existsSync(fullname)) {
            return loadImage(path.getWxUserPath(fullname), scale9Grid);
        } else {
            return download(imageSrc, fullname).then((filePath) => {
                fs.setFsCache(fullname, 1);
                return loadImage(filePath, scale9Grid);
            }, (error) => {
                console.error(error);
                return;
            });
        }
    }

2.2 download

image.download的实现逻辑是:
1、根据 onLoadStart 中得到的缓存目录,递归创建目录。例如,假设待下载图片的url是 http://localhost:8080/test1.jpg,先被格式化成 http/localhost/8080/test1.jpg,代表对应的缓存目录。如果目录不存在,则先递归创建以下3个目录:
- http/
- http/localhost/
- http/localhost/8088/

2、此时可知,本次下载的目标缓存路径是:WX_ROOT/http/localhost/8080/test1.jpg。然后调用wx.downloadFile把远程文件下载到该路径。

其中WX_ROOT代表微信的本地缓存根目录,在Mac版微信开发者工具中的路径是:/Users//Library/Application Support/微信开发者工具/50a7d9210159a32f006158795f893857/WeappSimulator/WeappFileSystem,其中,代表自己的本机账户名。

2.3 loadImage

loadImage实现非常简单,大概是这样:

const image = wx.createImage();
image.src = imageURL

其中imageURL可以是本地或远程路径。

标签:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注