网站兼容性代码,经典软文案例100例简短,吉林长春建设工程信息网站,北京有名气的设计事务所文章目录 一、概要二、整体架构流程三、技术名词解释四 、技术细节1.存取token有效期#xff1f;2.使用setStorageSync而不使用setStorage#xff1f;3.使用onLaunch而不使用全局路由#xff1f; 一、概要
打开一个网页或小程序的时候#xff0c;我们有时候会自动进入主页… 文章目录 一、概要二、整体架构流程三、技术名词解释四 、技术细节1.存取token有效期2.使用setStorageSync而不使用setStorage3.使用onLaunch而不使用全局路由 一、概要
打开一个网页或小程序的时候我们有时候会自动进入主页而不是登录页面。
怎么实现这个免密登录呢
二、整体架构流程
以下是小程序免密登录流程图
我们常用setStorageSync来存储token,此后根据token是否存在来判断进入哪个页面。
三、技术名词解释 setStorageSyncuniapp官方文档将 data 存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个同步接口。 onLaunch当uni-app 初始化完成时触发全局只触发一次
四 、技术细节
1.存取token有效期
存储token
// 设置token有效期
function setTokenExpiration(key, value, time) {const data Date.now();const item {value,Expire: data time,};wx.setStorageSync(key, item);
}setStorageSync第二个参数是任意类型支持被 JSON.stringify 序列化的对象可以将存储的时间和token值作为对象存入本地。
time是我们要传入token的有效期ms一般30天免密登录就是30*24*60*60
获取token
function getTokenExpiration(key) {const data Date.now();let token wx.getStorageSync(key);if (!token || token.Expire data) {return null;}return token.value;
}判断是否存在token如果存储token的时间戳小于当前时间戳则表示已经超过有效期需要重新登录。
实际项目
2.使用setStorageSync而不使用setStorage
相同点 都是微信小程序中用于存储数据的 API 不同点 setStorage 异步接口存储的时候会在后台进行并不影响其他操作。 setStorageSync 同步接口会等待存储完成才继续执行下面代码。
一般项目获取token之后可能要获取其他接口而其他接口要带token此时我们就用setStorageSync 同步接口等获取到token后再去调用其他接口。
不好的点是存储会花费一些时间可能会可能会阻塞主线程导致界面卡顿或者无法响应用户的操作。
setStorage 性能相比会好。如果不要求实时性推荐使用。
3.使用onLaunch而不使用全局路由
onLaunch初始化完成时触发并且全局只触发一次早于全局路由。项目简单使用
如果路由跳转逻辑复杂建议使用全局路由也好方便管理。
