文档

# 数据预拉取

基础库 1.14.0 版本开始支持。

为了满足开发者对小程序首屏速度支持秒开，loading界面完成后马上就能展示首页数据的需求。所以框架上提供数据预拉取和CDN资源预加载2种首屏数据预加载能力。

数据预拉取和CDN预加载在一些体验上有差异，核心差异点如下：

数据预拉取 CDN资源预加载
适用场景 适用于动态数据。每位用户展示的数据和内容不同，适合用于差异化内容的预加载。 适用于静态数据，如图片,音频资源等。每位用户数据和内容一样，适合通用内容的预加载。
接入流程 开发者管理端配置即可使用。配置入口：开发者管理端 -> 设置 -> 开发设置 -> 数据预拉取 开发者管理端完成配置即可使用。设置入口：开发者管理端 -> 设置 -> 开发设置 -> CDN资源预加载

数据预拉取能够在小程序冷启动的时候通过QQ后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度。

# 使用流程

# 1. 配置数据下载地址

登录小程序管理后台，进入设置 -> 开发设置 -> 数据预拉取，点击启用，填写数据下载地址，只支持 HTTPS。

数据预拉取

# 2. 设置 TOKEN

第一次启动小程序时，调用 qq.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续 QQ 客户端向开发者服务器请求时带上，便于给后者校验请求合法性。

示例：

App({
  onLaunch() {
    qq.setBackgroundFetchToken({
      token: "xxx"
    });
  }
});
1
2
3
4
5
6
7

# 3. QQ 客户端提前拉取数据

当用户打开小程序时，QQ 服务器将向开发者服务器（上面配置的数据下载地址）发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地。

属性 类型 必填 说明
appid String 是 小程序标识
token String 否 前面设置的 TOKEN
code String 否 用户登录凭证，未设置 TOKEN 时由QQ侧预生成，可在开发者后台调用 auth.code2Session，换取 openid 等信息
timestamp Number 是 时间戳，QQ客户端发起请求的时间
path String 否 打开小程序的路径
query String 否 打开小程序的 query
scene Number 否 打开小程序的场景值

query 参数会使用 urlencode 处理

token 和 code 只会存在一个，用于标识用户身份

开发者服务器接口返回的数据类型应为字符串，且大小应不超过 256KB，否则将无法缓存数据

# 4. 读取数据

用户启动小程序时，调用 qq.getBackgroundFetchData() 获取已缓存到本地的数据。

示例：

App({
  onLaunch() {
    qq.getBackgroundFetchData({
      fetchType: "pre",
      success(res) {
        console.log(res.fetchedData); // 缓存数据
        console.log(res.timeStamp); // 客户端拿到缓存数据的时间戳
        console.log(res.path); // 页面路径
        console.log(res.query); // query 参数
        console.log(res.scene); // 场景值
      }
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5. 调试方法

正式版开发者工具预计在2020年11月底支持调测，此前请使用指定版本进行调测。开发者工具Nightly Build版 (2020.10.12更新)

← CDN资源预加载 →