MUI简介-最接近原生App体验的前端框架

2021-09-05 20:52:57

MUI简介-最接近原生App体验的前端框架

一、总结

一句话总结：最接近原生App体验的前端框架

二、多端发布 – 开发一套代码，发布六个平台

  • 真正彻底的跨平台开发，不是简单的跨iOS和Android。
  • 基于mui，一套HTML5工程，通过前端构建工具（如grunt）条件编译，可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信App和流应用。
  • 并且在每个平台上，都能调用该平台的专有API达到原生体验。

三、MUI介绍

1.1 MUI是什么，解决了什么问题。

（1）性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有（如果开发者需要解决这些问题，需要处理很多兼容性问题，需要花费大把的时间和精力）；

（2）浏览器默认控件样式（prompt、alert）又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。

（3）mui框架解决的问题：一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。有些控件就是原生态的效果，mui起到了桥梁的作用。

了解：

MUI是国产的，北京数字天堂。。。和它配套的有开发工具HBuilder，5+runtime
5+runtime：可以将H5打包成native app，原理：利用原生态的webview去承载HTML5。
MUI简介-最接近原生App体验的前端框架

1.2 MUI的特点

（1）轻量
追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
可以根据自个的需要，自定义去下载对应的模块。和我们接触的zepto.js类似。

（2）原声UI
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件;
容易上手 ;
不需要其他框架基础：语法上和我们之前 学到用到 的写法是一样的。

