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

说说几个名词

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增强表现。

这里写图片描述

然后:当我们使用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

posted @ 2017-05-01 23:11 devilyouwei 阅读(...) 评论(...) 编辑 收藏