WeUI样式的loading和dialog组件-移动端开发指南

当前位置:　首页>> 技术小册>> 移动端开发指南

### 有这个需求

因为移动端项目多用于微信端，所以我们用微信官方团队提供的[WeUI](https://weui.io/#/)样式简单封装了两个常用的插件,一个是`loading`组件，另一个是`dialog`组件

### [dialog组件](https://github.com/mqyqingfeng/dialog)

首先介绍的[`dialog`](https://github.com/mqyqingfeng/dialog)组件，包含`alert`和`confirm`两种样式，下面是它的使用方法：

在html文件中引入对应的css和js

``` html
<link rel="stylesheet" href="widget/dialog/dialog.css">

```

js文件中调用

```js
lnv.alert({
    title: '提示',
    content: 'content',
    alertBtnText: '确定',
    alertHandler: function(){

// 点击确定按钮的回调

}
})

```

效果如下：

![](/uploads/images/20231219/905f9b8cedab8cf5987f9a9413500db5.png)
js文件中调用

```js
lnv.confirm({
    title: '提示',
    content: 'content',
    confirmBtnText: '确定选择',
    confirmHandler: function(){

// 点击确定按钮的回调

},
    cancelBtnText: '取消',
    cancelHandler: function(){

// 点击取消按钮的回调

}
})

```

效果如下：

![](/uploads/images/20231219/604adb0c1c5c4a9dabf7b0d3ca0d5716.png)
### loading组件

接下来介绍`loading`组件，具有`pageloading`和`iconloading`两种样式。

在html文件中引入对应的css和js

``` html
<link rel="stylesheet" href="widget/loading/loading.css">

```

js文件中调用：

```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();

});

```

效果如下：

![](/uploads/images/20231219/945c5f419a4fc7f6e959733861040d52.png)
js文件中调用：

```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");

});

```

效果如下：

![](/uploads/images/20231219/55e59834f6721cfdf524789bdab152ae.png)
### util.js

除了两个组件之外，我们也提供了一个帮助项目开发的util.js。

关于util.js，我们提供了两个常用的功能函数：

1.检测手机号码是否符合格式（匹配规则是第一位为1，其余有10位）

``` js
var phone = '189888888889';

console.log(lnv.checkPhone(phone)) // false

```

2.取出网址参数

``` js
// 假设当前的URL为 http://localhost:3000/index.html?phone=189888888889

console.log(lnv.getQueryString(phone)) // 189888888889

```

该分类下的相关小册推荐：

Vue.js从入门到精通(三)

Vue.js从入门到精通(四)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(一)

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(四)

vue项目构建基础入门与实战

Vue3技术解密

TypeScript和Vue从入门到精通(一)

Vue源码完全解析

TypeScript和Vue从入门到精通(五)

TypeScript和Vue从入门到精通(三)