前言

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

HBuilder开发App教程04-最难搞定的是mui的更多相关文章

  1. HBuilder开发App教程06-首页

    实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建 ...

  2. HBuilder开发App教程05-滴石和websql

    滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...

  3. Hbuilder开发app实战-识岁06-face++的js实现【完结】

    前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...

  4. Hbuilder开发app实战-识岁03-文件上传

    前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...

  5. HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试

    No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...

  6. HBuilder开发APP自动登录时跳过"登录页面"

    刚接触开发公司APP项目,用HBuilder开发工具. manifest.json中的入口页面就是"登录页面",现在获取到自动登录状态是true,但是真机联调时"登录页面 ...

  7. hbuilder 开发app 自动升级

    使用huilder 开发app  ,实现app升级功能 1. var wgtVer = null; //用于获取系统当前版本 var currentversion = null; //用于获取系统最新 ...

  8. 学用HBuilder开发App的看过来

    自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...

  9. 基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射

    上一篇文章(https://www.cnblogs.com/meowv/p/12961014.html)集成了定时任务处理框架Hangfire,完成了一个简单的定时任务处理解决方案. 本篇紧接着来玩一 ...

随机推荐

  1. C#获取IPv4代码

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.C ...

  2. JS对象引用

    对象和函数都是引用的关系(改变后者会改变前者) 但是下面这个列子情况不一样了.刚开始的时候 B 引用了 A的地址,后来B又重新赋值,新占了一个地址,A   B俩的关系已经脱离. 那么有的时候,我们只有 ...

  3. [Unity]C#.数据类型总结

    C#中的数据类型 [TOC] 通用类型系统 C#中,变量是值还是引用仅取决于数据类型 所有的数据类型都是对象.因为它们具有自己ide方法和属性 int int_value = 101; //调用*in ...

  4. Python之路:线程池

    版本一 #!/usr/bin/env  python # --*--coding:utf-8 --*-- import Queue import threading class ThreadPool( ...

  5. html 自定义标签的作用

    比如早期的时候,如果浏览器不支持 nav 这个标签的话, style标签中的样式 nav {color: yellow}会不起作用,字体不会变黄. 怎么处理兼容性呢? 用 javascript. 加上 ...

  6. Xcode7 免证书真机测试

    Xcode很早就有个免证书测试,今天我自己也测试了一把,还是挺好用的,接下来,我就说一下我的大体过程: 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题 ...

  7. 轻量级sqlite是增删改查

    --创建数据库 create database ios --使用数据库 use ios --创建数据表 create table student ( stuid int primary key aut ...

  8. iBATIS的多对多 数据库设计及实现

    iBATIS的多对多映射配置方法和多对一映射配置方法差不多,不同的是,多对多映射,数据库设计上需要一个记录两个类关系的中间表,本文以学生-老师为例,在iBATIS的sqlmap中配置多对多关系. iB ...

  9. corosync集群的选举算法

    <Cluster Concepts> http://linux-ha.org/wiki/Cluster_Concepts <Managing Computers with Autom ...

  10. PHP 多线程、多进程

    多线程:PHP其实并不支持多线程,只是通过一些扩展或者socket方式伪装成多线程,实质不是的.在PHP 5.3 以上版本,使用 pthreads PHP扩展,可以使PHP真正地支持多线程:或者使用 ...