2025-11-06 【小程序】微信小程序预拉取

需求背景

可行方案

a. 应用级-预加载（性能好，缓存问题）

1. 异步加载，页面生命周期早于预拉取执行
2. 维护更新，无法实时获取最新配置（热启动未拉取最新配置）
3. 维护更新，更新数据库后，仍需修改小程序管理后台数据预拉取配置，以触发预拉取数据变更

b. 页面级-普通接口拉取（时效性）

1. 每次半屏渲染都会获取一次最新配置数据

预加载方案

1. app.js 中注入代码

// 读取预拉取的 半屏白名单，EventBus 告知页面
initHalfWhiteListByByPrefetchData(fetchedData) {
  console.log('预拉取数据', JSON.parse(fetchedData)); // 缓存数据 - 客户端拿到缓存数据的时间戳
  const jsonData = JSON.parse(fetchedData);
  const { Data = [] } = jsonData.Response;
  this.globalData.halfWhiteAppIds.MP_CERTIFICATION_TRUST_APPIDS = Data?.filter(item => item?.AuthType === 1)?.map(j => j?.SpAppId);
  this.globalData.halfWhiteAppIds.loaded = true;
  EventBus.emit('halfWhitelistLoaded');
},
onLaunch() {
  wx.onBackgroundFetchData((res) => {
    this.initHalfWhiteListByByPrefetchData(res?.fetchedData);
  });
  wx.getBackgroundFetchData({
    fetchType: "pre",
    success(res) {
      this.initHalfWhiteListByByPrefetchData(res?.fetchedData);
    },
  });
}

2.pagejs 页面中注入代码

onLoad(options) {
  wx.hideHomeButton();
  console.log('>>>halfWhitelistLoaded >>>', getApp().globalData.halfWhiteAppIds);
  if (getApp().globalData.halfWhiteAppIds.loaded) {
    this.initPageAfterHalfAuthCheck();
  }
  EventBus.on('halfWhitelistLoaded', async () => {
    console.log('>>>halfWhitelistLoaded 2>>>', getApp().globalData.halfWhiteAppIds);
    this.initPageAfterHalfAuthCheck();
  });
},
initPageAfterHalfAuthCheck() {
  // 初始化页面...
},

3. 创建 EventBus类

class EventBus {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  off(event, listener) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter((l) => l !== listener);
  }

  emit(event, args) {
    if (!this.events[event]) return;
    this.events[event].forEach((listener) => listener(args));
  }
}

export default new EventBus();