其他框架：ionic(Angular.js), react(native),vue(发音:view）
vue、react、Angular.js是并列关系。
前端是：vue和react的天下

1.3 MUI存在的问题

（1）名气不是很大，国产，不像react、Angular.js那样，世界范围都在使用。目前国内MUI使用的公司还是很多的。
（2）框架本身存在一些bug还有一些待解决的问题。(tap == click)

1.4分析MUI结构

dist:distribution的缩写，存放目标，发布的文件，对于一些框架来说，使用者将里面的文件copy出来直接用就OK

examples：存储案例（demo）的文件

grunt：存储js模块化相关的文件，类似sass里面引用sass，这里是js里面引用js。和grunt类似的工具用gulp，webpack。

plugin：存储该框架的插件（扩展）
MUI简介-最接近原生App体验的前端框架

2 UI组件

2.1 accordion（折叠面板）

<ul class="mui-table-view">

        <li class="mui-table-view-cell mui-collapse">

            <a class="mui-navigate-right" href="#">面板1</a>

            <div class="mui-collapse-content">

                <p>面板1子内容</p>

            </div>

        </li>

    </ul>

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。

2.2 actionsheet（操作表）

2.3 dialog（对话框）

（1）警告框：

$.alert('警告的内容\n可以使用\n换行', '警告标题',"按钮的文字" ,function() {

     //点击确认的回调

});

注：.alert( message, title, btnValue, callback ) message必须是字符串

（2）确认框
var btnArray = [‘否’, ‘是’];

$.confirm('是否确认删除', '确认的标题', btnArray, function(e) {

    //通过e.index可以知道用户点击了哪个按钮

    if (e.index == 1) {

       $(this)[0].innerHTML = "ok";

    } else {

        $(this)[0].innerHTML = "no"

    }

})

注：显示什么按钮是一个数组，当这个数组只有一个元素的时候，类似于警告框

（3）输入框
.prompt( message, placeholder, title, btnValue, callback )

var btnArray = ['取消', '确定'];

$.prompt('请输入评语：', '性能好', 'Hello MUI', btnArray, function(e) {

    if (e.index == 1) {

        $(this)[0].innerHTML = '谢谢你的评语：' + e.value;

    } else {

        $(this)[0].innerHTML = '你点了取消按钮';

    }

})

（4）toast提示框

$.toast('欢迎体验Hello MUI');

2.4 list（列表）

<ul class="mui-table-view">

    <li class="mui-table-view-cell">

        <a class="mui-navigate-right">Item 1</a>

    </li>

    <li class="mui-table-view-cell"> Item 2

        <span class="mui-badge mui-badge-primary">11</span>

    </li>

    <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a></li>

</ul>

2.5 ipnut (表单)
（1）密码输入框，后面有一个小眼睛

（2）输入框后面可以设置一个 清除的按钮
2.6 number box(数字输入框)

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>

  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>

  <input class="mui-numbox-input" type="number" />

  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button></div>

注：
（1）我们可以设置输入框的最大值、最小值、设置修改的步长
（2）可以获取到输入框的值。Mui有方法提供
（3）我们可以通过js设置输入框的值。Mui有方法提供
（4）我们可以通过js设置输入框修改的步长，Mui有方法提供

了解：组件化开发。在前端，还是后端（Java）都在提倡。
定义：在解耦复杂系统时，多个功能模块进行拆解、重组的过程，有多种的属
性、状态反映其内部的特性
目的：对复杂系统拆分成多个组件，方便对其独立升级和优化。

2.7 ipnut (表单)

2.8 picker（选择器）

2.9 switch(开关)

<div class="mui-switch mui-active" id="mySwitch">

    <div class="mui-switch-handle"></div>

</div>

注：
（1）根据div中是否包含mui-active 来判断当前开关的状态。
（2）我们可以通过js去设置开关的状态，mui提供方法
（3）我们可以监听到开关改变的状态，mui提供方法

2.10 slide（轮播组件）

2.11 图片轮播

2.12遮罩蒙版

对框架进行原生态代码的转化

mui("#close")[0].style.display = "block";

在转回框架

mui(mui("#close")[0]);

自学:
（1）侧滑导航
（2）radio（单选框）
（3）badge（数字角标）
（4）checkbox（复选框）
（5）弹出菜单

案例：

3 Utils

3.1 init

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。

3.2 mui()

这里mui和我们之前接触的jQuery的是一样的。可以将mui和

理解成一个函数。mui()、$()理解为函数调用。
mui(“#XX”),mui(“.XX”)

(function ($,document) {

    $('#sheet1').popover('toggle');

})(mui,document)

上面这种写法的好处：
（1）执行速度更快
（2）更方便代码压缩

mui或者jQuery对象转成dom元素

$(“sle”)[0]\mui(“sle”)[0]

原生态转成mui或者jQuery对象

$(“sle”)、mui(“sle”)、$($(“sle”)[0])、mui(mui(“sle”)[0])

3.3 each()

3.4 extend()

3.5 scrollTo()

3.6 os

自个了解：navigator.userAgent
通过这个，你可以间接地获取，当前设配信息
比如：手机类型（Andriod、iOS）、浏览器类型（WeChat浏览器、QQ浏览器、还是其他浏览器）

(function ($,document) {

   var isAndriod = $.os.android;

   if(isAndriod){

       $.alert("您用的是安卓手机")

   }else {

       $.alert("您用的是街机")

   }

    var isWechat = mui.os.wechat;

    if(isWechat){

        $.alert("微信浏览器");

    }else{

        $.alert("非微信浏览器");

    }

    var isAndroid = $.os.android;

    var iOS = $.os.ios;

    if(!isAndroid && !iOS){

        $.alert("winPhone");

    }

})(mui,document)

通过mui提供的方法，可以获取到
（1）系统的版本（iOS、Andriod）
（2）系统的版本
（3）浏览器的类型（WeChat、QQ）

4窗口管理

4.1 页面初始化

4.2 打开新页面

4.3 关闭页面

5事件

5.1 事件绑定

(function ($,document) {

    $("body").on("click","#btnClick",f1);

    function f1() {

        $.alert("点击了！");

    };

    $("body").on("click","#cancel",function () {

        $("body").off();

    });

})(mui,document)

注：写取消事件时，将书写 绑定事件的代码复制过来，将on改成off即可。
当然，off()事件可以不带参数。

了解：面向对象的3大特性：（封装、继承、多态）

5.2 事件取消

5.3 事件触发

使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
注：第一个参数是DOM原生态元素。

4.4 手势事件

MUI简介-最接近原生App体验的前端框架

6 Aajx

7下拉刷新

加载第一页最新的数据，如果服务器数据没有变更，那么和上次获取的到的数据是一样的。
将获取到的第一页数据放置到页面之前，先清除原有的数据。

8上拉加载

加载下一页数据，同时放到原有数据的最后端。
根据返回数据的条数 和pagesize进行判断，确实是否还有下一页。
将当前页码存为一个全局变量page。
当有下拉刷新的时候，page值需要重置
 
MUI简介-最接近原生App体验的前端框架

MUI简介-最接近原生App体验的前端框架

 
 
 
上一篇：Centos6下 使用xsync脚本批量传输文件方法


下一篇：CSS Spritec下载,精灵图，雪碧图，初探之原理、使用