懂商业的技术合伙人(14)：使用HTML5开发App客户端，HTML5+和MUI框架基本介绍
我非常倾向使用HTML5，搞定PC Web、Mobile Web、Android和iOS、微信小程序等各种UI开发。
作为技术人员，一次学习，处处使用，是个美好的愿望。
本文把2014~2017年，零散研究的HTML5+、MUI等技术做了归纳总结，重点在于把
Dcloud这个公司官网列的技术，关系梳理清楚了。
总体纲领清楚了，剩下的就是需要啥，就认真学啥，写代码就是了。
一、背景
App开发已经普及，Android和iOS原生开发需要人手较多，开发较慢。
大公司尝试新业务，早期创业公司做项目，更在乎效率，抢时间，因此需要一种快速开发App的方式。HTML5是一种比较好的方式，在新闻等侧重内容和展现的场景，更为合适。
HTML5+规范，就是一种使用HTML5开发App的方式，MUI框架是根据HTML5+API封装的框架。
二、App客户端开发的3种模式
1、原生
Android平台Java，iOS平台Object-C。
案例：京东购物
2、原生+HTML5
主要功能原生开发，分支功能和第三方服务使用HTML5。
案例：
a.微信
原生开发：微信、通讯录、发现、我
HTML5：我-钱包-第三方服务（摩拜单车、火车票机票、京东优选）
b、京东Me
原生开发：消息、通讯录、应用、我
HTML5：具体的应用（流程中心、去哪吃、员工用车、餐券）
3、HTML5
使用HTML5，布局使用HTML5，事件处理用JS，界面样式使用CSS。
标准：HTML5+
框架：封装HTML5+API而成的MUI
案例：“聊天通讯录”。
三、HTML5中国产业联盟和HTML5+规范
1、官方网站
2、规范列表
3、API示例-照相机模块
4、代码示例
3个例子
a.加速度传感器
b.Ajax网络请求
c.本地UI
四、Native.js
1、概述
Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。
如果说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。
HTML/JS/Css全部语法只有7万多，而原生语法有几十万，Native.js大幅提升了HTML5的能力。
NJS突破了浏览器的功能限制，也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。
NJS编写的代码，最终需要在HBuilder里打包发行为App安装包，或者在支持Native.js技术的浏览器里运行。目前Native.js技术不能在普通手机浏览器里直接运行。
2、代码示例
原生Android例子：
NJS例子：
五、HTML5+ Runtime
说完性工能里的工具，再说说能力。
HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。
5+ Runtime分3个层次解决了HTML5与原生的能力差距。
常用的API – HTML5plus
封装成跨平台的HTML5plus规范，并将规范公开于www.HTML5plus.org，不做厂商私有API。
包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。
其他原生API – Native.js
原生API在iOS和Android上各自有40多万，有些API并不常用，而且不具有跨平台特性，比如ios的game center api。太多的API封装到HTML5plus里，会过多增加runtime的体积，但若有需求要使用这些api又很麻烦。
我们有一项突破性的技术来解决上述烦恼—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
更多原生SDK引入 – 5+ Runtime SDK
假使有一些原生的三方SDK想引入到5+ Runtime，比如身份证扫描SDK，可以通过5+ Runtime的原生桥接机制进行扩展。
我们也支持5+ SDK，把5+ runtime作为一个SDK放入到其他原生App中，用5+ SDK替代webview，和原生层交互通信。
iOS SDK开发教程详见：http://ask.dcloud.net.cn/article/67
Android SDK开发教程详见：http://ask.dcloud.net.cn/article/66
通过HTML5plus规范、Native.js技术以及原生SDK，这3种机制使得5+ Runtime拥有完全不输于原生App的能力。
六、MUI框架
最接近原生体验的移动App的UI框架。
主要内容：UI组件、窗口管理、事件管理、Ajax、下拉刷新、上拉加载、
代码示例：
1、聊天通讯录
2、官方完整示例App-HelloMui
七、HTML5+ SDK
HTML5+ 的SDK，是把5+ runtime封装为原生SDK，它有3个用途。
1. 使用HTML5+ SDK实现本地打包。
2. 通过原生代码扩展HTML5+ runtime的功能。
3. 在现有原生项目中使用HTML5+ SDK替换原有的webview，以获得更强的web增强表现。
观点：HTML5+和MUI，好在使用HTML5快速开发。在原生应用中，通过SDK利用HTML+的功能，似乎体现不出自身的独特性。原生应用中，可以集成的SDK和框架，太多了，多一个不多，少一个不少。
八、开发工具HBuilder
基于Eclipse定制的IDE，主要用作HTML5开发，Web前端（html、js、css），App开发和打包。
最全语法库和浏览器兼容数据，HBuilder的语法库包括W3C的HTML、JAVASCRIPT、CSS的正式标准和推荐标准...，ECMAScript中浏览器支持的部分，还有各大浏览器的扩展语法，webkit、moz、ms，均实时更新到各浏览器的最新版本。
自动提示非常准确快速。
教学项目：HelloHBuilder
九、流应用
流应用-让应用边用边下，类似流媒体，实现5秒内启动应用。
十、总结
背景：需求和场景
APP开发3种模式的选择，选HTML5，为了快速开发
HTML5+产业联盟定义了一套规范，NativeJS是规范中比较特殊的一部分，可以调用原生代码。
5+Runtime实现了这套规范，是一套运行时环境。
5+SDK扩展了能力。
MUI，界面框架。
工具HBuilder。
最后介绍流应用。