MUI-基础01
如果你没有研究mui就贸然的上手HBuilder，那你的开发过程是痛苦的，
花一点时间研究下mui，对你之后开发app有很大的帮助。
网址
教程再好，也会有疏漏的地方，还需要你仔细阅读官方文档，
附地址：http://dcloudio.github.io/mui/
init
mui封装了很多常用的页面方法，都需要在init中设置，例如：
1.和上拉加载，下拉刷新配套的加载子页面
|
1
2
3
|
mui.init({
subpages : [qiao.h.normalPage(
'list'
)]
});
|
要想实现上拉加载和下拉刷新，必须使用子页面的方式，需要在init中设置。
2.手势事件和默认事件
长按事件，后退事件，菜单事件，最好在init中设置，
|
1
2
3
4
5
6
7
8
9
|
mui.init({
keyEventBind : {
backbutton :
false
,
menubutton :
false
},
gestureConfig : {
longtap:
true
}
});
|
等待加载完成
所有的nativejs方法最好都放到等待加载完成后调用，
也就是：
|
1
2
3
4
|
// 所有方法都放到这里
mui.plusReady(
function
(){
window.addEventListener(
'detailItem'
, detailItemHandler);
});
|
如果不放到等待nativejs加载完成就执行，那么就会报错。
使用tap而非click
与传统页面不同，所有的手势点击操作都请使用tap，而非click，
这样你的app会有更好的体验。
页面间传值
用html做app，不可避免的是页面间传值，
比较推荐的方法有两种：
1.自定义事件传值
在页面用mui.fire激活自定义事件：
|
1
2
3
4
|
// 查看详情
qiao.on(
'#todolist li'
,
'tap'
,
function
(){
qiao.h.fire(
'detail'
,
'detailItem'
, {id:$(
this
).data(
'id'
)});
});
|
在目标页监听自定义事件：
|
1
2
3
4
|
// 所有方法都放到这里
mui.plusReady(
function
(){
window.addEventListener(
'detailItem'
, detailItemHandler);
});
|
2.evaljs传值
这种方法不做推荐，但是偶尔也可以使用，
切不可所有传值都用evaljs传值，
在页面调用目标页方法：
|
1
|
qiao.h.indexPage().evalJS(
"showBackBtn();"
);
|
在目标页面定义相应方法：
|
1
2
3
4
|
function
showBackBtn(){
$(
'.menua'
).removeClass(
'mui-icon-bars'
).addClass(
'mui-icon-back'
);
$(
'.adda'
).hide();
}
|
自定义样式
如果你想自定义app的样式，
很简单只需要定义css样式就好了。
推荐使用css class覆盖原生class的方法自定app样式。
结语
本文虽短，但是很重要，
当你遇到疑难问题，开发不下去的时候，
请回过头来看看是否遵循以上规则，
90%的问题可以迎刃而解。
滴石
官网：http://uikoo9.com/dishi
源码：https://github.com/uikoo9/dishi