mui开发app之html5+,5+Runtime,5+sdk,native.js

时间：2021-11-12 16:22:17

说说几个名词

html5：目前最新的html规范，w3c联盟制定，手机端主要由webkit实现规范，对用户来说就是浏览器实现了它

html5+：html5本身是为浏览器而生，不能支持大部分移动端的API，所谓“+”，则是对html5在移动端的扩展，“中国html5+产业联盟”规范了html5+并且实现他们，html5+是对常用的原生API的js封装，包括手机上的相机，陀螺仪等31个常用API（android和ios通用），这些是html5没有的API

native.js：native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。上面的html5+就是他的一个实现好的子集。native.js不是js框架，是技术！

如果说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。

5+Runtime：native.js的运行时，相当于.net对C#，JRE对于JAVA，是一个运行环境，有把Native.js映射到java，oc代码的原生API功能，从而实现原生的调用。

对于5+Runtime和native.js的关系可以理解成：native.js是一种语言(语法基于js)，5+runtime是这语言的运行环境！

html5+sdk：软件开发工具包，它和android sdk，ios sdk一样

HTML5+ 的SDK，是把5+ runtime封装为原生SDK，它有3个用途。

  1. 使用HTML5+ SDK实现本地打包。
  2. 通过原生代码扩展HTML5+ runtime的功能。
  3. 在现有原生项目中使用HTML5+ SDK替换原有的webview，以获得更强的web增强表现。

mui开发app之html5+,5+Runtime,5+sdk,native.js

然后：当我们使用dcloud的mui框架做应用开发的时候

有这么几种情况！

仅仅使用html5的语法：

即浏览器级的html5+js+css，不需要打包成app，可以使用mui框架里的css样式和部分js，与开发传统的wap手机页面相同，相似的其他框架有诸如：jquery mobile，amazeui等等。

这样开发只适合制作微信公众号，手机网页等等，并且只能在浏览器中使用应用，不过相比于html4已经强大不少。

需要在mui.init()之后才能使用mui这个对象，调用其中部分的js方法，为什么说部分是因为。。。请往下看！

使用html5+提供的plus对象

mui中有个plus对象，他不是简单的使用html5的功能，而是提供了一个叫html5+的API集，并且将他们封装在了这个plus对象中，里面有陀螺仪，map，定位，相机，文件流等等的原生功能调用接口！

plus这里面的对象就必须在mui.plusReady()之中使用，，而上面说浏览器级别的只能使用mui部分的js对象和方法就是这个原因！如果不是用html5+，你并不需要使用plusReady方法，只需要在用mui之前mui.init()一下就可以，这也是经常有人问的mui.init()和plusReady()的区别。

mui.plusReady()是为“html5+”而生的，最终通过“html5+sdk”打包成了app级别才能使用，因为这plus对象里面的东西最终会被映射成为java（android sdk），objective-c（ios sdk）的代码，这也是native.js的技术咯！

说太多也不好理解，这些底层的实现都已经由dcloud团队领导的“中国html5+产业联盟”（社区）实现了，我们只要知道我们写的plus对象的js代码都会被转化为原生代码，app就能实现很多原生功能的调用。

注意：plus这些东西在浏览器级别是不支持的，所以不可以在普通浏览器中调用这个plusReady，以及plus.xxx.xxx方法等，浏览器用mui框架只是一部分可用的而已（刚刚说过了，再啰嗦一下）！

要使用html5+就要求我们打包成app（使用html5+sdk），有5+Runtime，这样即可运行plus对象下的对象和方法，这个打包可以由hbuilder实现。（称之为：调试基座，html5+的功能要在调试基座中实现，即5+runtime）

这些都是app级别的了

html5+规范也不够用了

完全有这种可能，毕竟html5+是规范性的，不能什么原生API都往里面塞对吧，他实现的是基本的，常用的一些原生API调用，比如相机，定位，陀螺仪，文件流等等等。。。

（有31个，详细请看：http://www.html5plus.org/doc/h5p.html）

其实真正的原生语法有几十万个，提供API数不胜数，不可能一一调出来，html5+把几个常用的被规范化提出来而已。

要使用其他的原生语法并映射成为js就要用到比html5+更厉害的native.js了

native.js是对html5+的扩展（超集），是映射到原生代码的原理，交给原生代码去实现原生开发的功能，可以简单说成是把js代码转化为java代码了，当然java也不过是JVM虚拟机上跑的，最终还被转换了二进制，计算机编程实现就是这样一层一层往下丢的啦！

注意：native.js不是一个js框架，和node.js命名一样，是一种技术实现，专门把js映射成底层代码，或者说是js在app开发上的一种实现！就像node把js带入了服务器和系统领域一样的道理。

使用native.js需要对原生语法，api十分的了解，你至少要学过android或者ios开发，否则你只能copy别人代码也不知道为什么这么写！

下面举个例子，就懂了为什么你不懂原生就不能搞native.js：

function plusReady(){

    // 导入Native.js需要的原生对象

    Activity = plus.android.runtimeMainActivity();

    BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");

    StringBuffer = plus.android.importClass("java.lang.StringBuffer")

    Byte = plus.android.importClass("java.lang.Byte");

    CompressFormat = plus.android.importClass("android.graphics.Bitmap.CompressFormat");

    bBitmap = plus.android.importClass("android.graphics.Bitmap");

    ByteArrayOutputStream = plus.android.importClass("java.io.ByteArrayOutputStream");

    Base64 = plus.android.importClass("android.util.Base64");

    //viewClass = plus.android.importClass("android.view.View");

    document.getElementById("btGetCapture").disabled="";

}

看到没这是一个html5+没有的截屏功能，是通过native.js扩展实现的

里面出现了大量的importClass，写过java就明白了，这不是java在导入包吗？？

是的，native.js就是实现了js导入java包，并且最终使用java的代码来实现功能

总之

  1. native.js使得开发html5 app更加接近原生，因为他可以用原生一样的语法调用原生的对象（映射）
  2. 要懂原生开发才能*定义或者使用已有的API功能实现
  3. 个人建议是能不用native.js则不用，多用已经实现的html5+（其实这些也是native.js实现了，不过被封装好了不用自己去import什么的）

参考别人做好的native.js对原生功能调用：http://ask.dcloud.net.cn/article/114

关于其它的hybrid框架开发app：http://www.360doc.com/content/15/0423/18/21412_465487870.shtml

相关文章