Skip to content

Update 数据预拉取.md #2396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update 数据预拉取.md #2396

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
229d048
Update 数据预拉取.md
yangge19970923 Apr 24, 2023
9853212
Update 数据预拉取.md
yangge19970923 May 11, 2023
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
81 changes: 27 additions & 54 deletions mini/api/基础API/缓存/周期性更新/数据预拉取.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# 简介
预拉取能够在小程序冷启动的时候客户端向第三方服务器拉取业务数据，当页面打开时来获取数据可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度 。
预拉取能够在小程序冷启动时通过支付宝客户端提前向第三方服务器拉取业务数据，有助于更快地渲染页面，减少用户等待时间。

## 使用限制

Expand All @@ -9,48 +9,48 @@
# 使用流程

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

- preload.json 最多支持配置 2048 个字节，超过大小IDE会提示超限。
- 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 | 是 | 解析配置的请求 |
| fetchType | String | 否 | 请求类型。可选值：pre、jsapiPre。<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 /> |
Copy link
Contributor

Choose a reason for hiding this comment

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

这里为啥要删掉？验证过了没这个功能吗？

| method | String | 否 | HTTP 请求方法。支持 GET、POST、DELETE、PUT。<br />**默认值：** GET <br />**注意：** 当请求方法为 POST、PUT 时，目前发起请求时并未在 query 中追加 appId、timestamp 参数。 |
| headers | Array | 否 | 自定义请求头。<br />默认 {"content-type": "application/json"} 。 |
| dataType | String | 否 | 期望返回的数据格式。支持 JSON、text、base64、arraybuffer。<br />**默认值：** JSON |
| data | Object | 否 | 请求的参数。|


### 配置示例

#### 自研小程序在 preload.json 配置
**注意：**实际的配置文件不支持注释，下面文件中的注释部分只是为了更好说明每个字段的作用，请在拷贝的时候从配置文件中删除。
```objectivec
**注意：** 实际的配置文件不支持注释，下面文件中的注释部分只是为了更好说明每个字段的作用，请在拷贝的时候从配置文件中删除。
```json
[
{
"fetchType": "pre", //配置pre
"fetchType": "pre", //配置 pre。
"params": {
"url": "https://*****", //http请求的URL地址
"method": "POST", // http method，支持GET/POST/DELETE/PUT
"data": { //可选。请求的参数，如果是method为GET，会将参数做成query拼接在url后
"url": "https://*****", // http 请求的 URL 地址。
"method": "POST", // http method，支持 GET、POST、DELETE、PUT。
"data": { //可选。请求的参数，如果是 method 为 GET，会将参数做成 query 拼接在 url 后。
"foo": "bar"
},
"headers": { //可选。额外的header信息。
"headers": { //可选。额外的 header 信息。
"token":"xxx"
},
"dataType": "json" //期望返回的数据格式，默认 JSON，支持 JSON、text、base64、arraybuffer
"dataType": "json" //期望返回的数据格式，默认 JSON，支持 JSON、text、base64、arraybuffer。
}
}
]
Expand All @@ -62,38 +62,39 @@
"preload":
[
{
"fetchType": "pre", //配置pre
"fetchType": "pre", //配置 pre。
"params": {
"url": "https://*****", //http请求的URL地址
"method": "POST", // http method，支持GET/POST/DELETE/PUT
"data": { //可选。请求的参数，如果method为GET，会将参数做成query拼接在url后
"url": "https://*****", // http 请求的 URL 地址。
"method": "POST", // http method，支持 GET、POST、DELETE、PUT。
"data": { //可选。请求的参数。
"foo": "bar"
},
"headers": { //可选。额外的header信息。
"headers": { //可选。额外的 header 信息。
"token":"xxx"
},
"dataType": "json" //期望返回的数据格式，默认 JSON，支持 JSON、text、base64、arraybuffer
"dataType": "json" //期望返回的数据格式，默认 JSON，支持 JSON、text、base64、arraybuffer。
}
}
]
```

## 请求数据
当用户打开小程序时，客户端会发起一个 http request，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地。
小程序启动时，客户端按配置向目标 URL 发起请求，并在 query string 中自动追加以下参数：

| **参数** | **类型** | **说明** |
| --- | --- | --- |
| appId | String | 小程序的 APPID。 |
| timestamp | Long | 请求发起的时间戳。 |
| timestamp | Number | 请求发起的时间戳。 |

除上述字段外还包括 preload.json 配置文件中 data 的数据，例如以下参数：

| foo | String | 业务自定义参数，key 和 value 为配置文件中的对应值 {"foo":"bar"}。 |
| --- | --- | --- |

数据请求的 response body 将被缓存，供小程序获取。

## 获取数据
通过调用 JSAPI getBackgroundFetchData  获取预加载的数据：
通过调用 JSAPI [my.getBackgroundFetchData](https://opendocs.alipay.com/mini/api/getBackgroundFetchData?pathHash=aee9ff99) 获取预拉取的数据：
Copy link
Contributor

Choose a reason for hiding this comment

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

JSAPI -> 小程序 API

```typescript
my.getBackgroundFetchData({
fetchType: "pre",
Expand All @@ -105,31 +106,3 @@ my.getBackgroundFetchData({
}
})
```

### 入参
Object 类型，属性如下：

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


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


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