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

时间:2021-09-14 23:10:52

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体验的前端框架