asp.net企业网站框架,网站数据库大小,品牌设计工作室,网站排名优化原理#x1f517; uniapp 跨端开发系列文章#xff1a;#x1f380;#x1f380;#x1f380;
uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开… uniapp 跨端开发系列文章
uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开发系列】uni-app 蓝牙开发 【特别专题】uni-app 导航栏开发指南 【跨端开发系列】uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】 一、介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架开发者编写一套代码可发布到iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝、快应用等多个平台。
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
二、功能框架图
从下面 uni-app 功能框架图可看出 uni-app 在跨平台的过程中不牺牲平台特色可优雅的调用平台专有能力真正做到海纳百川、各取所长。
三、前言
uniapp 官方内置了通用的内置的缓存组件 uni.setStorage(OBJECT) 但是并没有内置缓存过期时间配置项我们可以自行来处理实现。本篇内容处理讲解如何设置缓存过期时间顺便讲一下滑动缓存的解决方案。
四、官方API
4.1 uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个异步接口。
HarmonyOS Next 兼容性
HarmonyOS NextHBuilderX 4.23
OBJECT 参数说明
参数名类型必填说明keyString是本地缓存中的指定的 keydataAny是需要存储的内容只支持原生类型、及能够通过 JSON.stringify 序列化的对象successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
参数 HarmonyOS Next 兼容性
名称HarmonyOS Next 兼容性options- 名称HarmonyOS Next 兼容性key-data-success-fail-complete-
示例 uni.setStorage({key: storage_key,data: hello,success: function () {console.log(success);}
}); 注意
uni-、uni_、dcloud-、dcloud_为前缀的key为系统保留关键前缀。如uni_deviceId、uni_id_token请开发者为key命名时避开这些前缀。
4.2 uni.setStorageSync (KEY,DATA)
将 data 存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个同步接口。
参数说明
参数类型必填说明keyString是本地缓存中的指定的 keydataAny是需要存储的内容只支持原生类型、及能够通过 JSON.stringify 序列化的对象 try {uni.setStorageSync(storage_key, hello);
} catch (e) {// error
} 4.3 uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
HarmonyOS Next 兼容性
HarmonyOS NextHBuilderX 4.23
OBJECT 参数说明
参数名类型必填说明keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数res {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
参数 HarmonyOS Next 兼容性
名称HarmonyOS Next 兼容性options- 名称HarmonyOS Next 兼容性key-success-fail-complete-
GetStorageSuccess 的属性值
名称HarmonyOS Next 兼容性data-
success 返回参数说明
参数类型说明dataAnykey 对应的内容
示例 uni.getStorage({key: storage_key,success: function (res) {console.log(res.data);}
}); 4.4 uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
HarmonyOS Next 兼容性
HarmonyOS NextHBuilderX 4.23
参数说明
参数类型必填说明keyString是本地缓存中的指定的 key
参数 HarmonyOS Next 兼容性
名称HarmonyOS Next 兼容性key-
示例 try {const value uni.getStorageSync(storage_key);if (value) {console.log(value);}
} catch (e) {// error
} 五、自定义过期时间 ⏱️
通过上面的官方API文档也看到了并没有缓存过期时间配置项。那我们自己写一个吧。核心原理就是将缓存值改成 object 然后将时间戳一并存入缓存下次使用时先判断下时间戳是否过期。
以下是一个示例展示如何设置缓存并在一定时间后过期 // 设置缓存
function setCache(key, value, expireSeconds) {const currentTime Date.now();const expireTime currentTime expireSeconds * 1000; // 转换为毫秒uni.setStorage({key: key,data: {value: value,expireTime: expireTime},success: function() {console.log(缓存设置成功);}});
}// 获取缓存
function getCache(key) {const res uni.getStorageSync(key);if (res res.expireTime Date.now()) {return res.value;} else {uni.removeStorage({key: key,success: function() {console.log(缓存已过期已移除);}});return null; // 缓存过期返回null}
}// 使用示例
const key myCacheKey;
const value myCacheValue;
const expireSeconds 30; // 缓存30秒
setCache(key, value, expireSeconds);// 稍后获取缓存
const cachedValue getCache(key);
console.log(cachedValue); // 缓存过期时会打印null六、滑动缓存解决方案 ️
首先声明在前端做数据缓存是 不可控的 也就是说 不能保证 数据的 实时性 。这种场景只适用于那些不经常变动、实时性要求不高的数据缓存。
大致流程如下
1先判断数据是否已缓存如果已缓存再判断缓存是否过期如果未过期则返回缓存数据同时异步拉取api接口数据并做 异步缓存 。
2如果缓存不存在则同步拉取api接口数据顺便执行 异步缓存 操作。
3读取缓存时要使用 同步缓存 读取以保证后续业务的调用。
4缓存需要设置 过期时间 至于过期时间设置多久根据你业务需求。 uniapp 跨端开发系列文章
uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开发系列】uni-app 蓝牙开发 【特别专题】uni-app 导航栏开发指南 【跨端开发系列】uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
