LiesAuer的 RSS 预览

OPPO 快游戏在浏览器复现运行（四）之游戏入口加载

2025-12-17 00:05:56

OPPO 快游戏在浏览器复现运行（三）之 require 函数

2025-12-16 23:29:00

本质上，快游戏框架是基于V8引擎魔改出来的，因此天然支持`require`函数，但在 Web 中实现这个功能就不简单了，第一版的方案是想着将`main.js`作为模块在最顶级加载，然后通过将所有的`require`调用都改为`await`。
```js
await require("./libs/min/laya.core.min.js");
await require("./libs/min/laya.ani.min.js");
await require("./libs/min/laya.ui.min.js");
```

```js
async function require(url) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = false;
    script.defer = false;
    script.src = url;
    await new Promise((resolve, reject) => {
        script.onload = () => {
            script.remove();
            resolve();
        };
        script.onerror = () => {
            script.remove();
            reject();
        };
        document.body.constructor.prototype.appendChild.apply(document.body, [script]);
    });
}
```

一开始，这个方案也是走得通的，对于一些简单的游戏改的方便，加载也是没啥问题的，但是随着接触的快游戏越来越多，这个方案就越发难走下去，主要有两个问题：

1. 对原代码侵入性太大，特别是对于加密混淆过的代码来说，改起来比登天难
2. 游戏初始化复杂性导致异步加载的方案始终会面临运行顺序差异导致的运行异常

特别是第二点，直接影响了`web.sdk.js`能否继续搞下去，因此异步加载的方案就毙了，必须走同步的形式，而同步加载第一个难点就是如何在浏览器中同步获取到压根没加载的JS代码呢？难不成在`web.sdk.js`之前先把所有的JS代码以字符串形式打包进去吗？不需要！！！不知道你们是否还记得上一篇文章中提到过得文件系统，回顾请看 → [OPPO 快游戏在浏览器复现运行（二）之文件系统](https://www.liesauer.net/blog/post/1007.html "OPPO 快游戏在浏览器复现运行（二）之文件系统")，而这个文件系统是带了同步 + 异步两套 API 的，那么就让我想到了一个非常有意思的方案。

在`web.sdk.js`初始化阶段，我们可以先通过异步 API 将整个游戏“安装”到浏览器中，而底层存储自然就通过 IndexedDB 来做了，让整个启动流程像打开 APP 一样，第一次先安装再打开的过程。“安装”完过后，我们就可以通过同步 API 将游戏的JS代码以同步的形式读取出来了。

读取问题解决了，那就剩下加载问题了，这里我们就需要在 Web 端把 NodeJS 中的`require`函数复刻出来了，这个的话有太多的现成库作参考了，这里我就使用了阮一峰老师的 [tiny-browser-require](https://github.com/ruanyf/tiny-browser-require/blob/master/require.js "tiny-browser-require") 作为基础并针对快游戏做了一定的适配。

至此，`require`也算是比较“完美”的实现了，当然和原版`require`还是差很远的，比如寻路规则、循环依赖、加载缓存等等问题都没处理，但对于快游戏来说目前是够用了。

这也是这个项目最迷人的地方，所有的东西都是环环相扣的，少一样都不行，一旦把他们联通起来，那种茅塞顿开的感觉太妙了。

收一个 Reqable 永久版订阅

2025-11-25 23:07:00

利用零宽字符制作PushMe HTML消息摘要

2025-09-06 10:18:05

在使用 PushMe 推送 HTML 消息时，由于 PushMe 默认生成的消息摘要是自动提取的，在很多时候这个摘要并没有起到什么作用，特别是有表格等复杂数据时，如下图。

![2025-09-06_094116.png](https://storage.liesauer.net/2025/09/2836068499.png)

然后想着试下利用摘要不解析 HTML 的这个特性，使用一段`display:none`的文字作为消息摘要，在点进去正文时，解析 HTML 后也会看不见这段摘要。

刚开始尝试使用超多的` `将正文部分推到很后的地方，摘要为摘要，正文为正文，但是自动提取出来的摘要会将连续空格转为单个，还是会导致正文出现在摘要里。

示例消息
```html
<div>这是简介     </div>
<div>HTML</div>
```

然后又想到了零宽字符，看下会不会将零宽字符也转成单个空格，由于我博客不好插入能显示且能复制的零宽字符，所以就只能将方法放出来，自己操作一遍了，利用这个工具生成零宽字符:point_right: [零宽字符生成工具](https://yuanfux.github.io/zero-width-web/ "零宽字符生成工具")。

![810ada0c-e874-4a34-88b2-4c2a60c08859.png](https://storage.liesauer.net/2025/09/328756070.png)

当你正确生成且复制，内容应该是这样的，我们保留零宽字符部分即可
![PixPin_2025-09-06_10-04-33.png](https://storage.liesauer.net/2025/09/857080392.png)

为了填充足够的摘要，不让正文显示出来，我们需要把整段零宽字符复制 15-20 遍，然后最终成品长这样
![PixPin_2025-09-06_10-11-40.png](https://storage.liesauer.net/2025/09/335402725.png)

最终在 PushMe 的展示效果如下，就非常的 nice。
![2025-09-06_101310.png](https://storage.liesauer.net/2025/09/839058513.png)

![2025-09-06_101333.png](https://storage.liesauer.net/2025/09/3474265316.png)

Navicat Premium Lite 官方免登录版本（17.0）

2025-08-26 14:31:00

OPPO 快游戏在浏览器复现运行（二）之文件系统

2025-08-18 22:44:26

快游戏/快应用其实和普通的应用是类似的，除了不用安装以及环境不一样外，他们都是有“包”的概念，也就是启动快游戏后都是从包内读取并加载资源（js、其他资源）。

内容加载一般分几种情况：
1. 入口js、框架js等，一般是直接通过 require 方法加载
2. 固定资源（部分js、配置文件、初始资源等）一般是通过文件系统的 readFile 从包中加载
3. 热资源（动态资源、动态js等）一般是通过 xhr 远程加载
4. 某些框架也是会通过 readFile 进行远程加载

其中除了 readFile 加载本地资源外，require、readFile 远程加载都存在巨多坑，后面会专门讲。

根据快游戏的开发文档，文件系统是有同步+异步API的，因此在 web 端实现也得同步兼容，而浏览器自带的 [IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API "IndexedDB") 天生自带两套API，因此使用 [IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API "IndexedDB") 作为底层存储就成为了不二之选，当然也不可能纯从零手撸一个 FS 出来，中间层则使用 [ZenFS](https://github.com/zen-fs/core "ZenFS") 做链接，在此之上封装出整套 [文件管理器](https://developer.huawei.com/consumer/cn/doc/quickApp-References/quickgame-api-file-0000001084194212#section10341171144119 "文件管理器") API，也得益于 [ZenFS](https://github.com/zen-fs/core "ZenFS") 开发地完善，接口高度相似，因此封装起来没花费多少时间，而这里的坑也是目前来说最少的地方。其他的地方简直一言难尽:astonished:。

![PixPin_2025-08-18_17-10-05.png](https://storage.liesauer.net/2025/08/759210426.png)

LiesAuer修改

LiesAuer的 RSS 预览

该作者的社会化媒体

LiesAuer 修改