医疗器械网站建设策划书,四川网站建设贴吧,华夏建筑工程网,网上购物网站网站建设分析前情
uni-app是我比较喜欢的跨平台框架#xff0c;它能开发小程序/H5/APP(安卓/iOS)#xff0c;重要的是对前端开发友好#xff0c;自带的IDE可视化的运行和打包也让开发体验也非常棒#xff0c;公司项目就是主推uni-app#xff0c;为了用户体验对于耗时操作#xff0c;…前情
uni-app是我比较喜欢的跨平台框架它能开发小程序/H5/APP(安卓/iOS)重要的是对前端开发友好自带的IDE可视化的运行和打包也让开发体验也非常棒公司项目就是主推uni-app为了用户体验对于耗时操作如接口请求或者异步的API调用都会添加loading效果
原生API使用持性
uni-app项目本身自带有原生交互反馈的API,如showToast、showLoading、showModal、showActionSheet各有应用场景而其中showLoading就是用于显示一个加载中效果的同时跟他配套的还有hideLoading用于隐藏已经显示的loading效果
showLoading特性永远只会有一个如果同时调用多次只会显示最后调用的那一个
hideLoading特性调用它会关掉页面上的正在显示的loading
思考
因特性引起的一些使用问题
假设一个场景我页面上同时调起二个接口一个接口都会调起一个loading ,最后显示的是后调接口的loading但是此时前一个接口回来了会调用hideLoading接口就会隐藏loading其实第二个接口还没有回来导致loading被关了测试代码如下
const test0 () {uni.showLoading({title: 加载中...0,mask: true});setTimeout(() {uni.hideLoading();}, 1000);
}const test1 () {uni.showLoading({title: 加载中...1,mask: true});setTimeout(() {uni.hideLoading();}, 2000);
}
test0();
test1();使用体验问题
在我们做接口请求的时候接口速度是会受用户的网速影响网速好就接口返回快网络差就接口返回慢这里会有一个问题如果用户网络好那loading会闪一下就没了用户都没看到是什么东西在一定层面上给用户带来不好的体验
解决方案
解决因特性引起的使用问题
因hideLoading并不会识别当前显示是由谁唤起的loading导致无法识别当前要隐藏的是哪一个Loading那我们就封装下代码记录已经唤起的loading在调用loading的时候通过传参指定要隐藏的是哪一个 loading就行了
优化体验问题
我们无法确认用户的网络状态那我们在唤起loading的时候是否可以做一个延时显示假设我们延时为300ms如果发现300ms内有唤起当前loading的hideloading调用那当前loading也就不用显示了但是这又有一个问题如果网络正好回复时间了310那一样是闪一下所以我们再加一个loading的最小显示时间
uni-app项目一想到要全局操作首选第一想到就是事件通信了此处我们基于uni-app自带的事件通信 o n 、 on、 on、emit来实现一个能解决上面缺陷的loading显示与隐藏方案完整代码如下
// 用于存储记录当前已有loading
let loadingObj {};
// loading需要显示的基准时间
let loadingDelayShow 300;
// loading显示的最小时间
let loadingDelayHide 1000;
let loadingTimer {};// 默认 loading 配置
const loadingOptionsDefault {mask: true
}/*** 初始化loading* 基于事件通知实现 loading 的显示与隐藏*/
export const initLoading (options 数据加载中...) {// 监听显示 loading 事件uni.$off(showLoading);// optionsIn是loading的配置参考showLoading的配置// 其中key用于存储当前是什么哪一个loading,用于与hideLoading配合使用uni.$on(showLoading, (optionsIn options, key) {console.log(---- showLoading ----:, optionsIn, key);// 如果传入的是字符串则将其作为 titleconst loadingOptions typeof optionsIn string ? { ...loadingOptionsDefault, title: optionsIn }: { ...loadingOptionsDefault, ...optionsIn };if (!loadingObj[key]) {loadingObj[key] {show: false,startTime: Date.now()};}// 如果300ms内又调用了hideloading则无需显示loadingloadingTimer[key] setTimeout(() {if (loadingObj[key] !loadingObj[key].show) {loadingObj[key].show true;loadingObj[key].startTime Date.now();uni.showLoading({...loadingOptions});}}, loadingDelayShow);});// 监听隐藏 loading 事件uni.$off(hideLoading);uni.$on(hideLoading, (key) {if (loadingObj[key]) {loadingObj[key].show false;clearTimeout(loadingTimer[key]);}if (isCanHide(key)) {const { startTime } loadingObj[key];if (Date.now() - startTime loadingDelayHide) {resetLoading();} else {setTimeout(() {if (isCanHide(key)) {resetLoading();}}, loadingDelayHide - (Date.now() - startTime));}}});// 监听重置 loading 事件uni.$off(resetLoading);uni.$on(resetLoading, () {try {resetLoading();} catch (err){console.log(---- resetLoading ----, err);}});
}// 判断要不要隐藏loading
const isCanHide (key) {if (!loadingObj[key].show Object.keys(loadingObj).length 1) {return true;}// 或者所有的loading对象的show都是falsefor (const key in loadingObj) {if (loadingObj[key].show) {return false;}}return true;
}const resetLoading () {loadingObj {}uni.hideLoading();
}// 导出事件名称常量
export const LOADING_EVENTS {SHOW: showLoading,HIDE: hideLoading,RESET: resetLoading
};// 导出默认对象包含事件名称常量
export default {LOADING_EVENTS
};使用方式
在项目根目录main.js中初始化
import { initLoading } from /utils/loading;
initLoading()在需要的地方调用
// 显示loading
uni.$emit(showLoading, 提交订单中..., xxx);// 隐藏loading
uni.$emit(hideLoading, xxx); 使用注意事项
其中xxx是key,要确保唯一实在是怕重复的话可以引入第三方的uuid来做显示与隐藏要配套使用不然记录的loading不会清空或者状态不会变会导致问题
小结
这是我的 uni-app项目的loading使用方案已使用在生产中还没有发现什么问题如果后续发现什么问题再做更新吧解决方案千千万世上没有最好只有更好如果你有更好的解决方案可以分享出来或者你发现此方案有什么问题也可以提出来一起探讨。
