HBuilder之MUI开发

官方关于MUI开发的网址：http://dev.dcloud.net.cn/mui/

init

mui封装了很多常用的页面方法 ，都 需要在init中 设置 ，例如：

1.和上拉加载，下拉刷新配套的加载子页面

mui.init({

     subpages : [qiao.h.normalPage( 'list' )]

});

2.手势事件和默认事件

长按事件，后退事件，菜单事件，最好在init中设置

mui.init({

     keyEventBind : {

         backbutton :  false ,

         menubutton :  false

     },

     gestureConfig : {

         longtap: true

     }

});

等待加载完成

所有的nativejs方法最好放在等待加载完成后调用

也就是：

// 所有方法都放到这里

mui.plusReady( function (){

     window.addEventListener( 'detailItem' , detailItemHandler);

});

使用tap而非click

手势点击操作都使用tap，而非click，这样app的体验更好

页面之间的传值

比较推荐方法

1.自定义事件传值

在页面用mui.fire激活自定义事件

// 查看详情

     qiao.on( '#todolist li' ,  'tap' ,  function (){

         qiao.h.fire( 'detail' ,  'detailItem' , {id:$( this ).data( 'id' )});

     });

在目标页面监听自定义事件：

// 所有方法都放到这里

mui.plusReady( function (){

     window.addEventListener( 'detailItem' , detailItemHandler);

});

2.evaljs传值

这种方法不做推荐，但偶尔会用

切不可所有传值都用他

在页面调用目标也方法：

qiao.h.indexPage().evalJS("showBackBtn();");

在目标页定义相应的方法：

function  showBackBtn(){

     $( '.menua' ).removeClass( 'mui-icon-bars' ).addClass( 'mui-icon-back' );

     $( '.adda' ).hide();

}

自定义样式

如果你想自定义app的样式，

很简单只需要定义css样式就好了。

推荐使用css class覆盖原生class的方法自定app样式