HBuilder開發App教程04-最難搞定的是mui

前言

前幾篇說到一些HBuilder開發app的基礎教程，

現在來說一下HBuilder開發app的難點，或者說是上手的難點，

就是mui，

如果你沒有研究mui就貿然的上手HBuilder，那你的開發過程是痛苦的，

花一點時間研究下mui，對你之后開發app有很大的幫助。

網址

教程再好，也會有疏漏的地方，還需要你仔細閱讀官方文檔，

附地址：http://dcloudio.github.io/mui/

init

mui封裝了很多常用的頁面方法，都需要在init中設置，例如：

1.和上拉加載，下拉刷新配套的加載子頁面

mui.init({
    subpages : [qiao.h.normalPage('list')]
});

要想實現上拉加載和下拉刷新，必須使用子頁面的方式，需要在init中設置。

2.手勢事件和默認事件

長按事件，后退事件，菜單事件，最好在init中設置，

mui.init({
    keyEventBind : {
        backbutton : false,
        menubutton : false
    },
    gestureConfig : {
        longtap:true
    }
});

等待加載完成

所有的nativejs方法最好都放到等待加載完成后調用，

也就是：

// 所有方法都放到這里
mui.plusReady(function(){
    window.addEventListener('detailItem', detailItemHandler);
});

如果不放到等待nativejs加載完成就執行，那么就會報錯。

使用tap而非click

與傳統頁面不同，所有的手勢點擊操作都請使用tap，而非click，

這樣你的app會有更好的體驗。

頁面間傳值

用html做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傳值

這種方法不做推薦，但是偶爾也可以使用，

切不可所有傳值都用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樣式。

結語

當你遇到疑難問題，開發不下去的時候，

90%的問題可以迎刃而解。

更多教程：

HBuilder開發App教程：http://uikoo9.com/book