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