正文

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

IP云
IP云V管理员/11 阅读
07/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

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

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

就是mui，

如果你没有研究mui就贸然的上手HBuilder，那你的开发过程是痛苦的，

花一点时间研究下mui，对你之后开发app有很大的帮助。

网址

教程再好，也会有疏漏的地方，还需要你仔细阅读官方文档，

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

init

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

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

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

要想实现上拉加载和下拉刷新，必须使用子页面的方式，需要在init中设置。

2.手势事件和默认事件

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

  1. mui.init({
  2. keyEventBind : {
  3. backbutton : false,
  4. menubutton : false
  5. },
  6. gestureConfig : {
  7. longtap:true
  8. }
  9. });

等待加载完成

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

也就是：

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

如果不放到等待nativejs加载完成就执行，那么就会报错。

使用tap而非click

与传统页面不同，所有的手势点击操作都请使用tap，而非click，

这样你的app会有更好的体验。

页面间传值

用html做app，不可避免的是页面间传值，

比较推荐的方法有两种：

1.自定义事件传值

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

  1. // 查看详情
  2. qiao.on('#todolist li', 'tap', function(){
  3. qiao.h.fire('detail', 'detailItem', {id:$(this).data('id')});
  4. });

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

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

2.evaljs传值

这种方法不做推荐，但是偶尔也可以使用，

切不可所有传值都用evaljs传值，

在页面调用目标页方法：

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

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

  1. function showBackBtn(){
  2. $('.menua').removeClass('mui-icon-bars').addClass('mui-icon-back');
  3. $('.adda').hide();
  4. }

自定义样式

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

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

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

结语

当你遇到疑难问题，开发不下去的时候，

90%的问题可以迎刃而解。

更多教程：

HBuilder开发App教程：http://uikoo9.com/book