微信小游戏资源管理

原文章
http://home.51.com/1995494247/diary/w

理解

## 微信runtime架构

## 小游戏资源加载与浏览器的差异

## 结论

### 差异一
小游戏包内：所有引擎和游戏脚本
其他资源：cdn上

### 差异二
对于从远程服务器下载的文件，小游戏环境没有浏览器的缓存以及过期更新机制
浏览器对于用户已经访问过的资源，会进行缓存，再次访问时，会优先从缓存获取，而不是发送请求给服务端，这样可以尽可能减少网络使用，优化页面响应速度。

### 微信提供接口：
微信小游戏环境所提供的接口则是更为基础的文件系统接口

wx.downloadFile：下载文件到缓存文件

wx.saveFile：保存缓存文件

FileSystemManager.access：判断文件/目录是否存在

FileSystemManager.readFile：读取本地文件内容

FileSystemManager.unlink：删除文件

### Cocos Creator 的资源管理方案

首先，微信内将小游戏的文件存储空间按照用户和游戏来划分：
#### 检测
上面的文件系统接口，都是在这个文件沙盒环境中执行的，所有的文件目录也是相对于沙盒环境的，所以我们不用担心不同小游戏或者不同用户之间的文件冲突。
在这个前提之下，Cocos Creator 打包的小游戏版本中我们提供了一个 wxDownloader 对象，用户可以给它设置 REMOTE_SERVER_ROOT 属性。而资源的加载流程如下：
1. 检查资源是否在小游戏包内
2. 不存在则查询本地缓存资源
3. 如果没有缓存就从远程服务器下载
4. 下载后保存到小游戏应用缓存内供再次访问时使用（按照资源相对路径保存）

只要用户保证 REMOTE_SERVER_ROOT 路径下的资源相对路径与 Cocos Creator 发布的资源相对路径一致，那么再次访问同一个资源时，就会在小游戏的文件沙盒环境中找到对应的文件。这样就足够支撑游戏资源的加载和缓存需求了。

#### 更新
那么我们如何做到资源的更新呢？假设服务端资源内容更新了，而 url 没有变化，那么我们还是会优先使用缓存中的资源，岂不是就没有得到更新？的确如此，那么我们解决问题的思路，并不是从资源文件内容是否变化来判断，而是一旦内容变化就修改文件的 url。这点就依赖于 Cocos Creator 打包时的 md5Cache 功能，这个功能会在打包时给所有资源文件的文件名附加 md5 后缀，比如 example.png 变成 example.23j8s1.png，一旦文件内容变化，它的 md5 后缀自然会发生变化。而所有资源文件的相对路径，实际上是在运行时由 AssetLibrary 从 settings.js 中解析出来的。
所以开发者只要更新了新的小游戏包，包含最新版本的 settings.js，那么所有资源的路径就得到了更新，自然会从服务端请求最新版本的资源。由此还可引申出多版本共存的方案，就是不同版本的游戏，指向不同的 REMOTE_SERVER_ROOT 服务器路径，可以保障不同版本都可以访问，并且不会出现资源的冲突或缺失。
至此，Cocos Creator 对小游戏资源管理中，远程资源加载和更新就解释清楚了，虽然我们不希望用户感知到浏览器和小游戏环境的差异，不可否认的是，资源管理方面，用户仍然需要了解更多的细节，才能够更好保障自己的小游戏所带来的用户体验。

### Egret  的资源管理方案
在微信小游戏项目中，Egret提供了file-util.js、image.js、text.js来控制微信的50M缓存
重构file-util.js、image.js、text.js

如果是远程目录，检测需不需要缓存，需要就加载，然后写入缓存
```
function download(url, target) {

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

        if (fileutil.fs.existsSync(target)) {
            console.log('已缓存的资源:', "web资源：" + url, "本地资源：" + target)
            resolve();
        }
        else {
            const dirname = path.dirname(target);
            fileutil.fs.mkdirsSync(dirname)
            target = wx.env.USER_DATA_PATH + '/' + target;
            console.log('开始加载:', url)
            wx.downloadFile({
                url: url,
                filePath: target,
                success: (v)=>{
                  if (v.statusCode >= 400){
                    const message = `加载失败:${url}`;
                    console.error(message)
                    reject(message);
                  }
                  else{
                    resolve()
                  }               
                },
                fail: (e) => {
                    console.error(e)
                    reject()
                }
            })
        }
    })
}

```

xitem/98405.html