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

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

1、总结

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

 

 

 

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

 

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

 

 

3、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。

 

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：存储该框架的插件（扩展）

 

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 手势事件

 

6 Aajx

7下拉刷新

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

8上拉加载

加载下一页数据，同时放到原有数据的最后端。
根据返回数据的条数 和pagesize进行判断，确实是否还有下一页。
将当前页码存为一个全局变量page。
当有下拉刷新的时候，page值须要重置