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

原创 2015年07月06日 23:10:47

前言

前几篇说到一些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/detail/3

更多学习笔记:http://uikoo9.com/book

版权声明:本文为博主原创文章,未经博主允许不得转载。

MUI+H5plus+HBuilder开发app(android,ios)介绍

前言现在介绍一款只需要懂html+css+js就能开发app的框架,不需要懂原生语言,完全只需要前端web工程师就能独立开发出android和ios的应用,且一套代码搞定,效率很高。(其实更省事可以w...
  • rth362147773
  • rth362147773
  • 2017年08月12日 21:01
  • 3212

mui开发APP教程之使用选项卡跳转子页面

首页HTML代码:
  • zhy13087344578
  • zhy13087344578
  • 2017年04月28日 08:17
  • 1901

MUI-开发移动APP

一、下载hbuilder 下载链接:http://www.dcloud.io/mui.html 二、创建MUI项目 三、MUI模板中内嵌了许多写好的demo直接参考 其中有许多未知的b...
  • weixin_38983929
  • weixin_38983929
  • 2017年12月26日 15:01
  • 94

mui开发的app例子,非常好资源,适合初学者

  • 2018年01月17日 22:31
  • 7.79MB
  • 下载

mui开发的租房app

  • 2017年07月22日 21:34
  • 10.93MB
  • 下载

HTML5+开发移动app教程3-mui开发示例

前言 看了前面两篇内容是否有点跃跃欲试了? 下面就开始一个简答的例子,以及mui相关内容 mui 官网:http://dcloudio.github.io/mui/ 说明:希望你可以...
  • uikoo9
  • uikoo9
  • 2015年02月04日 14:29
  • 107931

mui开发APP教程之mui.ajax请求后出现“加载中”

利用mui.ajax想服务器请求数据会出现请求超时的情况,一般超时的时间为10秒,那么 出错了的时候,这10秒钟不可能给用户白屏,即便是请求成功之后打开一个新页面,那么这个间隔时间也给用户相应。但是...
  • zhy13087344578
  • zhy13087344578
  • 2017年04月25日 11:22
  • 10938

HBuilder开发App教程02-环境搭建,HelloWorld以及真机调试

环境搭建 前言 用HBuilder做开发,其实可以说是最简单的一种环境搭建了,甚至可以说没有环境需要搭建, 想想android开发的时候,相当痛苦,下载各种sdk,而且都需要翻墙,苦不堪言。...
  • uikoo9
  • uikoo9
  • 2015年07月03日 00:14
  • 44704

Hbuilder MUI webApp开发视频教程 全套课程视频

  • 2018年01月26日 10:14
  • 385B
  • 下载

HBuilder开发App教程

奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技...
  • u013378580
  • u013378580
  • 2016年03月25日 14:26
  • 9880
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HBuilder开发App教程04-最难搞定的是mui
举报原因:
原因补充:

(最多只允许输入30个字)