《近匠》HBuilder：如何用JS调用几十万原生API？
发表于 18:02|
作者翟方庆
摘要：《近匠》第25期：HBuilder是DCloud开发的一套Web开发IDE，它通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、css的开发效率。更有意思的是，它可以利用JS调用原生API。
CSDN：请讲讲团队和您以往的从业经历？
DCloud CEO王安：我们团队从03年起开始做手机App，从J2me、Symbian、Win mobile、Brew一直做到现在的Android、iOS和WP。之前一直在为企业市场提供跨平台手机App的无线中间件。
后来我们看好HTML5的前途，而且也经不住toC市场的诱惑，就毅然出来二次创业。成立了
，开始做基于HTML5的生态系统服务，包括开发工具和云服务。
我们是W3C的会员，也是HTML5中国产业联盟的发起单位。我们是一个典型的轻团队，人不多，但极客化。我们的合伙人之一王淮也在Facebook工作了很久，给我们带来了很多硅谷的模式。
CSDN：为什么要做HBuilder这样一款工具？
王安：人称HTML5是“性、工、能”缺失，其中“工”指工具不给力，确实如此。
任何主流编程语言，都有优秀的开发IDE，不管是java、.net、Obj-C，但HTML5领域却一直在用低效的文本编辑器开发。我个人用了十几年文本编辑器，对比我熟悉的其他语言的IDE，效率也实在让我受不了。我们就动手开发了HBuilder。
HTML十几年前初生时，是简单的标记语言，确实文本编辑器足矣。那时候写页面的人都不被视为真正的程序员。但时代不同了，现在JS、css已经发展为真正的编程语言，一个工程会非常庞大，此时没有IDE会很低效。就像用文本编辑器写java或Obj-C一样，效率比专业IDE差很多。
过去也确实没有太好的HTML5 IDE，更不用提免费的好工具。因为web IDE开发确实很困难，web语法库没有统一标准，月月更新，JS是无类型的动态语言……
但是有问题，就会有解决问题的人。所以我们花费大力气，建立最全的语法库和浏览器兼容数据库，开发动态JS解析引擎，开源框架语法库。并且我们在开发效率提升上下了非常大的功夫，快是HBuilder最大的特点，能提升数倍开发效率。
另一方面，HTML5的重要价值是开发手机App，HBuilder为开发者提供移动App开发的全套支持，支持插上数据线真机联调，不需xcode等原生开发环境就能打包手机App。此外，我们有项创新的技术是JS调用几十万原生API。
CSDN：HBuilder是针对移动应用的哪一个环节？在这个环节中，现在是一种什么状况？格局是什么样的？
王安：使用HTML5、JS、css开发跨平台手机App，这类工具其实之前已经有Phonegap、Titanium。从品类相比，Phonegap只有Runtime没有IDE，Titanuim的IDE是为其特殊API而制作的专有工具。但HBuilder是一个通用的HTML5开发IDE且又内置了手机runtime。也就是开发者只需要HBuilder就够了，PC
web、Mobile web、App，一个工具一套代码。
我们推崇一个理念叫“响应式应用”：一套代码根据不同运行环境调用不同能力来优化用户体验。比如文本框，在普通浏览器下就是一个文本输入框，在Chrome浏览器下运行时加个判断调Chrome的语音输入，而运行在App模式下，则再加一个判断调用原生的语音识别SDK，比如plus.speech。这样一个应用可以根据设备的不同而最大化的优化用户体验，这种模式很有魅力，对用户而言体验更好，对开发者而言成本更低。
当然，比其他同类产品更神奇的一点是，HBuilder里能通过JS代码的写法操作几十万原生API，即Obj-C和Android原生的对象。
CSDN：HTML5在跨平台App开发上有哪些问题？
王安：前景美好，但却有四个致命缺点阻碍它的爆发，就是“性、工、能”缺失，碎片化严重。相对于原生，HTML5的App性能低，工具差，能力弱。原生虽然不跨平台，但HTML5的浏览器兼容性也让开发者挠头。HBuilder为了解决这些难题做了很多努力。
1. 先说工具
HBuilder大幅提升了HTML5开发效率。并且也拥有最全且实时更新的HTML5新语法库。浏览器更新版本后一周内其新增的语法就可以被HBuilder提示出来。
HBuilder追求快，还有一个目的，就是降低开发者对框架的依赖。PC Web里框架非常流行，很多框架简化了开发。但是框架的简化开发建立在性能下降的基础上，手机上HTML5本来就慢，层层封装后只会越来越慢。但开发者使用HBuilder会发现，在HBuilder里不用框架开发的速度，比用其他开发编辑器配合框架的速度，更快。
目前主流HTML5开发工具都更新在没有手机真机联调等功能，HBuilder提供了这些功能才能有效的语法库里帮助开发者开发手机App。
2. 浏览器兼容性
由于浏览器内核不同，自有扩展语法多，新语法增加速度快，导致碎片化很严重，而且是持续性的给开发者造成困扰。HBuilder里每个语法，都有浏览器兼容性说明，是目前最全的浏览器兼容数据库。见下图，-webkit-user-select这个属性的值域all，IE和Firefox自然不支持，图标为灰色。但同为webkit内核，Chrome支持；而Android浏览器不支持，图标为灰色；Safari也只有7.0以上才支持，图标是半亮。
有人说手机上都是webkit内核浏览器，应该没有兼容性问题。但上图告诉开发者残酷的真相：iOS、Safari、Android浏览器、Chrome安卓版，主流的3款手机浏览器一样有兼容性问题。Google和Apple联手打破IE的垄断后，又开始分裂，Chrome去年另起了Blink引擎，开始独立扩展语法。另外虽然Safari的Mac版和iOS版有点差别，但不多；而Chrome的Android版和Android系统自带的浏览器完全是2个产品。作为开发者，我甚至有点怀念IE垄断市场的日子。
我们努力做出这个浏览器兼容库，希望可以帮助到广大开发者。
HTML5规范的好处是跨平台的，但坏处是规范能力比原生差非常多。为了解决这个问题，我们推出了两套方案：HTML5+的跨平台规范和JS直调原生API。
HTML5+的跨平台规范：开发者常用的手机能力，封装在HTMLplus.org规范里，包括二维码、语音输入等，比如在JS里输入plus.barcode调用二维码，plus.speech调用语音输入。开发一次在不同手机上都可以运行。
JS直调原生API：我们提供了plus.ios和plus.android这2个很神奇的对象，使得web开发者不用学习Obj-C，不用买Mac设备，就能在JS里调用原生对象。我们可以这么定义一个JS变量，但实际上是Obj-C对象：我们可以这么定义一个JS变量，但实际上是Obj-C对象：JS直调原生API：我们提供了plus.ios和plus.android这2个很神奇的对象，使得web开发者不用学习Obj-C，不用买Mac设备，就能在JS里调用原生对象。我们可以这么定义一个JS变量，但实际上是Obj-C对象：
var a = plus.ios.implements("NSObject",{"authenticationChanged:":authenticationChanged});
或者如下图中的：var Intent = plus.android.import("android.content.Intent");其中的"android.content.Intent"是Android的原生类。这段代码就是使用JS方式给在安卓手机桌面创建一个App快捷方式。
这样，使用HTML5编程的App，在能力方面就和原生一样强大了。 以前用HTML5做的游戏都无法调用Game Center，O2O应用也调不了Passbook，现在这些都轻而易举。我们相信这对于web工程师而言，是极大的能力解放，充满机会的一扇新窗口！
HTML5应用的性能一直是这个产业发展的瓶颈。
手机硬件比PC差、HTML5作为解释性语言比原生的编译型语言性能差、手机浏览器的默认控件样式未优化导致需要在应用层重新封装UI。这一系列问题叠加在一起，使得性能成为所有HTML5开发者心头的痛。
另外前端工程师大多长于UI，相比服务器工程师，他们的代码性能也要低不少。比如前端工程师很习惯使用框架，框架层层封装越来越慢，性能如何上的去。HBuilder在解决这个问题上也花费了很多心血：
　　a. 调用原生绘制界面
　　在HTML5+规范里有一个plus.ui的子集。一些原生样式或动画，比如翻页动画或下拉刷新，使用　　HTML5+JS+css模拟要写很多代码，执行起来很慢，此时通过plus.ui扩展就可以在窗体上设置一　　块区域，交给原生绘制。性能可大幅提升。
　　b. 性能第一的UI库
　　以前宣称为手机优化的框架，其实都不是把性能作为产品取舍的第一优先，或者为了框架使用者　　方便、或者为了框架维护者方便而牺牲了执行性能。我们决定自己做一个。这个项目我们还在开　　发中，不久会上线。
　　我们没有把它称为框架而是叫UI库，是因为这里的控件都是使用最简单的css样式的，直接写　　　class=”xxx”。相比于写成data-role，然后在JS运行时才替换Dom，使用class的方式要高效的　　　多。
　　控件含有的必要的JS代码，也是本着性能优先的原则开发的，代码极其精简高效，没有$等三方　　框架，但又可以跨手机浏览器。并且这套UI库会和HBuilder的打包机、Runtime深度整合，做到　　更高性能的优化。
CSDN：相对于编写大量JS实现来说，HBuilder利用JS调用原生API，有哪些优点？
王安：JS调用原生API，最大的优点，是大大强化了HTML5的能力，突破了浏览器的限制，原生有几十万API，数量远多于HTML5。比如拦截Android来电。
JS的执行效率肯定还是低于原生的，提升性能需要使用前述方案。
这项技术对于JS程序员来讲是非常友好易学的，他不需要学习原生语言和配置开发环境，只需要查询每个原生对象是做什么用的，然后在JS的plus.ios或plus.andriod里把原生类名作为参数传进去，就可以通过JS调用该原生对象的方法。
我们还制作了一批常用原生代码模板，包括创建快捷方式、登录game center的样例代码已经预置在HBuilder里。
CSDN：JS调用原生API，是如何实现的？
王安：这个非常复杂，不同的api需要不同的方法，手机、云、IDE的共同配合。IDE的显示代码、打包机编译、runtime实际运行这几种情况下执行码是不同的。
CSDN：HTML5跨平台开发领域的趋势是怎么的？
王安：HTML5的光明前途是毋庸置疑的，当Java被拦在iOS门外时、当终端和屏幕越来越多样时，HTML5的简单易用和跨平台这些特点都代表了未来的方向。
现在的问题仅仅是阻碍HTML5发展的那几个难题，会在何时、会被哪些人解决。当性能、工具、能力、兼容性得到有效突破时，HTML5必将迎来发展爆发。
CSDN：接下来针对HBuilder，Dcloud还有哪些计划？
王安：除了上面提到的高性能手机UI框架，HBuilder下一步会引入SNS和UGC，强化插件体系，联合众多开发者打造大家更满意的工具和服务。我们很认真的开发着这个免费工具，也希望所有开发者都参与到这个工具的打造中来。目前HBuilder已经在
上设立了3个开源项目，欢迎大家一起打造自己满意的工具。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章输入关键字或相关内容进行搜索
1 人关注该话题
发起了问题 o 1 人关注 o 0 个回复 o 49 次浏览 o
回复了问题 o 2 人关注 o 1 个回复 o 41 次浏览 o
回复了问题 o 4 人关注 o 5 个回复 o 459 次浏览 o
回复了问题 o 1 人关注 o 3 个回复 o 78 次浏览 o
回复了问题 o 5 人关注 o 3 个回复 o 255 次浏览 o
回复了问题 o 2 人关注 o 1 个回复 o 198 次浏览 o
回复了问题 o 2 人关注 o 1 个回复 o 97 次浏览 o
回复了问题 o 3 人关注 o 2 个回复 o 126 次浏览 o
回复了问题 o 5 人关注 o 5 个回复 o 584 次浏览 o
回复了问题 o 2 人关注 o 1 个回复 o 130 次浏览 o
发表了文章 o 4 个评论 o 2909 次浏览 o
发表了文章 o 9 个评论 o 26135 次浏览 o
发表了文章 o 3 个评论 o 505 次浏览 o
获得 1 次赞同, 0 次感谢HBuilder真机联调教程：iPhone/Android联调失败？ - CSDN博客
& & & & HBuilder是HTML5+的集成开发工具，非常好用，如果遇到了技术难题，还可以申请加入官方QQ交流群“
HBuilder官方交流群3
&”，每个交流群都有技术管理员若干，帮大家解决各种HBuilder使用过程中的问题。如果这个群满员了，你可以在这里找到最新的官方交流群：
咳咳，我已经缠着一个管理员两天了，顺便把HBuilder真机联调的使用心得总结一下。
& & & & & &总的来说，HBuilder真机联调和Eclipse的Android真机联调没什么区别，此处我讲一下iOS的真机联调。
& & & & & &首先，要安装iTunes，最好装最新版吧，因为HBuilder要调用iTunes的接口连接iOS设备。连接好后，HBuilder左下角会提示你已经连接iOS设备了：
& & & & &然后我们就可以选择真机联调的设备了：
选好设备后，点击“Run in Device”即可开始真机联调：
在底部的状态栏会显示APP装载的进度，并且控制台中也会显示装载过程中的提示信息。
& & & & & & 如果你都照做了以后，并且在iPhone上多了一个HBuilder图标的APP，那么恭喜你，你已经成功将HBuilder上的APP装载到iOS上了，那么，在iOS设备上点开HBuilder图标APP，就联调完成了。
& & & & & & 不过在此要说明一点，经过我与HBuilder官方交流群的管理人员沟通后获悉，真机联调时，将程序成功装载到iOS设备后，在iOS设备上是不会自动打开联调APP的，需要你手动打开，因为现在技术还做不到自动打开。可能还需要过一些时间才能做到吧，所以大家遇到这个问题就不要见怪了。成功联调后：
& & & & &如果你连上了iOS设备，HBuilder也提示你设备连接成功，但是就是在iOS装载不了联调APP怎么办？
& & & & &我就遇到了这个问题，首先报一下我的调试环境：
& & & & & & & PC操作系统版本：Win 7 64位
& & & & & & &&HBuilder版本：
& & & & & & &&iOS设备：iPhone4，系统6.1.3，已越狱
& & & & & 我遇到的问题是，选择设备并运行后，HBuilder底部状态栏启动进度只能显示到32%，然后就消失了，控制台没有打出任何提示信息，iPhone4上也没有装上调试APP。
& & & & & &首先，我们当然先按官方的解决方案来了：（在HBuilder菜单的“帮助——在线帮助”下，地址是http://www./readme/#title5）
但是没有解决，然后找到官方帮助文档“HTML5Plus应用开发指南”（这个官方文档绝对是新手必备的，主要讲的是HBuilder的基础功能应用，非常齐全，墙裂推荐！！！），这个可以在我的资源中下载哦（不过要交点口水费啊哈哈）：
里面讲的很全，但是还是没有解决我出现的奇葩问题。最后我只能使出撒手锏：强势骚扰官方交流群技术管理员**。多谢他连续两天远程控制我的电脑帮我解决我的问题，感谢这些技术大牛们为我们开发出这么优秀的HTML 5+ IDE。
& & & & 在HBuilder的目录下：HBuilder\plugins\com.pandora.tools.android_1.0.0.\base，有一个Android安装程序（android_base.apk）和一个iOS安装程序(iPhone_base.ipa)。
& & & & 使用91手机助手等工具，将iPhone_base.ipa安装到iPhone上，然后再在HBuilder上选择iOS设备联调，你会发现什么？启动进度依然是32%就没了，控制台依然神马也没有输出，哈哈，不过你打开一下你的iOS上安装的iPhone_base.ipa程序，YES，你的iOS设备上HBuilder
APP运行的就是你要的联调程序。
& & & & &如果Android的出现类似问题，同样的处理办法哦。HBuilder v6.3.1 官方版
所属专题：
软件大小：214.6MB
捆绑插件：无插件
软件语言：简体中文
软件等级：
软件授权：免费软件
制作发行：
更新日期：
论坛转帖：
应用平台：Win8 / Win7 / Vista / WinXP
标签：&&&&&&
HBuilder编辑器，飞一样的编码助手，支持HTML5的Web开发IDE，主要特点就是：快！通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据
HBuilder特性：
1、飞一样的编码速度：
代码输入法：一个数字键，少敲10个按键；
代码块：一个代码块，少敲50个按键；
模糊匹配：跳着敲字母就能匹配到单词；
内置emmet，tab一下生成一串代码；
智能补齐：感知你的意图，自动完成输入；
跳转助手、选择助手，不用鼠标，手不离键盘；......
才比别的工具快5倍？对极客而言，追求快，没有止境！
2、手机APP开发：
用HTML5却不做手机App？那HTML4就够用了；
用HBuilder直接创建移动App，连上数据线真机联调，打包为ios或Android原生安装包。
HTML5能力不够？二维码、语音输入、摄像头、位置、陀螺仪...十几万原生能力随意调用！
HTML5性能不行？原生窗体绘制增强用户体验！
3、震撼的语法提示：
HTML5语法、HTML5+语法、三大浏览器扩展语法，尽收HBuilder中。
每个浏览器发布新版后，一周内，其新增语法就收录入HBuilder。
哦，怎么能忘记js框架，这里有强大到令你震惊的Jquery语法提示！
每个语法在哪个浏览器、哪个版本上是否可运行，这里都有。
没有比这里更全的语法库，也没有比这里更全的浏览器兼容性数据库。
4、保护视力的界面
每天盯着屏幕写代码，程序员的健康非常重要，
为此我们用心设计了HBuilder的视觉主题方案--绿柔。
绿柔不是简单的配色，她不追求酷炫，而追求：
舒适、护眼、和身心健康。
绿柔结合了色彩生理学和色彩心理学，参考了电子书的设计，并根据用户显示器的发光特点，智能调配而成。
HBuilder v6.3.1 官方版
相关软件&相关文章
本类人气榜&文章阅读榜
本周下载榜&总下载榜
Copyright &
AllRights Reserved冀ICP备hbuilder 多个html怎么运行_百度知道
hbuilder 多个html怎么运行
提问者采纳
从Frontpage、Dreamweaver、ue，到Sublime Text和jetbrains的WebStorm，Web编程的ide已经更换了几批。HBuilder是DCloud（数字天堂）推出一款支持html5的Web开发ide。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升html、js、css的开发效率。”问到HBuilder的优势时，DCloud ceo王安表示。HBuilder在HBuilder里预置了一个hello HBuilder的工程，用户敲这几十行代码后会发现，HBuilder比其他开发工具至少快5倍。“最全的浏览器兼容性数据、开发手机App等很多特点也都是HBuilder强于竞品的地方”，王安表示。以“快”为核心的HBuilder，引入了“快捷键语法”的概念，巧妙地解决了困扰许多开发者的快捷键过多而记不住的问题。开发者只需要记住几条语法，就可以快速实现跳转、转义和其他操作。比如alt+[是跳转到括号，alt+’是跳转到引号，alt+字母是跳转菜单项，而alt+左则是跳转到上一次光标位置。而Ctrl则是各种操作，比如ctrl+d就是删除一行。shift则是转义，比如shift+回车是，shift+空格是 。另外，HBuilder的生态系统可能是最丰富的Web ide生态系统，因为它同时兼容Eclipse插件和Ruby Bundle。svn、git、ftp、php、less等各种技术都有Eclipse插件。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。但因为Java效率太低，所以用C写了启动器。HBuilder柔和的绿色界面设计需要动态调节屏幕亮度，它还支持手机数据线真机联调，而这些都是用C写的。HBuilder很多界面，比如用户信息界面都是使用Web技术来做的，既漂亮，开发起来又快。最后，代码块、快捷配置命令脚本，都是用Ruby开发的。“这4种技术各有各的用途，我们团队内部也灵活运用，HBuilder的架构支持不同的技术互相融合通信。至于我们的技术选型原则，首先满足用户需求，然后我们内部用什么技术能更快完成就会选什么技术”，王安解释道。
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