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可以是本地或远程路径。