微信小程序数据预拉取-黑白课堂

微信小程序数据预拉取

微信小程序/公众号 / 发布于 2年前 / 更新于 / 本文字数: 1.99k 字

本文目录

数据预拉取
数据预拉取能做什么
使用流程

数据预拉取

预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度。

数据预拉取能做什么

提前获取用户的数据
提前获取系统的配置信息
提前完成数据加载

使用流程

后台小程序配置数据预拉取链接
小程序页面挂载请求数据事件
小程序页面获取数据拉取事件

后台小程序配置数据预拉取链接

黑白课堂

小程序页面挂载请求数据

第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性。
一般我们会写在 app.js 下面获取数据请求，例如


App({
  onLaunch() {
      //自动拉取新
    wx.setBackgroundFetchToken({
      token: '123321token'
    })
  },

其中 token 值可以为用户登录之后后台服务返回的登录值token,也可以是自定义其他

小程序页面获取数据拉取

当用户打开小程序时，微信服务器将向开发者服务器（上面配置的数据下载地址）发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地。
例如我们在 app.js 下面获取数据，当然你也可以放到其他的什么周期地方去获取，这个是异步操作，要注意一下。


App({
  onLaunch() {
    console.log('App你好我进入了');
    //自动拉取新
    wx.setBackgroundFetchToken({
      token: '123321token'
    })
    wx.getBackgroundFetchData({
      fetchType: 'pre',
      success(res) {
        console.log('数据缓存是',res);
        console.log(res.fetchedData) // 缓存数据
        console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳
        console.log(res.path) // 页面路径
        console.log(res.query) // query 参数
        console.log(res.scene) // 场景值
      }
    })

  },

比如我服务端是这样的返回数据

{
    "msg": {
        "hello": "这个是数据拉取的hello",
        "age": 30,
        "date": "2021-03-05T03:38:51.936383Z"
    },
    "code": 200,
    "data": []
}

那么我刚才的 wx.getBackgroundFetchData 会返回如下
黑白课堂

那么微信服务推到服务器或携带如下参数

{
    "appid": "wx75a3f09626ab077e",
    "timestamp": "1614915946",
    "path": "pages/index/index",
    "scene": "1001",
    "token": "123321token"
}

这个是 query 参数