最近抖音是摸鱼办的一个非常火的提醒，提醒各种节假日倒计时，收到了很多打手。当时就想这个界面可以写成一个小程序，动态显示时间和倒计时。倒计时数据是从服务端获取的，加载需要时间，导致页面加载延迟，体验差。小程序延时效果节假日倒计时界面大致如下：上下两部分是固定的，中间每个节假日都动态从服务器获取数据，所以节假日倒计时加载会有延迟：可以看出当页面加载时，中间的Rendering会在节假日延迟。为了解决这个问题，需要对小程序进行数据预取。解决方案：为了提高打开速度，数据预取小程序增加了数据预取功能。预取可以在小程序冷启动时通过微信后台提前从第三方服务器拉取业务数据。加载代码包时，可以更快的渲染页面，减少用户的等待时间，从而提高小程序的打开速度。启用数据预加载登录小程序管理后台，进入开发管理->开发设置->数据预加载。文档显示填写数据下载地址实际上是从云函数中获取数据。在管理后台添加数据预取，开发者工具也要开启数据预加载：创建一个云函数从云函数中获取服务器数据，云函数调用需要调用http请求后端数据，http请求需要添加npm依赖。在使用npm命令之前必须安装Node.js。右键云函数文件打开终端窗口：在终端中输入：npminstallrequest-promise安装成功后可以调用http，在云函数中找到index.js获取服务器数据：//云函数入口文件constcloud=require('wx-server-sdk')varrequest=require('request-promise');cloud.init()//云函数入口函数exports.main=async(event,context)=>{varhttptype="https://";varurl="springboot-cv01-1668851-1300949732.ap-shanghai.run.tcloudbase.com";returnawaitrequest(httptype+url+"/holiday/all").then(function(res){returnres;}).catch(function(err){return{};})}调用云函数：wx.cloud.callFunction({//云函数名:'add',success:function(res){console.log(res.result)},fail:console.error})预取数据云函数写完后，添加wx.getBackgroundFetchData在app.js中预加载数据：wx.getBackgroundFetchData({fetchType:'pre',success(res){varjson=JSON.parse(JSON.parse(res.fetchedData));that.globalData.holidayDate=json;}})无法显示官方环境数据。不显示：开启在线调试模式，日志报错消息：原因：that.globalData之前调用还没有初始化解决方法：把wx.getBackgroundFetchData({})放在this.globalData={}之后，globalData会在调用之前初始化。这里开发版没有问题，但是正式版有问题，所以应该是试用版测试无误后发布网络版。贴完上面，页面会预加载数据，不会出现延迟加载：总结一下，页面加载数据需要时间，如果有文本延迟加载，启动小程序预取数据并添加用于拉取的云功能。向云函数添加http请求依赖于使用预取来获取数据。GlobalData赋值前需要初始化（线上环境有问题，开发环境没问题）。喜欢它！
