简述
1.引入/boot/init.js这个入口js,此js是为了方便自行拓展,核心业务在utils.js,utils.js封装了加载机制,所有拓展均基于此入口进入
2.入口js附带两个参数,from是必填参数,决定使用什么ui,目前可选值为miniui,element,antd,mint,vant,layui,frozen,ydui总共8种,
plugins是选填参数,用于加载什么插件,插件配置在init.js可配置,可自定义增加
3.入口js会外露一个全局变量utils,里面包含一些常用方法以及utils.$的拓展方法,具体如下:
方法名
解说
举例
方法名
解说
举例
utils.getParamer
获取页面传参的值
/1.html?id=456,则utils.getParamer("id")的值为456
utils.getSearch
获取页面传参的对象
/1.html?id=456&name=test,则utils.getSearch()的值为{id:'456',name:'test'}
utils.setLocalStorage
设置缓存数据
utils.setLocalStorage('user',{name:'test',id:'456'}),则将对象存入缓存
utils.getLocalStorage
获取缓存数据
utils.getLocalStorage('user'),则将存取的实体获取,取不到为null
utils.delLocalStorage
删除缓存数据
utils.delLocalStorage('user'),则将缓存的实体删除,下次将读不到数据
utils.removeProp
删除对象的属性
var data={a:1,b:2},utils.removeProp(data,'a'),则data的a属性会被删掉
utils.delayAction
延时执行,3个参数
参数1是fn判断到达临界点,参数2是fn执行的内容,参数3是number是最大等待时间,其中参3选填
utils.$.successMsg
成功消息
支持所有ui,详情参见下面示例
utils.$.infoMsg
信息消息
支持所有ui,详情参见下面示例
utils.$.warningMsg
警告消息
支持所有ui,详情参见下面示例
utils.$.errorMsg
错误消息
支持所有ui,详情参见下面示例
utils.$.msg
默认消息
支持所有ui,详情参见下面示例
utils.$.loading
加载全局遮罩
支持所有ui,详情参见下面示例
utils.$.cancelLoading
取消全局遮罩
支持所有ui,详情参见下面示例
utils.$.alert
alert封装
支持所有ui,详情参见下面示例
utils.$.confirm
confirm封装
支持所有ui,详情参见下面示例
utils.$.prompt
prompt封装
支持所有ui,详情参见下面示例
utils.$.jsonp
jsonp封装
详情参见下面示例
utils.$.post
ajax的post封装
详情参见下面示例
utils.$.get
ajax的get封装
详情参见下面示例
utils.$.initFileUpload
文件上传组件
详情参见下面示例
用法步骤
1.将init.js拷贝到自己项目中
2.根据情况配置init.js,可选择性配置rootPath、ajaxHost或者使用远程cdn
3.根据后台实际情况修改4个全局拦截的方法和在smartInitHook中添加第三方插件
4.页面中引入此init.js即可
时间拓展
时间求差:
到
相差
时间格式化:
使用
格式化后为
请使用yyyy,yy,hy,y,Q,q,MMMM,MMM,MM,M,dddd,ddd,dd,d,HH,H,hh,h,mm,m,ss,s,fff,ff,f,tt,t随意组合
时间转化:
字符串转化成时间为
数值拓展
默认加法:0.3+0.6=
精准加法:(0.3).add(0.6)=
默认减法:0.6-0.4=
精准减法:(0.6).subtract(0.4)=
默认乘法:0.7*0.7=
精准乘法:(0.7).multiply(0.7)=
默认除法:0.7/0.2=
精准除法:(0.7).divide(0.2)=
保留2位小数,进一法:0.243≈(0.243).ceil(2)=
保留2位小数,去尾法:0.248≈(0.248).floor(2)=
保留2位小数,四舍五入法:0.243≈(0.243).round(2)=
0.248≈(0.248).round(2)=
百分比格式化:0.68=(0.68).format('p1')=
人民币格式化:9.67元=(9.67).format('c2')=
数值格式化:-15.67789≈(-15.67789).format('n2')=
通用格式化:-15.67789≈(-15.67789).format('#,0.00')=
千分位格式化:-1511111.67789≈(-1511111.67789).format('#,0.00')=
调试模式
先更改init.js中的smartInitHook方法中的config.debug的属性为true,然后访问链接的时候带上debug=true,则右下角会出现一个齿轮按钮用于调试,
此功能主要用于移动端页面,因为PC自带的开发者工具很强大
消息和弹窗
所有ui均支持,不同ui,样式稍有差距,其中layui在中间,element,miniui,antd在PC页面的时候在上部,在手机页面的时候在下部,mint,vant均在下部
ajax
所有ui均支持,其中req,post,get,put,del均基于axios编写
window.reqOptionsHook用于拦截请求前的配置,可以统一写在init.js中,也可以页面上单独写用于覆盖init.js的默认配置,
此方法有两个入参,
此方法返回值为{headers:{'Content-Type': 'application/json'},url:"http://localhost:8080" + url,method:method,responseType:"text"}
这种格式
window.reqResultHook用于拦截请求后的数据,可以统一写在init.js中,也可以页面上单独写用于覆盖init.js的默认拦截,
此方法有一个入参,
此方法返回值为{flag:true,msg:"操作成功",data:xhr.data}这种格式,其中flag用于判断执行成功与否,和req,post,get,put,del的参数
callBackError息息相关,只要flag为false,都认为是失败的意思,而callBackError就是决定失败的时候是否需要回调,如果为true,则无论何时都会回调方法,
如果为false,则仅当flag为true的时候会回调方法,flag为false的时候就算有回调方法也不会执行,仅仅用errorMsg弹出提示
文件上传
所有ui均支持
使用utils.$.initFileUpload(fileCallBack,options);进行初始化后,
即可使用utils.$.selectFile(id);进行选文件上传了,附带进度条功能
window.uploadUrlHook用于拦截统一上传的url,一般在init.js配置好即可,返回值为字符串,用于上传的链接,
utils.$.initFileUpload中的参数options.url将覆盖window.uploadUrlHook的属性
window.uploadResHook用于拦截统一的返回json,一般在init.js配置好即可,返回格式为{flag:true,msg:"上传成功",fileId:"",fileIds:[]}
如果不配置此拦截过滤,会造成fileCallBack的方法判断困难