數(shù)據(jù)預(yù)取

基礎(chǔ)庫 1.0.0 開始支持本功能

在小程序冷啟動(dòng)時(shí)提前發(fā)起請(qǐng)求，并緩存請(qǐng)求內(nèi)容。

配置 app.json 文件

app.json 新增prefetches配置項(xiàng)，用于設(shè)置預(yù)請(qǐng)求的所有 url 的列表，該部分 url，會(huì)在進(jìn)入小程序后自動(dòng)發(fā)起請(qǐng)求(先于開發(fā)者代碼加載)。當(dāng)開發(fā)者再次發(fā)起 request 請(qǐng)求時(shí)可以增加usePreCache參數(shù)，如果配置的 prefetch 請(qǐng)求已返回，則會(huì)直接返回請(qǐng)求結(jié)果，如果配置的 prefetch 請(qǐng)求還未返回，則當(dāng)次 request 會(huì)繼續(xù)之前未發(fā)送完成的 request 請(qǐng)求。

// app.json
{
    prefetches:{
        //頁面路徑
        'pages/index/index': [
            //請(qǐng)求url
           'https://developer1.bytedance.com',
           'https://developer2.bytedance.com',
           'https://developer3.bytedance.com',
           ...
        ]
        ...
    }
}

目前限定最多配置10 個(gè)頁面，每個(gè)頁面最多5 個(gè)預(yù)取請(qǐng)求，開發(fā)者服務(wù)器接口返回?cái)?shù)據(jù)應(yīng)為字符串類型，且大小不超過256K。

配置項(xiàng)中可以增加變量，且該變量只能來自于打開小程序的調(diào)起協(xié)議中的 query。如：

// app.json
{
    prefetches:{
        //頁面路徑
        'pages/index/index': [
            //請(qǐng)求url
           'https://developer1.bytedance.com?id=${id}',
           'https://developer2.bytedance.com',
           'https://developer3.bytedance.com',
           ...
        ]
        ...
    }
}

打開小程序的協(xié)議中，也需要攜帶此參數(shù)：

pages/index/index?id=123

這樣，再次使用 request 發(fā)起請(qǐng)求時(shí)，就可以利用上 prefetches 中的配置。

調(diào)用 tt.request

tt.request 接口新增usePrefetchCache參數(shù)，返回?cái)?shù)據(jù)新增isPrefetch區(qū)分?jǐn)?shù)據(jù)是否為預(yù)取。

tt.request({
  url: "https://developer.bytedance.com",
  usePrefetchCache: true,
  success: res => {
    console.log("返回?cái)?shù)據(jù)是否來自預(yù)取:", res.isPrefetch);
    console.log("請(qǐng)求數(shù)據(jù):", res.data);
  }
});

Bug & Tip

• Tip：prefetches url 中的變量只在 url 中的 query 部分有效。 - developer.bytedance.com/mp/${id}中的${id}不會(huì)匹配打開小程序協(xié)議中的參數(shù)。 - developer.bytedance.com/mp#${id}中的${id}不會(huì)匹配打開小程序協(xié)議中的參數(shù)
• Tip：預(yù)請(qǐng)求 url 中參數(shù)處理邏輯與 tt.request 接口保持一致。

// app.json
{
    prefetches:{
        //頁面路徑
        'pages/index/index': [
            //請(qǐng)求url
           'https://developer.bytedance.com?a=${a}&b=$&c=${c}',
           ...
        ]
        ...
    }
}

信息流落地頁參數(shù)處理過程如下：

// 信息流落地頁配置

let a = "中國";
let b = encodeURIComponent("中國");
let c = encodeURIComponent(encodeURIComponent("中國"));
let pagePath = `pages/index/index?a=${a}&b=$&c=${c}`;
// pages/index/index?a=中國&b=%E4%B8%AD%E5%9B%BD&c=%25E4%25B8%25AD%25E5%259B%25BD

// pages/index/index.js

page({
  onLoad(option) {
    console.log(option.query.a); // 中國
    console.log(option.query.b); // 中國
    console.log(option.query.c); // encodeURIComponent('中國')

    let url =
      "https://developer.bytedance.com?a=${option.query.a}&b=${option.query.b}&c=${option.query.c}";
    // 'https://developer.bytedance.com?a=中國&b=中國&c=%E4%B8%AD%E5%9B%BD'
    tt.request({
      url: url,
      usePrefetchCache: true,
      success(res) {
        console.log(`request調(diào)用成功 ${res}`);
      },
      fail(res) {
        console.log(`request調(diào)用失敗`);
      }
    });

    // tt.request 會(huì)對(duì)url中參數(shù)做urlencode，已encode的參數(shù)不會(huì)重復(fù)urlencode
    // tt.request 請(qǐng)求開發(fā)者服務(wù)器的url
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%E4%B8%AD%E5%9B%BD'

    // 預(yù)請(qǐng)求url參數(shù)處理邏輯與tt.request保持一致
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%E4%B8%AD%E5%9B%BD'
  }
});

分享參數(shù)傳遞如下：

// pages/index/index.js

onShareAppMessage() {
    let a = '中國';
    let b = encodeURIComponent('中國');
    let c = encodeURIComponent(encodeURIComponent('中國'));
    let pagePath = `pages/index/index?a=${a}&b=$&c=${c}`;
    // pages/index/index?a=中國&b=%E4%B8%AD%E5%9B%BD&c=%25E4%25B8%25AD%25E5%259B%25BD

    return {
        title: 'title',
        desc: 'desc',
        path: pagePath,
        imageUrl: 'https://e.com/e.png',
        success() {
        },
        fail() {
        },
    };
}

// 通過分享落地頁打開小程序
// pages/index/index.js

page({
  onLoad(option) {
    console.log(option.query.a); // 中國
    console.log(option.query.b); // encodeURIComponent('中國')
    console.log(option.query.c); // encodeURIComponent(encodeURIComponent('中國'))

    let url =
      "https://developer.bytedance.com?a=${option.query.a}&b=${option.query.b}&c=${option.query.c}";
    // 'https://developer.bytedance.com?a=中國&b=%E4%B8%AD%E5%9B%BD&c=%25E5%258C%2597%25E4%25BA%25AC'
    tt.request({
      url: url,
      usePrefetchCache: true,
      success(res) {
        console.log(`request調(diào)用成功 ${res}`);
      },
      fail(res) {
        console.log(`request調(diào)用失敗`);
      }
    });

    // tt.request 會(huì)對(duì)url中參數(shù)做urlencode，已encode的參數(shù)不會(huì)重復(fù)urlencode
    // tt.request 請(qǐng)求開發(fā)者服務(wù)器的url
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%25E5%258C%2597%25E4%25BA%25AC'

    // 預(yù)請(qǐng)求url參數(shù)處理邏輯與tt.request保持一致
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%25E5%258C%2597%25E4%25BA%25AC'
  }
});