小程序预加载数据实战 java

最近抖音很火的一个摸鱼办提醒，提示各个假期的倒计时间，收到了很多打工人的追捧。当时我就想到可以把这个界面写成一个小程序，动态的展示时间和倒计时，其中倒计时数据是从服务端获得，需要加载时间，导致页面延迟加载，体验效果差。

小程序延迟效果假期倒计时的界面大体如下：

文章图片

上下部分都是固定的，中间每个节假日都是从服务端动态获取数据，所以会出现节假日倒计时延迟加载的情况：

可以看出，页面加载时，中间的节假日会出现延迟渲染的情况，为了解决这个问题，需要用到小程序的数据预拉取。
解决方案：数据预拉取小程序为了提升打开速度，添加了数据预拉取的功能。

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

开启数据预拉取
登录小程序的管理后台，进入开发管理 -> 开发设置 -> 数据预加载。

文档显示填写数据下载地址，实际是从云函数获取数据。

文章图片

在管理后台添加数据预拉取，开发者工具也要开启数据预加载：

文章图片

创建云函数
从云函数获取服务器数据，而云函数调用要调用 http 请求后端数据，而 http 请求要添加 npm 依赖，在使用 npm 命令之前要先安装好 node.js。
在云函数文件上右键打开终端窗口：

文章图片

在终端输入：

npm install request-promise

安装成功之后，就可以调用 http 了，在云函数找到 index.js 获取服务端数据：

// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request-promise'); cloud.init()// 云函数入口函数 exports.main = async (event, context) => { var httptype = "https://"; var url = "springboot-cv01-1668851-1300949732.ap-shanghai.run.tcloudbase.com"; return await request(httptype + url + "/holiday/all") .then(function(res){ return res; }) .catch(function(err) { return {}; }) }

调用云函数：

wx.cloud.callFunction({ // 云函数名称 name: 'add', success: function(res) { console.log(res.result) }, fail: console.error })

预拉取数据
云函数写好之后，在 app.js 添加 wx.getBackgroundFetchData预加载数据：

wx.getBackgroundFetchData({ fetchType: 'pre', success(res) { var json = JSON.parse(JSON.parse(res.fetchedData)); that.globalData.holidayDate = json; } })

正式环境数据无法显示
开发环境没问题，但是正式环境，数据都没有显示：

文章图片

开启线上调式模式，日志报错信息：

文章图片

原因： 【小程序预加载数据实战】that.globalData 还没被初始化之前，就调用。
解决：把 wx.getBackgroundFetchData({}) 放在 this.globalData = https://www.it610.com/article/{} 之后，globalData 先初始化再调用。