mui开发注意事项

Mui HTML5开发框架

mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验;这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文;想了解mui更详细的信息,请访问mui官网。

DOM结构

关于mui页面的dom,你需要知道如下规则:

固定栏靠前

所谓的固定栏,也就是带有.mui-bar(类选择器)属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;

### 一切内容都要包裹在mui-content中

除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

.mui-bar-nav ~ .mui-content {

padding-top: 44px;

}

.mui-bar-footer ~ .mui-content {

padding-bottom: 44px;

}

.mui-bar-tab ~ .mui-content {

padding-bottom: 50px;

}

你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,

建议将除固定栏之外的所有内容,全部放在.mui-content中。

始终为button按钮添加type属性

若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

窗口管理

页面初始化:必须执行mui.init方法

mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;

页面跳转:抛弃href跳转

当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用

[mui.openWindow方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;扩展阅读:

hello mui中的无等待窗体切换是如何实现的

提示HTML5的性能体验系列之一 避免切页白屏

页面关闭:勿重复监听backbutton

mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑(例如编辑页面的返回,需用户确认放弃草稿后再执行返回逻辑),则需要重写mui.back方法,切勿简单通过addEventListener添加backbutton监听,因为addEventListener只会增加新的执行程序,mui默认封装的监听执行逻辑依然会继续执行,因此若仅addEventListener添加用户确认框,则用户即使选择了取消,也会继续关闭窗口。

手势操作

点击:忘记click

快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,统统使用如下代码:

element.addEventListener('tap',function(){

//点击响应逻辑

});

跨平台移动APP开发进阶(一)mui开发注意事项的更多相关文章

  1. 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程

    前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plu ...

  2. 移动端App uni-app + mui 开发记录

    前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原 ...

  3. 利用C#开发移动跨平台Hybrid App(一):从Native端聊Hybrid的实现

    0x00 前言 前一段时间分别读了两篇博客,分别是叶小钗兄的<浅谈Hybrid技术的设计与实现>以及徐磊哥的<从技术经理的角度算一算,如何可以多快好省的做个app>.受到了很多 ...

  4. 使用hubuild,mui开发微信app—首页(一)

    写在前面 本系列文章我将介绍一下从零开始利用hubuild,mui实现微信app的开发,该系列是个人学习记录,所以在每篇文章中,都是从怎么去实现开始讲解,然后再把实例中涉及知识点做一个概述. 创建一个 ...

  5. mui开发app之js将base64转图片文件

    之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后 ...

  6. mui开发app之联网应用传输数据

    手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...

  7. mui开发app之webview是什么

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...

  8. mui开发app之cropper裁剪后上传头像的实现

    在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...

  9. 利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

     利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...

随机推荐

  1. 学习在.NET Core中使用RabbitMQ进行消息传递之持久化(二)

    前言 上一节我们简单介绍了RabbitMQ和在安装后启动所出现的问题,本节我们开始正式进入RabbitMQ的学习,对于基本概念请从官网或者其他前辈博客上查阅,我这里不介绍基础性东西,只会简单提一下,请 ...

  2. 数据结构Java版之交换算法(一)

    交换的本质是拷贝,其中拷贝包括两种方式.值拷贝和指针拷贝,在java中没有指针,为此,我们可以理解为地址拷贝,在我看来,指针就是地址. 1.传值方式示例: 由上述示例可得,传值,不能起到交换的作用,原 ...

  3. 1. 两数之和 LeetCode

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [, , , ], target = 因为 n ...

  4. jQuery 遍历 – 后代

    后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...

  5. Java语言程序设计-助教篇

    1. 给第一次上课(软件工程)的老师与助教 现代软件工程讲义 0 课程概述 给学生:看里面的第0个作业要求 2. 助教心得 美国视界(1):第一流的本科课堂该是什么样?(看里面的助教部分) 助教工作看 ...

  6. dynamic initializer和全局变量

    "慎用全局变量,包括全局静态变量" 是众所周知的原则,因为全局变量除了会增加程序的维护成本. 如果全局变量是个复杂的对象,并且还使用其他的全局变量,那情况就变得复杂的多.因为全局变 ...

  7. Java进阶(四十四)线程与进程的特征及区别

    线程与进程的特征及区别 定义及特征 进程   指在系统中能独立运行并作为资源分配的基本单位,它是由一组机器指令.数据和堆栈等组成的,是一个能独立运行的活动实体. 进程的特征: 1.动态性:进程的实质是 ...

  8. Gazebo機器人仿真學習探索筆記(三)機器人模型

    gazebo_models:https://bitbucket.org/osrf/gazebo_models 模型庫下載,可以參考如下命令: ~/Rob_Soft/Gazebo7$ hg clone ...

  9. android ndk之hello world

    前言:Android NDK r7及以上的版本已经集成了Cygwin编译环境,也就是说,我们完全可以抛弃庞大的Cygwin了. r6及以下版本,也可以抛弃几个G的完整版,使用精简过的Mini-Cygw ...

  10. 4.3、Android Studio突破64K方法限制

    当应用代码和库代码代码超过64K限制时,早期版本的构建系统会出现如下提示: Conversion to Dalvik format failed: Unable to execute dex: met ...