PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    HBuilder开发App教程-最难搞定的是mui

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:前言前几篇说到一些HBuilder开发app的基础教程,现在来说一下HBuilder开发app的难点,或者说是上手的难点,就是mui,如果你没有研究mui就贸...

    HBuilder开发App教程-最难搞定的是mui

    前言

    前几篇说到一些HBuilder开发app的基础教程,

    现在来说一下HBuilder开发app的难点,或者说是上手的难点,

    就是mui,

    如果你没有研究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
    // 所有方法都放到这里www.bcty365.com
    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%的问题可以迎刃而解。

     
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-2637-1.html
    相关热词搜索: