前言前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开发过程是痛苦的, 花一点时间研究下mui,对你之后开发app有很大的帮助。 网址教程再好,也会有疏漏的地方,还需要你仔细阅读官方文档, 附地址:http://dev./mui/ initmui封装了很多常用的页面方法,都需要在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%的问题可以迎刃而解。 滴石源码:https://github.com/uikoo9/dishi http:///
阅读:21112次 |
|