解决UNI-APP "请注意 showLoading 与 hideLoading 必须配对使用" 问题

直接使用uni.showLoading()和uni.hideLoading()经常会出现"请注意 showLoading 与 hideLoading 必须配对使用" 的问题原因：loading全局只创建一个，hideLoading可能会触发多次导致loading已经被隐藏，没有达到预期的配对效果，虽然不至于报错，但是警告提示也让人感觉很不舒服。解决方案：用计数器记录loading被调...

直接使用uni.showLoading()和uni.hideLoading()经常会出现 "请注意 showLoading 与 hideLoading 必须配对使用" 的问题

原因：loading全局只创建一个，hideLoading可能会触发多次导致loading已经被隐藏，没有达到预期的配对效果，虽然不至于报错，但是警告提示也让人感觉很不舒服。

解决方案：

用计数器记录loading被调用次数，调用hideLoading时，当计数达到0，才隐藏loading;并且默认超过10秒自动隐藏loading避免长时间锁屏造成用户体验差的问题

loading.js

// 加载信息，带遮罩
let needLoadingRequestCount = 0;
let loadingTimer;
export function showLoading(title = '', mask = true) {
	if (needLoadingRequestCount === 0) {
		uni.showLoading({
			title,
			mask
		});

		// 最长10s自动关闭
		loadingTimer = setTimeout(() => {
			if (needLoadingRequestCount > 0) {
				uni.hideLoading();
			}
		}, 10000);
	}

	needLoadingRequestCount++;
}

// 隐藏遮罩
export function hideLoading() {
	if (needLoadingRequestCount <= 0) return;

	needLoadingRequestCount--;

	if (needLoadingRequestCount === 0) {
        loadingTimer && clearTimeout(loadingTimer);
		uni.hideLoading();
	}
}

使用（也可以挂在到Vue.prototype中）

import {
    showLoading,
    hideLoading
} from 'utils/loading'

showLoading();
hideLoading();