目 录 | |
---|---|
1 | 初识DCloud\HBuilder\5+\mui |
一、什么是mui
mui是DCloud推出的一款最接近原生APP体验的高性能前端框架
以下是DCloud官方的介绍:
HTML5自出现以来,几经风雨,虽看似很有前途,但实际使用问题太多,DCloud为此踩了无数坑。但我们从未放弃,我们加入了W3C,发起了HTML5中国产业联盟,推出了HBuilder、HTML5plus runtime、mui框架等产品,直到我们终于可以使用HTML5开发出原生体验的App,并且把这些技术公开给开发者。
HTML5过去被称为有“性工能”障碍,即性能不如原生,工具不如原生、功能不如原生。
为了解决这些问题,DCloud在以下方面做了升级优化:HBuilder 和 HTML5plus runtime、mui框架等等,下面我们就围绕“性工能”开始介绍
工具 - HBuilder
A、起因
HTML最开始其实不是一个编程语言,确实用不着什么ide。
但是发展到现在,7w多个语法,js越来越庞大,真开发一个达到原生水准的App,不是用以前的文本编辑器能搞定的。
目前竟然没有一个开发工具能把7w多HTML5语法提示齐全,这不科学,在原生开发里这是不可想象的,xcode之于iOS,eclipse之于Android,vs之于winphone,在语法提示、转到定义、重构、调试等方面都非常高效。
作为同时熟悉原生和HTML5开发的我们,我们在开发HTML5时明显感受到效率低下。
B、强大的语法提示
DCloud花费了很大心血建成了最全的HTML5及浏览器扩展前缀语法库,也开发了强大的语法解析引擎,然后推出了开发工具HBuilder,使得开发者可以准确、高效的编写HTML5代码。而且全免费
C、最快的开发工具
由于DCloud的极客特质,HBuilder同时被打造成了最快的前端开发工具,代码输入法的创新、代码块的优化、emmet的集成、快捷键语法设计、无鼠标操作;HBuilder有句口号:为极客、为懒人、为你。
D、环保健康的主题设计
由于我们天天面对屏幕眼睛很受伤,所以设计了绿柔主题以保护开发者的视力健康
E、App开发及部署
当然移动App开发也是HBuilder的优势,Run in device真机调试、打包发行这些功能并非普通的HTML4开发工具会涉及的。如果只是做个网站,HTML4就够了,搞HTML5而不做App,太糟蹋这个技术了。以及云打包还能使得没有mac电脑的程序员可以开发iOS应用。
能力 - HTML5plus Runtime
说完性工能里的工具,再说说能力。
HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案,但是他们自带js api太少了,扩展api需要用原生语言开发,更致命的是这类方案的性能不足。
A、常用的API – HTML5plus
装成跨平台的HTML5plus规范,并将规范公开于www.HTML5plus.org,不做厂商私有API。包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API,可以方便简单的编写,并且可跨平台。
B、其他原生API – Native.js
原生API在iOS和Android上各自有40多万,有些API并不常用,而且不具有跨平台特性,比如ios的game center api。太多的API封装到HTML5plus里,会过多增加runtime的体积,但若有需求要使用这些api又很麻烦。
DCloud使用突破性的技术解决上述烦恼—Native.js,一种把40w原生API映射为JS API的技术。
如果说node.js把js的战火烧到了服务器端,那么Native.js把js战火烧到了原生应用战场。但我们可以使用js直接调原生API,语法是js语法,API命名是原生命名。
比如var obj = plus.android.import( “android.os.Bundle” ); 然后obj.xxx,这个xxx属性就完全是原生对象的属性命名。
对于JSer,他一下就有40w API可以用,瞬间感觉无所不能
Native.js的教程详见:http://ask.dcloud.net.cn/article/88
C、更多原生SDK插件引入 – 5+ Runtime插件
假使有一些原生的三方SDK想引入到5+ Runtime,比如身份证扫描SDK,可以通过5+ Runtime的插件机制进行扩展。或者5+ Runtime预置的地图是百度地图,开发者想换成高德地图,也是类似的做法。
DCloud也支持5+ SDK,把5+ runtime作为一个SDK放入到其他原生App中,用5+ SDK替代webview可以得到更强大的功能和性能。
iOS插件开发教程详见:http://ask.dcloud.net.cn/article/67
Android插件开发教程详见:http://ask.dcloud.net.cn/article/66
通过HTML5plus规范、Native.js技术以及原生插件,这3种机制使得5+ Runtime拥有完全不输于原生App的能力。
性能 - HTML5plus runtime和mui框架
性工能里最后的重头戏是性能。在低端Android手机上,过去的HTML5无法商用,切页白屏、转场卡顿、下拉刷新不流畅、侧滑菜单不流畅。。。众多问题逼迫开发者只能使用原生技术来做应用。
HTML5 App的性能低下,有webview自身的性能问题,也有前端框架的性能问题。