【从零开始搭建uniapp开发框架】（五）—— 封装消息框

框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame

在common文件夹下新建 sju.alert.js 文件

 

 

 

 

 

 

 

这里是把uniapp官方提供的消息提示框、模态弹窗封装成自己需要而且统一的消息框,错误框,确认框,等待框等

/**
 * 消息框,错误框,确认框,等待框等封装
 */
import base from '@/common/sju.base.js';
let alert = {
	/**
	 * @description 提示消息,一会就自动消失
	 * @param {string} msg 要显示的消息
	 * @param {number} second 显示时间(毫秒,默认1000秒)
	 */
	showInfo: function(msg, second) {		
		if (base.isNull(second))
			second = 1000;
		uni.showToast({
			title: msg,
			icon: 'none',
			duration: second
		});	
	},
	/**
	 * @description 提示错误消息,需要点击确认后关闭
	 * @param {string} msg 错误消息
	 * @param {type} title 错误标题[默认'提示']
	 */
	showError: function(msg, title) {
		if (base.isNull(title))
			title = "提示";
		uni.showModal({
			title: title,
			content: msg,
			showCancel: false
		});
	},
	/**
	 * @description 显示提示,确认后进行页面跳转
	 * @param {string} msg 错误消息
	 * @param {type} url 跳转地址
	 * @param {type} title 错误标题[默认'提示']
	 */
	showAndRedirect: function(msg, url, title) {
		if (base.isNull(title))
			title = "提示";
		uni.showModal({
			title: title,
			content: msg,
			showCancel: false,
			success: function() {
				uni.redirectTo({url: url});
			}
		});
	},
	/**
	 * @description 提示确认框,需要点击确认后关闭
	 * @param {string} msg 消息
	 * @param {function} confirm 点击确认后执行的回调
	 * @param {function} cancel 点击取消后执行的回调
	 * @param {string} title 标题[默认'请确认']
	 */
	showConfirm: function(msg, confirm, cancel, title) {
		if (base.isNull(title))
			title = "请确认";
		uni.showModal({
			title: title,
			content: msg,
			success: function(e) {
				if (e.confirm == true)
					confirm();
				else
					cancel();
			}
		});
	},
	/**
	 * @description 显示等待框,需要点击确认后关闭
	 */
	showLoading: function() {
		uni.showLoading({
			title: '请等待',
			mask: true
		});
	},
	/**
	 * @description 隐藏等待框,需要点击确认后关闭
	 */
	hideLoading: function() {
		uni.hideLoading();
	}
}

export default alert;

 

消息框封装类引入框架

main.js引入封装类代码：

import sjuAlert from './common/sju.alert.js'

Vue.prototype.sjuAlert = sjuAlert;