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

基礎庫 1.0.0 開始支持本功能

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

配置 app.json 文件

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

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

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

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

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

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

pages/index/index?id=123

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

調用 tt.request

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

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

Bug & Tip

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

// app.json
{
    prefetches:{
        //頁面路徑
        'pages/index/index': [
            //請求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調用成功 ${res}`);
      },
      fail(res) {
        console.log(`request調用失敗`);
      }
    });

    // tt.request 會對url中參數(shù)做urlencode，已encode的參數(shù)不會重復urlencode
    // tt.request 請求開發(fā)者服務器的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參數(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調用成功 ${res}`);
      },
      fail(res) {
        console.log(`request調用失敗`);
      }
    });

    // tt.request 會對url中參數(shù)做urlencode，已encode的參數(shù)不會重復urlencode
    // tt.request 請求開發(fā)者服務器的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參數(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'
  }
});