微信小程序框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
本文主要说明数据缓存
每个微信小程序都可以有自己的本地缓存
在进行ajax请求时
可以通过
wx.setStorage(异步本地存储数据)、
wx.setStorageSync(同步本地存储数据)、
wx.getStorage(异步使用本地数据)、
wx.getStorageSync(同步使用本地数据)、
wx.clearStorage(异步清理本地数据缓存)
wx.clearStorageSync(同步清理本地数据缓存)
对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB。
wx.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Object/String | 是 | 需要存储的内容 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
wx.setStorage({
key:"key",
data:"value"
})
wx.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
data | Object/String | 是 | 需要存储的内容 |
示例代码
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
wx.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
success | Function | 是 | 接口调用的回调函数,res = {data: key对应的内容} |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success返回参数说明:
参数 | 类型 | 说明 |
---|---|---|
data | String | key对应的内容 |
示例代码:
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
wx.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
key | String | 是 | 本地缓存中的指定的 key |
代码示例&解析
wx.showNavigationBarLoading();导航条加载动画
wx.showLoading({ title: '玩命加载中', mask: true })界面加载动画,title加载动画的提示语,mask透明蒙层,防止触摸穿透
let data1 = wx.getStorageSync("hotMovie");把存储到本地的数据异步赋值给data1,方便后续使用
onLoad: function() {
wx.showNavigationBarLoading();
wx.showLoading({
title: '玩命加载中',
mask: true
})
var that = this;
let data1 = wx.getStorageSync("hotMovie");
if(data1){//判断data1是否有数据,若有直接that.setData({ })定义
wx.hideNavigationBarLoading();
wx.hideLoading();
// console.log(res);
that.setData({
imgUrls: data1.slice(0, 2),
imgkey: data1.slice(0, 2),
info: data1.slice(0, 2),
file: data1.slice(0, 2)
})
}else{//若无
wx.request({//进行ajax请求
url: 'https://www.easy-mock.com/mock/5b28c8793f9f7c0b22426dce/example/hotmovie',
success(res) {
wx.setStorage({//将请求成功的数据异步存储到本地
key: 'hotMovie',
data: res.data.subjects
})
}
});
};
}
使用if(){}else{}判断并且将数据存储到本地的优点,使小程序把请求到的数据存储到本地,然后进行判断,有数据则不再请求,无数据则请求一次,存储到本地即可,用户体验度更高,界面无需刷新即可获取数据,操作更流畅。