HBuilder mui 手机app开发 Android手机app开发 ios手机app开发
经过一段时间的学习,做公司项目,对mui框架有了更加深入完整的了解,其实刚开始接触HBuilder中的mui框架只是简单的了解,并没有深入的研究,后来由于工作的需求,不得不深入研究,并运用的项目中去。
mui框架采用html5来开发手机app,包括Android跟ISO,真正做到一套代码能在Android跟ISO上很好的运行,一般用html5开发网页,页面跳转采用a连接,这样会导致页面切换时出现白屏,并且页面跳转时会出现动画效果,如果作为pc端还可以,但用来开发手机app的话,效果肯定惨不忍睹,并且浮动元素的抖动,无法流畅下拉刷新、侧滑抽屉卡顿等问题,真的有种摔手机的冲动(自己在开发过程中经常遇到这种想摔手机的情况)。但html5也有其值得运用的地方,比如html5可以在Android和ISO尚很好的运行,
而且出了特殊情况,基本上不存在浏览器之间的兼容问题,这样就大大的提升了html5在手机app上的可运用性。mui采用预加载解决切页白屏问题,通过封装原生动画解决SPA模式的动画卡顿。
以下内容来自HBuilder官网(http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/91)
mui官网 http://dev.dcloud.net.cn/mui/
mui开发文档 http://dev.dcloud.net.cn/mui/ui/
MUI为何诞生
性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。
浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

