创新互联小程序教程：微信小程序数据预拉取

数据预拉取

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

创新互联建站专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管，支持按月付款！我们的承诺：贵族品质、平民价格，机房位于中国电信/网通/移动机房，资阳托管服务器服务有保障！

使用流程

1. 配置数据下载地址

登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据预加载，点击开启，填写数据下载地址，只支持 HTTPS 。

2. 设置 TOKEN

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

示例：

App({
  onLaunch() {
    wx.setBackgroundFetchToken({
      token: 'xxx'
    })
  }
})

3. 微信客户端提前拉取数据

当用户打开小程序时，微信服务器将向开发者服务器（上面配置的数据下载地址）发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地。

参数	类型	必填	说明
appid	String	是	小程序标识。
token	String	否	前面设置的 TOKEN。
code	String	否	用户登录凭证，未设置TOKEN时由微信侧预生成，可在开发者后台调用 auth.code2Session，换取 openid 等信息。
timestamp	Number	是	时间戳，微信客户端发起请求的时间
path	String	否	打开小程序的路径。
query	String	否	打开小程序的query。
scene	Number	否	打开小程序的场景值。

query 参数会使用 urlencode 处理

token和code只会存在一个，用于标识用户身份。

开发者服务器接口返回的数据类型应为字符串，且大小应不超过 256KB，否则将无法缓存数据

4. 读取数据

用户启动小程序时，调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据。

示例：

App({
  onLaunch() {
    wx.getBackgroundFetchData({
      fetchType: 'pre',
      success(res) {
        console.log(res.fetchedData) // 缓存数据
        console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳
        console.log(res.path) // 页面路径
        console.log(res.query) // query 参数
        console.log(res.scene) // 场景值
      }
    })
  }
})

调试方法

为了方便调试数据预拉取，工具提供了下面的调试能力给到开发者。

网站标题：创新互联小程序教程：微信小程序数据预拉取
当前URL：http://www.shufengxianlan.com/qtweb/news32/503782.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容