当前位置:

UI框架 LayUI、WeUI、ElementUI、AUI

2023-05-24  作者:Sunq    阅读:1001

UI框架有很多,比如微信官方为公众号开发提供的WeUI、适合后端程序员使用的Layui等。UI框架一般只是给前端狗写静态页面提供方便。

这类框架一般提供css和js文件,使用时引入css和js文件,然后html页面里使用框架规定的类名,或者说html页面里复制框架的html即可渲染出完整的html页面。不用再手工去表单、列表、样式等等,而且一般UI框架的兼容性、美观度都会比我们手写好很多。

初学时我还好奇过UI框架和JS框架的区别,JS框架比如JQuery/Vue/React等是不牵扯到html/css等样式问题的。他们本质是让我们不需要直接使用原生JS而是用他们封装后的库去更便利的开发JS。JQuery使我们操作DOM,使用异步请求更方便,vue等使我们可以不再关注DOM操作,将精力更多的放在数据处理、代码优化上去。

一:WeUI

WeUI与LayUI类似,但相比之下WeUI提供的内容少一些。WeUI只是提供css文件、js文件,你复制它的html代码即可渲染出一个纯静态的列表页出来。数据动态化这块,前端狗需要自己用ajax等请求数据,用模板引擎来修改纯静态页面并渲染列表页。

WeUI是一套同微信原生视觉体验一致的基础样式库,适合开发微信小程序、企业号等应用,即在微信上使用的网页。设计风格跟微信一样简洁大方。

二:ElementUI

这个UI框架,专门配合VUE使用。功能强大到可怕,借助它可快速开发管理后台。特点是

文档清晰,每个组件的每个点都有详细的实例。 组件异常完善,只有你想不到,没有人家做不到的。 组件设计简洁易用,很快上手。 用这个UI框架,就感觉自己是个工具人,对不起自己所领的薪水,人家啥都给搞定了。我们把组件拿过来拼起来就行,是我们开发速度超快。

我博客的管理端用的就是ElementUI,他帮我以极快的速度就搞定了博客的管理后台。推荐大家使用这个强大的UI框架。

但是不太适合使用在移动端中,比如table、导航菜单等组件也只有在管理端才会用到。这些组件的设计方式是无法直接用在移动端页面的,移动端展示数据时需要简洁明了,不能展示过多密密麻麻的数据。

三:AUI

aui 是一套基于原生javascript开发的移动端UI组件库,包含常用js方法、字符校验、dialog提示弹窗、数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板。特点是:

四:LayUI

1.Layui比一般UI框架更加方便,不光为我们提供好静态页面,连数据交互这块也帮前端狗写好了。下面以Layui渲染列表为例,

1.html中引入特定css和js文件后,写一个列表最外层的div,如

2.写js代码,按LayUI提供的语法规则,新建一个table实例对象,在实例对象中将表头信息、接口地址等信息写好,打开页面即可渲染出特定样式的列表出来 LayUI官网还提供一些其用户基于LayUI写好的开源的完整系统,比如一个具有所有功能的管理后台,让一些没有设计师或者快速开发的公司,直接拿来修改使用。

但是这个框架的开发者闲心已经不再维护升级,官网已经关闭。用闲心自己的话,他让我们去拥抱变化拥抱MVVM的开发方式。他造福了中国一大堆当时从事后端但想要快速开发的人们,layui用在了无数网站上,这里向他致敬!

  1. 自定义模块使用

LayUI自定义模块:

第一步:新建一个JS文件,命名为NewModule.js,代码如下

layui.define('layer',function (exports) {
   layer = layui.layer;  //调用已存在模板
   console.log("");
   var render = {
      index:function () {
         console.log("测试调用接口");
         layer.msg("好冷");
      }
   };

   exports('NewModule',render);    //抛出接口,加载模块时可以调用render里面的方法
});

使用自定义模块

layui.config({
      base: '../src/'    //自定义模块放在的位置
      ,version: '1.0.0-beta5'
  }).use('NewModule',function () {
        var NewModule = layui.NewModule;
        NewModule.index();
  });

3.Table绑定Toolbar

html中:

<table id='ATable' lay-filter='ATable'></table>
<script type='text/html' id='Tpl'>
     <button lay-event='play'>播放</button>
</script>
Js中:
table.render({
   elem:'#ATable',                         //此处的ATable为table的id值
   clos:[[
        {title:'操作',toolbar:'#Tpl'}      //此处实例化table时,绑定toolbar模板文件
       ]]
});
table.on('tool(ATable)',function(obj){     //此处的ATable为table的lay-filter值
    if(obj.evenet === 'play'){             //此处监听toolbar的点击事件
         ... ...
    }
});

4.跳过的坑

1.当ajax请求时只有请求头没有响应头,且提交后会刷新页面,实在找不到原因时,可能是form表单用错了。

正确的写法:

<div class="layui-form" style="padding: 30px 0 0px 0px"></div>

错误的写法:

<form class="layui-form" style="padding: 30px 0 0px 0px"></form>