Skip to content
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 37 additions & 64 deletions mini/api/基础API/缓存/周期性更新/数据预拉取.md
Original file line number Diff line number Diff line change
@@ -1,43 +1,22 @@
# 简介
预拉取能够在小程序冷启动的时候客户端向第三方服务器拉取业务数据,当页面打开时来获取数据可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 。

## 使用限制

- 支付宝客户端 10.2.36 版本,基础库 [2.7.11](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2) 开始支持,低版本需要做 [兼容处理](https://opendocs.alipay.com/mini/framework/compatibility)。
- 此 API 支持个人支付宝小程序、企业支付宝小程序使用。
预拉取能够在小程序冷启动的时候通过支付宝后台提前向第三方服务器拉取业务数据,当页面打开时可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1,到底是客户端拉取的,还是支付宝后台拉取的,原理搞清楚
2,当页面打开时可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 --- 重复啰嗦,因果混乱,语文角度优化下

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1,到底是客户端拉取的,还是支付宝后台拉取的,原理搞清楚 2,当页面打开时可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 --- 重复啰嗦,因果混乱,语文角度优化下
1、已咨询竟州,竟州说实际发起请求的是服务端,客户端也只是读取配置,透传给服务端。
2、已删除重复语句“从而提升小程序的打开速度”。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果是服务端发请求,是可以提前;但如果是小程序冷启动的时候才拉,走一遍支付宝服务端感觉反倒不划算。这个有点可疑,自己验证下

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

继续。github 早日清零


# 使用流程

## 配置文件
在小程序开发者工具 IDE 根目录创建 preload.json(自研小程序),该文件中填写预加载配置。<br />**注意:**
在 **小程序开发者工具** 根目录创建 preload.json(自研小程序),该文件中填写预加载配置。<br />**注意:**

- preload.json 最多支持配置 2048 个字节,超过大小IDE会提示超限。
- 模板实例化小程序的场景使用 ext 设置(见后面的配置说明)。

![](https://intranetproxy.alipay.com/skylark/lark/0/2021/png/185602/1632191030970-c4309ca7-edad-4f44-8e98-b73a5024b2ab.png#align=left&display=inline&height=313&margin=%5Bobject%20Object%5D&originHeight=313&originWidth=218&status=done&style=none&width=218)

### 属性说明
| **属性** | **类型** | **必填** | **说明** |
| --- | --- | --- | --- |
| fetchType | String | 否 | 请求类型。目前只支持 pre。<br />**默认值:**pre |
| params | Object | 是 | 解析配置的请求 |


#### params 对象属性说明
| **属性** | **类型** | **必填** | **说明** |
| --- | --- | --- | --- |
| url | String | 是 | 请求 URL。 |
| method | String | 否 | HTTP 请求方法。支持 GET、POST、DELETE、PUT。<br />**默认值:**GET |
| headers | Array | 否 | 自定义请求头。 |
| dataType | String | 否 | 期望返回的数据格式。支持 JSON、text、base64、arraybuffer。<br />**默认值:**JSON |
| data | Object | 否 | 请求的参数。<br />- 如果是 method 为 GET,会将参数做成 query拼接在 url 后。<br />- 如果 method 为 POST,将默认以 x-www-form-urlencoded 提交。<br /> |


### 配置示例

#### 自研小程序在 preload.json 配置
**注意:**实际的配置文件不支持注释,下面文件中的注释部分只是为了更好说明每个字段的作用,请在拷贝的时候从配置文件中删除。
```objectivec
**注意:** 实际的配置文件不支持注释,下面文件中的注释部分只是为了更好说明每个字段的作用,请在拷贝的时候从配置文件中删除。
```json
[
{
"fetchType": "pre", //配置pre
Expand All @@ -57,7 +36,8 @@
```

#### 模板小程序实例化时 ext 配置
如果同时在 ext 和 preload.json 配置,会优先读取 ext 的配置,如果 ext 没有配置,则读取 preload.json 的配置。<br />实际的配置文件不支持注释,下面文件中的注释部分只是为了更好说明每个字段的作用,请在拷贝的时候从配置文件中删除。
如果同时在 ext 和 preload.json 配置,会优先读取 ext 的配置,如果 ext 没有配置,则读取 preload.json 的配置。
<br />**注意:** 实际的配置文件不支持注释,下面文件中的注释部分只是为了更好说明每个字段的作用,请在拷贝的时候从配置文件中删除。
```json
"preload":
[
Expand All @@ -78,8 +58,24 @@
]
```

### 属性说明
| **属性** | **类型** | **必填** | **说明** |
| --- | --- | --- | --- |
| fetchType | String | 否 | 请求类型。枚举值:pre、jsapiPre。数据预拉取请使用 pre。<br /> **默认值:** pre |
| params | Object | 是 | 解析配置的请求 |


#### params 对象属性说明
| **属性** | **类型** | **必填** | **说明** |
| --- | --- | --- | --- |
| url | String | 是 | 请求 URL。 |
| method | String | 否 | HTTP 请求方法。支持 GET、POST、DELETE、PUT。<br /> **默认值:** GET |
| headers | Array | 否 | 自定义请求头。 |
| dataType | String | 否 | 期望返回的数据格式。支持 JSON、text、base64、arraybuffer。<br /> **默认值:** JSON |
| data | Object | 否 | 请求的参数。<br />- 如果是 method 为 GET,会将参数做成 query 拼接在 url 后。<br />- 如果 method 为 POST,将默认以 x-www-form-urlencoded 提交。<br /> |

## 请求数据
当用户打开小程序时,客户端会发起一个 http request,其中包含的 query 参数如下,数据获取到后会将整个 HTTP body 缓存到本地。
当用户打开小程序时,客户端将向开发者服务器(上面配置的数据下载地址)发起请求,其中包含的参数如下,数据获取到后会将整个 HTTP body 缓存到本地。

| **参数** | **类型** | **说明** |
| --- | --- | --- |
Expand All @@ -93,43 +89,20 @@


## 获取数据
通过调用 JSAPI getBackgroundFetchData  获取预加载的数据:
```typescript
my.getBackgroundFetchData({
fetchType: "pre",
success(res) {
console.log(res.fetchedData);
},
fail(res) {
console.log("getBackgroundFetchData fail: ", res)
通过调用 [my.getBackgroundFetchData](https://opendocs.alipay.com/mini/api/getBackgroundFetchData) 获取预加载的数据:
``` js
Page({
onReady() {
my.getBackgroundFetchData({
fetchType: "pre",
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
})
}
})
```

### 入参
Object 类型,属性如下:

| **属性** | **类型** | **必填** | **描述** |
| --- | --- | --- | --- |
| fetchType | String | 是 | 请求类型。<br />暂时只支持 pre。 |
| success | Function | 否 | 调用成功的回调函数。 |
| fail | Function | 否 | 调用失败的回调函数。 |
| complete | Function | 否 | 调用结束的回调函数(调用成功、失败都会执行)。 |


### success 返回值
| **属性** | **类型** | **描述** |
| --- | --- | --- |
| fetchType | String | 当前请求类型,目前只支持 pre。 |
| timestamp | Number | 客户端拿到缓存数据的时间戳。 |
| fetchedData | Object | 当前预加载的 response 数据。 |


### 错误码
| **错误码** | **说明** |
| --- | --- |
| 2 | 参数错误 |
| 3 | 没有预加载数据 |



```