HBuilder开发App教程04-最难搞定的是mui
前言
前几篇说到一些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
HBuilder开发App教程04-最难搞定的是mui的更多相关文章
- HBuilder开发App教程06-首页
实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建 ...
- HBuilder开发App教程05-滴石和websql
滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...
- Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
- Hbuilder开发app实战-识岁03-文件上传
前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...
- HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试
No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
- HBuilder开发APP自动登录时跳过"登录页面"
刚接触开发公司APP项目,用HBuilder开发工具. manifest.json中的入口页面就是"登录页面",现在获取到自动登录状态是true,但是真机联调时"登录页面 ...
- hbuilder 开发app 自动升级
使用huilder 开发app ,实现app升级功能 1. var wgtVer = null; //用于获取系统当前版本 var currentversion = null; //用于获取系统最新 ...
- 学用HBuilder开发App的看过来
自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
上一篇文章(https://www.cnblogs.com/meowv/p/12961014.html)集成了定时任务处理框架Hangfire,完成了一个简单的定时任务处理解决方案. 本篇紧接着来玩一 ...
随机推荐
- AVR之BOOTLOADER技术详解(转)
源:http://blog.csdn.net/zhenhua10/article/details/6442412 ATmega128具备引导加载支持的用户程序自编程功能(In-System Progr ...
- How do JavaScript closures work?
Like the old Albert Einstein said: If you can't explain it to a six-year-old, you really don't under ...
- myeclipse中打开java文件中文乱码
中文乱码肯定是编码与解码不一样导致. 1.如果是平时写代码都没有问题,但是打开其他项目时出现这种问题: window->preferences->General->Content T ...
- android Spinner 续
android Spinner 续 动态增删Spinner中的数据项 public class EX04_09 extends Activity{ private static final Stri ...
- linux操作命令实验
实验内容:文件操作与用户操作实验 实验设备(环境):电脑.Vmware WorkStation 实验步骤: 一.创建新用户bob 目的:练习useradd命令 二.为新用户bob设置口令 目的:练习p ...
- C#+QI的例子
COM中,和我们打交道的是接口,也就是说类对我们是隐形的,那么我们要做开发,要使用这些功能,我们只能通过接口,通过接口暴露出来的方法,COM是一种服务器端/客户端架构,服务器端定义了操作的法,客户端通 ...
- JSON的BUG
问题描述: method_cfg["input_method"][0].asString() 报错误: test1.cpp:40:46: error: ambiguous over ...
- Lucene学习注意要点
相关书籍: <Lucene实战>第二版: <搜索引擎基础教程>: <Lucene搜索引擎开发进阶实战>:(我现在看得书) 学习注意要点: 不要盲目从代码入手,而要先 ...
- runtime - associated(关联)
category和associative作为objective-c的扩展机制的两个特性,category用来扩展类的方法,associative可以用来扩展类的属性.使用associative需要导入 ...
- iOS纯代码手动适配 分类: ios技术 2015-05-04 17:14 239人阅读 评论(0) 收藏
首先说下让自己的程序支持iPhone6和6+,第一种使用官方提供的launch screen.xib,这个直接看官方文档即可,这里不再多述:第二种方法是和之前iPhone5的类似,比较简单,为iPho ...