MUI + SDK 使用笔记：
MUI是什么：http://ask.dcloud.net.cn/article/91
/* MUI 使用说明：
*
* 1.每个用到mui的页面都调用下mui.init。
* 2.如果需要使用大H5+对象，就写到plusReady中，如plus对象。
*/
'''【MUI开发注意事项】-----------------------------------------------------------------------------------
//1.【固定栏靠前】
所谓的固定栏：也就是带有.mui-bar属性的节点
(.mui-bar-nav）
(.mui-bar-footer)
(.mui-bar-tab）
这些元素使用时需遵循一个规则：放在.mui-content元素之前
//2.【一切内容都要包裹在mui-content中】
除了固定栏之外，其它内容都要包裹在.mui-content中
//3.【始终为button按钮添加type属性】
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，
这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差
//4.【窗口管理】
//4.1 页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：
按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
//4.2 页面跳转：抛弃href跳转
mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，
若加载完毕，再自动显示新页面；
//4.3 页面关闭：勿重复监听backbutton
则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，
因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，
因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
//5.【手势操作】
// 点击：忘记click
mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，
统统使用如下代码：
element.addEventListener('tap',function(){
//点击响应逻辑
});
// 或者
mui.(#select).on("tap","li".funcation(){
//点击响应逻辑
});
//6.【常见错误 Uncaught ReferenceError: plus is not defined】
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，
否则可能会报“plus is not defined”的错误；
mui为简化开发，将plusReady事件封装成了mui.plusReady()方法，
凡涉及到HTML5+的api，建议都写在mui.plusReady方法中；
'''【mui适用场景说明】-------------------------------------------------------------------------------------
为解决HTML5在低端Android机上的性能缺陷，mui引入了原生加速，其中最关键的就是webview控件，
因此mui若要发挥其全部能力，需和5+ App配合适用，若脱离5+ App，mui功能会受限，主要涉及三个部分：
详细参考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/113
'''【如何自定义mui控件样式】-------------------------------------------------------------------------------
参考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/87
'''【如何自定义icon图标】-------------------------------------------------------------------------------
//1. 选择图库：(以淘宝素材库为例)
淘宝： http://iconfont.cn/collections?spm=a313x.7781069.0.0.KmfS4h
ICO Moon： https://icomoon.io/app/#/select
Font Awesome: http://www.bootcss.com/p/font-awesome/
//2. 找到所需素材下载到本地（包含 css 和ttf文件）
//3. 修改 iconfont.css 文件中的 【@font-face】
保留所需的 ttf字体即可,如下:修改url增加相对路径 src:url('.../fonts/');
@font-face {font-family: "iconfont";
src:url('.../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}
//4. 将 iconfont.css 拷贝到项目的fonts目录下，iconfont.ttf 拷贝到项目的css目录下。
//5. mui中使用：
// class ：
// mui-icon ：写死
// iconfont ：自定义图片字体的类名
// icon-nanzhuang ： 自定义的icon名字
<span class="mui-icon iconfont icon-nanzhuang"></span>
'''【如何判断预加载是否生效】-------------------------------------------------------------------------------
1. 直观判断，预加载成功打开新页面很快不会有加载等待
2. log分析
'''【MUI_JavaScript 函数 http://dev.dcloud.net.cn/mui/util/】-------------------------------------------------------------------------------
【窗口管理】
//1.初始化MUI 和 准备 mui.init(); / mui.plusReady()；
目前支持在mui.init方法中配置的功能包括：
创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色
代码案列：
mui.init({
//子页面
subpages: [{
url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度，默认为100%
height:subpage-height,//子页面高度，默认为100%
......
},
extras:{}//额外扩展参数
}],
//预加载
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
//下拉刷新
pullRefresh : {
//...
},
//上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认truee)关闭back按键监听
menubutton: false //Boolean(默认true)关闭back按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
});
//在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用mui.plusReady();
// 2.打开新页面
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,//等待框背景区域高度，默认根据内容自动计算合适高度
......
}
}
})
// 3.关闭页面
mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：
若当前webview为预加载页面，则hide当前webview；
否则，close当前webview；
在mui框架中，有三种操作会触发页面关闭（执行mui.back方法）：
// 使用参考（http://dev.dcloud.net.cn/mui/window/#openwindow）
1. 点击包含.mui-action-back类的控件
2. 在屏幕内，向右快速滑动
3. Android手机按下back按键
''''' 除了如上三种操作外，也可以直接调用mui.back()方法，执行窗口关闭逻辑；
// 4.预加载页面
方式一：通过mui.init方法中的preloadPages参数进行配置.
/*
优点:1.可预加载多个页面
缺点:1. 不会返回预加载每个页面的引用，
2.获得对应webview引用，plus.webview.getWebviewById方式获得
3.是异步执行，执行完mui.init方法后立即获得对应webview引用可能会失败
*/
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});
方式二：通过mui.preload方法预加载.// 可立即返回对应webview的引用，但一次仅能预加载一个页面
/*
优点:1.可立即返回对应webview的引用
缺点:1. 但一次仅能预加载一个页面
*/
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});
【事件管理】
// 1.事件绑定：addEventListener() / .on()
除了可以使用[【addEventListener()】方法监听某个特定元素上的事件外， 也可以使用【.on()】方法实现批量元素的事件绑定。
''''' 【 .on( event , selector , handler ) 】
event
Type: String
需监听的事件名称，例如：'tap'
selector
Type: String
选择器
handler
Type: Function( Event event )
事件触发时的回调函数，通过回调中的event参数可以获得事件详情
//2.事件取消：off()
''''' 【 .off( event , selector , handler ) 】
event
Type: String
需取消绑定的事件名称，例如：'tap'
selector
Type: String
选择器
handler
Type: Function
之前绑定到该元素上的事件函数，不支持匿名函数
''''' 【 .off( event , selector) 】
event
Type: String
需取消绑定的事件名称，例如：'tap'
selector
Type: String
选择器
''''' 【 .off( event ) 】
event
Type: String
需取消绑定的事件名称，例如：'tap'
''''' 【 .off( ) 】
空参数，删除该元素上所有事件
// 3. 事件触发 mui.trigger() 使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
''''' 【.trigger( element , event , data )】
element
Type: Element
触发事件的DOM元素
event
Type: String
事件名字，例如：'tap'、'swipeleft'
data
Type: Object
需要传递给事件的业务参数
// 示例 自动触发按钮的点击事件：
var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');
//4. 手势事件
分类 参数 描述
----------------------------------------
| tap | 单击屏幕
点击 -------------------------------
| doubletap | 双击屏幕
----------------------------------------
| longtap | 长按屏幕
-------------------------------
长按 | hold | 按住屏幕
-------------------------------
| release | 离开屏幕
----------------------------------------
| swipeleft | 向左滑动
-------------------------------
| swiperight | 向右滑动
滑动 -------------------------------
| swipeup | 向上滑动
-------------------------------
| swipedown | 向下滑动
-----------------------------------------
| dragstart | 开始拖动
-------------------------------
| drag | 拖动中
拖动 -------------------------------
| dragend | 拖动结束
-----------------------------------------
使用：通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事
/**
注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关*/
// 配置：
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false, //默认为false，不监听
release:false //默认为false，不监听
}
});
// 使用：
单个元素上的事件监听，直接使用addEventListener(0即可，如下：
elem.addEventListener("swipeleft",function(){
console.log("你正在向左滑动");
});
若多个元素执行相同逻辑，则建议使用事件绑定(on())。
*/
//5. 自定义事件：（页面传值）
5.1 添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：
window.addEventListener('customEvent',function(event){
//通过event.detail可获得传递过来的参数内容
....
});
5.2 触发自定义事件,通过mui.fire()方法可触发目标窗口的自定义事件：
目标webview必须触发loaded事件后才能使用自定义事件
''''' 【 .fire( target , event , data ) 】
target
Type: WebviewObject
需传值的目标webview
event
Type: String
自定义事件名称
data
Type: JSON
json格式的数据
/** 实列：
【A.html】
1. 预加载B.html页面 preload()
mui.plusReady(function() {
var page = mui.preload({
url:'examples/zidingyi.html',
id:'zcmain'
});
});
2. 触发自定义事件
var webviews = plus.webview.getWebviewById("zcmain"); // 根据Id 获取B.html 的webview
alert("webviews = " + webviews);
mui.fire(webviews,'intents',{zcmains:'zhangchao'}); // 像B.html页面传递参数
mui.openWindow({ // 打开B.html
url:'examples/zidingyi.html',
id:'zcmain'
});
【B.html】
1. 监听自定义事件 获取去A.html 页面传递过来的数据
window.addEventListener('intents',function(event){
//获得事件参数
var id = event.detail.zcmains;
alert("id = " + id);
//根据id向服务器请求新闻详情
});
*
*/
【utils】
1. init(); // 初始化
创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色（仅支持ios）。
2. mui(); // mui使用css选择器获取HTML元素，返回mui对象数组。
mui("p")：选取所有<p>元素
mui("p.title")：选取所有包含.title类的<p>元素
mui("#loginbt"); 选取id为loginbt的元素
mui(".registerbt");选取class为registerbt的元素
//若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：
//obj1是mui对象
var obj1 = mui("#title");
//obj2是dom对象
var obj2 = obj1[0];
3. each() // 既是一个类方法，同时也是一个对象方法
mui.each( obj , handler )
obj
Type: Array||JSONObj
需遍历的对象或数组；若为对象，仅遍历对象根节点下的key
handler
Type: Function( Integer||String index,Anything element)
为每个元素执行的回调函数；其中，index表示当前元素的下标或key，element表示当前匹配元素
// each 遍历数组/json字符串
var array = [1,2,3]; // 数组
var str = {"name":"zcmain","age":"30","sex":"男"}; // json字符串
each_array.addEventListener('tap',function(){
// 遍历json字符串
mui.each(str,function(index,item){
log("index = " + index + "\nitem = " + item);
});
// 遍历数组
mui.each(array,function(index,item){
log("index = " + index + "\nitem = " + item);
});
});
4. scrollTo(); // 滑动（仅支付纵向）
mui.scrollTo(500,1000,functioin(){}); // 500-华东距离；1000-执行动时间（毫秒）；function-滑动结束回调函数
5. os // 判断当前运行环境的需求, 使用： mui.os.XXX即可
// Android(可以访问的参数为:)
.wechat
返回是否为微信端
.android
返回是否为安卓手机
.version
安卓版本号
.isBadAndroid
android非Chrome环境
// iOS(可以访问的参数为:)
.iOS
返回是否为苹果设备
.version
返回手机版本号
.iphone
返回是否为苹果手机
.ipad
返回是否为ipad
// plus(可以访问的参数为:)
.plus
返回是否在基座中运行
.stream
返回是否为流应用
【Ajax】
// MUI封装Ajax函数 支持GET、POST请求方式，
// 支持返回json、xml、html、text、script数据类型
mui.ajax('http://server-name/login.php',{
data:{ // 发送到服务器的业务数据
username:'username',
password:'password'
},
/*
dataType,预期服务器返回的数据类型，可选值如下：
"xml": 返回XML文档
"html": 返回纯文本HTML信息；
"script": 返回纯文本JavaScript代码
"json": 返回JSON数据
"text": 返回纯文本字符串
*/
dataType:'json',
type:'post', //HTTP请求类型，目前仅支持'GET'和'POST'，默认为'GET'方式
timeout:10000, //请求超时时间（毫秒），默认值为0，表示永不超时，如果超时会触发 error 回调。
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
...
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
