数据预拉取

基础库 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更新)