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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值