今日頭條小程序數據預取

基礎庫 1.46.0 開始支持本功能

在小程序冷啟動時提前發起請求，并緩存請求內容。

app.json 新增prefetches配置項，用于設置預請求的所有 url 的列表，該部分 url，會在進入小程序后自動發起請求(先于開發者代碼加載)。當開發者再次發起 request 請求時可以增加usePreCache參數，如果配置的 prefetch 請求已返回，則會直接返回請求結果，如果配置的 prefetch 請求還未返回，則當次 request 會繼續之前未發送完成的 request 請求。

// app.json{    prefetches:{        //頁面路徑        "pages/index/index": [            //請求url           "https://developer1.bytedance.com",           "https://developer2.bytedance.com",           "https://developer3.bytedance.com",           ...        ]        ...    }}

目前限定最多配置10 個頁面，每個頁面最多5 個預取請求，開發者服務器接口返回數據應為字符串類型，且大小不超過256K。

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

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

打開小程序的協議中，也需要攜帶此參數：

pages/index/index?id=123

這樣，再次使用 request 發起請求時，就可以利用上 prefetches 中的配置。

tt.request 接口新增usePrefetchCache參數，返回數據新增isPrefetch區分數據是否為預取。

tt.request({  url: "https://developer.bytedance.com",  usePrefetchCache: true,  success: (res) => {    console.log("返回數據是否來自預取:", res.isPrefetch);    console.log("請求數據:", res.data);  },});

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

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

信息流落地頁參數處理過程如下：

// 信息流落地頁配置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.jspage({  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調用成功 ${res}`);      },      fail(res) {        console.log(`request調用失敗`);      },    });    // tt.request 會對url中參數做urlencode，已encode的參數不會重復urlencode    // tt.request 請求開發者服務器的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'    // 預請求url參數處理邏輯與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'  },});

分享參數傳遞如下：

// pages/index/index.jsonShareAppMessage() {    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: 'e-tqz4cvodnsv.png',        success() {        },        fail() {        },    };}

// 通過分享落地頁打開小程序// pages/index/index.jspage({  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調用成功 ${res}`);      },      fail(res) {        console.log(`request調用失敗`);      },    });    // tt.request 會對url中參數做urlencode，已encode的參數不會重復urlencode    // tt.request 請求開發者服務器的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'    // 預請求url參數處理邏輯與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'  },});