【从零开始搭建uniapp开发框架】(四)——封装框架基础方法
框架开源地址:https://gitee.com/yunhaotian/uniapp_mobileFrame
在搭建开发框架时要有封装意识,把常用方法和基础方法分别封装,方便使用
接下来先封装基础方法
在 common 文件夹下新建 sju.base.js 文件
sju.base.js源码:
/** * 所有封装包的基础方法 */ import alert from '@/common/sju.alert.js'; import md5 from '@/common/md5.min.js'; let base = { /** * @description 开发阶段输出信息(可以随时关闭输出) * @param {string} msg 要输出的消息 */ logInfo: function(msg) { console.info(msg); }, /** * @description 返回md5加密后的结果 * @param {string} val 要加密的数据 */ toMD5: function(val) { return md5(val); }, /** * @description 判断是否空值,如果是空值,则返回true * @param {string} val 要判断的数据 */ isNull: function(val) { var isNull = false; if (typeof(val) == undefined) isNull = true; if (val == null) isNull = true; if (val == "") isNull = true; return isNull; }, /** * @description 判断是否非空值,如果是非空值,则返回true * @param {string} val 要判断的数据 */ isNotNull: function(val) { return !base.isNull(val); }, /** * 检查是否非空,如果非空,返回True,否则返回false,并显示错误提示 * @param {string} val 要判断的数据 * @param {string} msg 空的时候显示的错误提示 */ checkNotNull: function(val, msg) { if (base.isNull(val)) { alert.showError(msg); return false; } return true; }, /** * @description 一次检查多个参数是否非空 * <br/>有一个为空则返回false; * <br/>返回false时,显示为空的错误提醒 * @param {array} arr 要检查的数据描述 * <br/>参数格式: [{val:'xxx',msg:'xxx'},...] */ checkArrayNotNull: function(arr) { var isNotNull = true; if (typeof(arr) == 'object') { for (let item of arr) { if (base.isNull(item.val)) { isNotNull = false; alert.showError(item.msg); break; } } } else { isNotNull = false; alert.showError('参数不合法'); } return isNotNull; } } export default base;
isNull、isNotNull :单个参数判断参数是否空值和是否非空值
checkNotNull :检查是否非空
checkArrayNotNull :一次检查多个参数是否非空
在封装方法的第五行引入了MD5:
md5用于用户密码加密使用
在插件市场下载 md5插件
使用HbuilderX导入md5插件,把md5.min.js复制到common文件夹下,然后把js_sdk文件夹删除
把封装的方法导入整个框架,在main.js写引入方法
import sjuBase from './common/sju.base.js' Vue.prototype.sjuBase = sjuBase;