其实我们原本是开放心态,大家随意使用自己喜欢的前端框架。但是其他移动App框架实在不给力:
- 基于jq的jqmobile,性能低的无法忍受
- 基于angular的ionic,都把pc端很重的东西引入到移动App中。angularjs本身设计是为了pc端网页的双向数据绑定,做个移动App干嘛用这么重的东西。
- bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的感觉。
于是为了方便广大开发者,我们制作了mui。
MUI的定位是:最接近原生体验的移动App的UI框架
基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。
所以请大家注意,mui有所为有所不为:
mui不是jq,不封装dom操作
与ui无关的mui不做,你愿意用jq或zepto就自己用,并不冲突。
但我们并不建议在移动App里引入jq或zepto这些框架,原因如下:- 为了性能,层层封装的框架,尤其是遍历循环dom时,影响效率,尤其在低端Android手机上,我们费死劲了才把性能以毫秒为单位一点点提升,搞这个的dom框架进来就让很多努力又付诸东流。
- 原生JS挺简单,为何需要jq?
jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能。但jq根本就不是为手机设计的。
手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom。
而且HBuilder提供了代码块来简化开发,敲dg、dq,直接生成document.getElementById("")、document.querySelectorAll(""),非常快捷方便,而且执行性能非常高,而且没有浏览器兼容问题。
发现很多开发者只会jq,反正想继续在App里使用jq没有问题。但也建议大家多学学js本身。
mui与vue、react、angular也不是一个层面的东西,可以在一个工程里混合使用。但在大多数ui控件上,应该直接使用mui的写法,因为mui的绘制是最朴素的HTML绘制,不是经过js操作的绘制,这种方案的效率比经过js绘制的效率要高很多。只有必须经过js操作才能渲染的控件,比如ajax联网后填充的list,此时使用vuew或react都可以。
mui、HTML5+、5+Runtime的关系说明
mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。
有点类似于bootstrap、w3c和chrome os的关系。
HTML5+规范隶属于http://www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。
DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。
为了提升体验,mui势必会调用一些5+Rutime的增强能力,主要是plus.webview、plus.nativeobj和plus.nativeUI。
但mui不是要替代HTML5Plus,以后也无计划替代把所有5+的api都包一层。
mui是把一些常用的窗体操作封装了,但这种封装适应面也是有限的,遇到复杂窗体管理,还是要仔细了解plus的api。
所以,- 有人抱怨mui的文档不全,其实是缺本文,本文终于说清楚mui做什么不做什么了。详细的mui文档要去下方提示的mui官网查看。
- 有人抱怨mui api不全,其实是没去看plus的api。知原理、知如何封装,方能融汇贯通。
- 有人抱怨Hello mui示例代码里写的mui的方法,为何文档里没有,是因为有些方法是内部工程师简化开发中的封装,未考虑通用设计,还不足以开放为标准api,所以文档里没介绍。
mui有插件体系
为了简化开发者的多端发布开发,mui在核心库之外,补充了一些插件,这些插件不一定是ui相关,也有业务相关。
在Hello mui示例里下方的示例模板,基本都属于插件。这些插件的使用需要加载mui标准库之外的js等资源。
HBuilder mui 手机app开发 Android手机app开发 ios手机app开发的更多相关文章
- 触摸屏网站开发系列(一)-ios web App应用程序(ios meta)
触摸屏网站的开发其实现在来讲比前几年移动端网站开发好多了,触摸屏设备IOS.Android.BBOS6等系统自带浏览器均为WEBKIT核心,这就说明PC上面尚未立行的HTML5 CSS3能够运用在这里 ...
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- Web程序员开发App系列 - 调试Android和IOS手机代码(补图)
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- iOS 的 APP 在系统中如何适配不同的屏幕的尺寸
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...
- [转]iOS hybrid App 的实现原理及性能监测
转自:http://www.cocoachina.com/ios/20151118/14270.html iOS hybrid App 的实现原理及性能监测 2015-11-18 11:39 编辑: ...
- 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(12)-Fiddler设置IOS手机抓包,你知多少???
1.简介 Fiddler不但能截获各种浏览器发出的 HTTP 请求,也可以截获各种智能手机发出的HTTP/ HTTPS 请求. Fiddler 能捕获Android 和 Windows Phone 等 ...
- iOS保持App真后台运行
https://www.jianshu.com/p/d466f2da0d33 在我看来,苹果系统与安卓系统最直观的区别就是后台处理方式了吧,安卓手机一旦开启了很多app放到后台,即使前台什么也不做,就 ...
- ios手机处理keyup事件时的兼容性问题
在安卓手机中没有任何问题,但在ios手机中出现当输入法中输入内容时,事件keyup没有效果 解决办法: //keyup的兼容性处理 var bind_name = 'input'; if (navig ...
- 将批量下载的博客导入到手机后,通过豆约翰博客阅读器APP(Android手机)进行浏览,白字黑底,保护眼睛,图文并茂。
首先下面演示的博文来自于以下地址:http://www.douban.com/note/423939291/ 需要先通过博客备份专家将导出的博文导入到手机(还不会用的朋友请先阅读http://www. ...
随机推荐
- 「CF585E」 Present for Vitalik the Philatelist
「CF585E」 Present for Vitalik the Philatelist 传送门 我们可以考虑枚举 \(S'=S\cup\{x\}\),那么显然有 \(\gcd\{S'\}=1\). ...
- python使用selenium,webdriver自动下载百度网盘内容
想实现一个自动下载微信公众号分享百度网盘图片链接的爬虫,使用selenium和火狐的webdriver进行完成 1.首先根据自己的浏览器下载相应的webdriver驱动器,python中导入selen ...
- Unittest方法 -- 测试固件(TestFixture)
前置和后置 1.setUp:在写测试用例的时候,每次操作其实都是基于打开浏览器输入对应网址这些操作,这个就是执行用例的前置条件.2.tearDown:执行完用例后,为了不影响下一次用例的执行,一般有个 ...
- Beam Search快速理解及代码解析(上)
Beam Search 简单介绍一下在文本生成任务中常用的解码策略Beam Search(集束搜索). 生成式任务相比普通的分类.tagging等NLP任务会复杂不少.在生成的时候,模型的输出是一个时 ...
- 支付二维码整合 - 三码合一支持支付宝、QQ、微信
支付二维码整合 - 三码合一支持支付宝.QQ.微信 1. 前提:获取各个二维码的具体内容 在写代码前,我们需要先获取不同支付方式的二维码内容.很简单,只需要打开各个支付码,截图,然后随便找个可以扫码的 ...
- WEB安全新玩法 [9] 重置密码之验证流程防绕过
一般来说,业务流程中出现多个操作环节时,是需要顺序完成的.程序设计者往往按照正常用户的操作顺序实现功能,而忽略了攻击者能够绕过中途环节,直接在后续环节上进行非法操作.iFlow 业务安全加固平台能够在 ...
- DC-4靶机
仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-4.zip 一.主机扫描 arp-scan -l nmap -p 1-65535 -A -sV ...
- 论文笔记:(2017NIPS)DeepSets
目录 摘要 一.引言 二.置换不变性和等变性 2.1 问题定义 2.2 结构 2.3 相关结果 三.Deep Sets 3.1 架构 3.2 其他相关工作 四.应用和实验结果 4.1 设置输入标量响应 ...
- Hive之分析函数
目录 一.sum() over(partition by) 二.avg().min().max() over(partition) 三.row_number() over(partition by) ...
- 关于MySQL8的WITH查询学习
目录 前言 示例 练习 总结 前言 对于逻辑复杂的sql,with可以大大减少临时表的数量,提升代码的可读性.可维护性 MySQL 8.0终于开始支持with语句了,对于复杂查询,可以不用写那么多的临 ...