针对移动端的前端工作流(7)—WeUI样式的loading和dialog组件
有这个需求
因为移动端项目多用于微信端,所以我们用微信官方团队提供的WeUI样式简单封装了两个常用的插件,一个是loading
组件,另一个是dialog
组件
dialog组件
首先介绍的dialog
组件,包含alert
和confirm
两种样式,下面是它的使用方法:
在html文件中引入对应的css和js
<link rel="stylesheet" href="widget/dialog/dialog.css">
<script src="widget/dialog/dialog.js"></script>
js文件中调用
lnv.alert({
title: '提示',
content: 'content',
alertBtnText: '确定',
alertHandler: function(){
// 点击确定按钮的回调
}
})
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/15a6397cdfce8f1d8422e91f58ad00e4.webp?x-image-process=image/format,png)
alert
js文件中调用
lnv.confirm({
title: '提示',
content: 'content',
confirmBtnText: '确定选择',
confirmHandler: function(){
// 点击确定按钮的回调
},
cancelBtnText: '取消',
cancelHandler: function(){
// 点击取消按钮的回调
}
})
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c3d379a49e5634d50e7e6f7cfb1cf3d2.webp?x-image-process=image/format,png)
confirm
loading组件
接下来介绍loading
组件,具有pageloading
和iconloading
两种样式。
在html文件中引入对应的css和js
<link rel="stylesheet" href="widget/loading/loading.css">
<script src="widget/loading/loading.js"></script>
js文件中调用:
$.ajax({
url: url,
type: 'POST',
data: sendData,
beforeSend: function () {
//页面loading, 不能再进行其他操作,适合比如提交按钮
lnv.pageloading();
}
})
.done(function (res) {
})
.fail(function (jqXHR, textStatus, errorThrown) {
})
.always(function () {
//在这里删除页面loading
lnv.destroyloading();
});
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/92aaba54614b370b04e990ca57dacead.webp?x-image-process=image/format,png)
loading
js文件中调用:
$.ajax({
url: url,
type: 'POST',
data: sendData,
beforeSend: function () {
//按钮内调用,需要传入按钮的jquery对象
lnv.iconloading("#submit_btn");
}
})
.done(function (res) {
})
.fail(function (jqXHR, textStatus, errorThrown) {
})
.always(function () {
//在这里删除按钮loading
lnv.destroyloading("#submit_btn");
});
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/622e1c8d0a09c6f55ddc08c5e17770af.webp?x-image-process=image/format,png)
loading2
util.js
除了两个组件之外,我们也提供了一个帮助项目开发的util.js。
关于util.js,我们提供了两个常用的功能函数:
1.检测手机号码是否符合格式(匹配规则是第一位为1,其余有10位)
var phone = '189888888889';
console.log(lnv.checkPhone(phone)) // false
2.取出网址参数
// 假设当前的URL为 http://localhost:3000/index.html?phone=189888888889
console.log(lnv.getQueryString(phone)) // 189888888889