- Dcloud官网:http://dcloud.io/
- Dcloud问答社区:http://ask.dcloud.net.cn/
- Dcloud文档汇总地址:http://ask.dcloud.net.cn/docs/
- Hello mui线上演示地址:http://www.dcloud.io/hellomui...
- Hello mui演示APP下载地址:
WebviewObject plus.webview.create( url, id, styles, extras );
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
WebviewObject plus.webview.currentWebview();
WebviewObject plus.webview.getWebviewById( id );
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
mui框架将很多功能配置都集中在 mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用.
mui.init({ //子页面 subpages: [{ //... }], //预加载 preloadPages:[ //... ], //下拉刷新、上拉加载 pullRefresh : { //... }, //手势配置 gestureConfig:{ //... }, //侧滑关闭 swipeBack:true, //Boolean(默认false)启用右滑关闭功能 //监听Android手机的back、menu按键 keyEventBind: { backbutton: false, //Boolean(默认truee)关闭back按键监听 menubutton: false //Boolean(默认true)关闭menu按键监听 }, //处理窗口关闭前的业务 beforeback: function() { //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看 }, //设置状态栏颜色 statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用 preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 })
mui.plusReady(function(){ console.log("当前页面URL:"+plus.webview.currentWebview().getURL()); });
mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'45px',//mui标题栏默认高度为45px; bottom:'0px'//默认为0px,可不定义; } }] });
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度,默认为100% height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ .....//自定义扩展参数,可以用来处理页面间传值 }, createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示 show:{ autoShow:true,//页面loaded事件发生后自动显示,默认为true aniShow:animationType,//页面显示动画,默认为”slide-in-right“; duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; }, waiting:{ autoShow:true,//自动显示等待框,默认为true title:'正在加载...',//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } })
- styles:表示窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况,left、right同理。
- extras:新窗口的额外扩展参数,可用来处理页面间传值;例如:
var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui' } }); console.log(webview.name);
- createNew:是否重复创建相同id的webview;为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:若createNew为true,则不判断重复,每次都新建webview;若为fasle,则先计算当前App中是否已存在同样id的webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;该参数可能导致的影响:若业务写在plusReady事件中,而plusReady事件仅首次创建时会触发,则下次再次通过mui.openWindow方法打开同样webview时,是不会再次触发plusReady事件的,此时可通过自定义事件触发;
- show:表示窗口显示控制。autoShow:目标窗口loaded事件发生后,是否自动显示;若目标页面为预加载页面,则该参数无效;aniShow表示页面显示动画,比如从右侧划入、从下侧划入等
- waiting:表示系统等待框;mui框架在打开新页面时等待框的处理逻辑为:显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的参数:autoShow表示自动显示等待框,默认为true,若为false,则不显示等待框;注意:若显示了等待框,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字,options表示等待框显示参数,比如宽高、背景色、提示文字颜色等
//tap为mui封装的单击事件,可参考手势事件章节 document.getElementById('info').addEventListener('tap', function() { //打开关于页面 mui.openWindow({ url: 'examples/info.html', id:'info' }); });
//A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示; mui.openWindow({ url: 'B.html', show:{ autoShow:false } });
//B页面onload从服务器获取列表数据; window.onload = function(){ //从服务器获取数据 .... //业务数据获取完毕,并已插入当前页面DOM; //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后; mui.plusReady(function(){ //关闭等待框 plus.nativeUI.closeWaiting(); //显示当前页面 mui.currentWebview.show(); });
- 点击包含.mui-action-back类的控件
- 在页面上,向右快速滑动
- Android手机按下back按键
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">标题</h1> </header>
mui.init({ beforeback: function(){ //获得列表界面的webview var list = plus.webview.getWebviewById('list'); //触发列表界面的自定义事件(refresh),从而进行数据刷新 mui.fire(list,'refresh'); //返回true,继续页面关闭逻辑 return true; } });
//备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back var old_back = mui.back; mui.back = function(){ var btn = ["确定","取消"]; mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){ if(e.index==0){ //执行mui封装好的窗口关闭逻辑; old_back(); } }); }
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');
- 1
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()、$()理解为函数调用。
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值需要重置
转自:https://blog.csdn.net/cq7421/article/details/78247085?locationNum=3&fps=1