native.js是什么且如何使用

时间 2019-12-01

标签 native.js native 什么如何使用栏目 JavaScript 繁體版

原文原文链接

native.js是什么且如何使用

1、总结

一句话总结：Native.js技术，简称NJS，是一种将手机操做系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。Native.js不是一个js库，不须要下载引入到页面的script中，也不像nodejs那样有单独的运行环境，Native.js的运行环境是集成在5+runtime里的，使用HBuilder打包的app或流应用均可以直接使用Native.js。

2、Native.js使用入门

一、概述

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技术不能在普通手机浏览器里直接运行。javascript

NJS大幅扩展了HTML5的能力范围，本来只有原生或Hybrid App的原生插件才能实现的功能现在可使用JS实现。
NJS大幅提高了App开发效率，将iOS、Android、Web的3个工程师组队才能完成的App，变为1个web工程师就搞定。
NJS再也不须要配置原生开发和编译环境，调试、打包均在HBuilder里进行。没有mac和xcode同样能够开发iOS应用。
若是不熟悉原生API也不要紧，咱们汇总了不少NJS的代码示例，复制粘贴就能够用。http://ask.dcloud.net.cn/article/114

再次强调，Native.js不是一个js库，不须要下载引入到页面的script中，也不像nodejs那样有单独的运行环境，Native.js的运行环境是集成在5+runtime里的，使用HBuilder打包的app或流应用均可以直接使用Native.js。html

技术要求

因为NJS是直接调用Native API，须要对Native API有必定了解，知道所须要的功能调用了哪些原生API，能看懂原生代码并参考原生代码修改成JS代码。不然只能直接copy别人写好的NJS代码。html5

二、开始使用

2.一、判断平台

Native API具备平台依赖性，因此须要经过如下方式判断当前的运行平台：java

function judgePlatform(){
switch ( plus.os.name ) {
case "Android":
// Android平台: plus.android.*
break;
case "iOS":
// iOS平台: plus.ios.*
break;
default:
// 其它平台
break;
}
}

2.二、类型转换

在NJS中调用Native API或从Native API返回数据到NJS时会自动转换数据类型。node

类型转换表

类型	Objective-C	Java	JavaScript
基本数据	byte/short/int/long/float/double/...	byte/short/int/long/float/double/...	Number
字符	char	char	String
字符串	NSString/@""	String/""	String
数组	@[1,2,3]/NSArray	new XXX[]	InstanceObject
类	@interface	class	ClassObject
对象（实例）	*	*	InstanceObject
空对象	nil	null	null
其它	Protocol	Interface	Object(JSON)

2.三、其余转换

Android原生应用的主Activity对象转为plus.android.runtimeMainActivity()
Android的主Activity对象是启动应用时自动建立的，不是代码建立，此时经过plus.android.runtimeMainActivity()方法获取该Activity对象
Objective-C方法冒号剔除
[pos setPositionX:(int)x Y:(int)y;] 转为 pos.setPositionXY(x,y);
OC语法中方法的定义格式为:
“(返回值类型) 函数名: (参数1类型) 形参1 参数2名称: (参数2类型) 形参2”
方法的完整名称为: “函数名:参数2名称:”。
如:“（void）setPositionX:(int)x Y:(int)y;”，方法的完整名称为“setPositionX:Y:”，调用时语法为：“[pos setPositionX:x Y:y];”。
在JS语法中函数名称不能包含“:”字符，因此OC对象的方法名映射成NJS对象方法名时将其中的“:”字符自动删除，上面方法名映射为“setPositionXY”，在NJS调用的语法为：“pos.setPositionXY(x,y);”。
文件路径转换
Web开发里使用的image/1.png是该web工程的相对路径，而原生API中常常须要使用绝对路径，好比/sdcard/apptest/image/1.png，此时使用这个扩展方法来完成转换：plus.io.convertLocalFileSystemURL("image/1.png")

2.四、概念

2.4.一、类对象

因为JavaScript中自己没有类的概念，为了使用Native API层的类，在NJS中引入了类对象（ClassObject）的概念，用于对Native中的类进行操做，如建立类的实例对象、访问类的静态属性、调用类的静态方法等。其原型以下：android

Interface ClassObject {
function Object plusGetAttribute( String name );
function void plusSetAttribute( String name, Object value );
}

2.4.二、获取类对象
在iOS平台咱们能够经过plus.ios.importClass(name)方法导入类对象，参数name为类的名称；在Android平台咱们能够经过plus.android.importClass(name)方法导入类对象，其参数name为类的名称，必须包含完整的命名空间。ios

示例：web

// iOS平台导入NSNotificationCenter类
var NSNotificationCenter = plus.ios.importClass("NSNotificationCenter");
// Android平台导入Intent类
var Intent = plus.android.importClass("android.content.Intent");

获取类对象后，能够经过类对象“.”操做符获取类的静态常量属性、调用类的静态方法，类的静态很是量属性需经过plusGetAttribute、plusSetAttribute方法操做。objective-c

实例对象

在JavaScript中，全部对象都是Object，为了操做Native层类的实例对象，在NJS中引入了实例对象（InstanceObject）的概念，用于对Native中的对象进行操做，如操做对象的属性、调用对象的方法等。其原型以下：数组

Interface InstanceObject {
function Object plusGetAttribute( String name );
function void plusSetAttribute( String name, Object value );
}

2.4.三、获取实例对象
有两种方式获取类的实例对象，一种是调用Native API返回值获取，另外一种是经过new操做符来建立导入的类对象的实例，以下：

// iOS平台导入NSDictionary类
var NSDictionary = plus.ios.importClass("NSDictionary");
// 建立NSDictionary的实例对象
var ns = new NSDictionary();
// Android平台导入Intent类
var Intent = plus.android.importClass("android.content.Intent");
// 建立Intent的实例对象
var intent = new Intent();

获取实例对象后，能够经过实例对象“.”操做符获取对象的常量属性、调用对象的成员方法，实例对象的很是量属性则需经过plusGetAttribute、plusSetAttribute方法操做。

操做对象的属性方法

常量属性
获取对象后就能够经过“.”操做符获取对象的常量属性，若是是类对象则获取的是类的静态常量属性，若是是实例对象则获取的是对象的成员常量属性。
很是量属性
若是Native层对象的属性值在原生环境下被更改，此时使用“.”操做符获取到对应NJS对象的属性值就可能不是实时的属性值，而是该Native层对象被映射为NJS对象那一刻的属性值。
为获取获取Native层对象的实时属性值，需调用NJS对象的plusGetAttribute(name)方法，参数name为属性的名称，返回值为属性的值。调用NJS对象的plusSetAttribute(name,value)方法设置Native层对象的很是量属性值，参数name为属性的名称，value为要设置新的属性值。
注意：使用plusGetAttribute(name)方法也能够获取Native层对象的常量属性值，但不如直接使用“.”操做符来获取性能高。
方法
获取对象后能够经过“.”操做符直接调用Native层方法，若是是类对象调用的是Native层类的静态方法，若是是实例对象调用的是Native层对象的成员方法。
注意：在iOS平台因为JS语法的缘由，Objective-C方法名称中的“:”字符转成NJS对象的方法名称后将会被忽略，所以在NJS中调用的方法名需去掉全部“：”字符。
类的继承
Objective-C和Java中类若是存在继承自基类，在NJS中对应的对象会根据继承关系递归将全部基类的公有方法一一换成NJS对象的方法，全部基类的公有属性也能够经过其plusGetAttribute、plusSetAttribute方法访问。

三、开始写NJS

使用NJS调用Native API很是简单，基本步骤以下：
a. 导入要使用到的类；
b. 建立类的实例对象（或者调用类的静态方法建立）；
c. 调用实例对象的方法；

如下例子使用NJS调用iOS和Android的原生弹出提示框（相似但不一样于js的alert）。

Android

如下代码在Android平台展现调用Native API显示系统提示框。
首先是Android原生 Java代码，用于比对参考：

import android.app.AlertDialog;
//...
// 建立提示框构造对象，Builder是AlertDialog的内部类。参数this指代Android的主Activity对象，该对象启动应用时自动生成
AlertDialog.Builder dlg = new AlertDialog.Builder(this);
// 设置提示框标题
dlg.setTitle("自定义标题");
// 设置提示框内容
dlg.setMessage("使用NJS的原生弹出框，可自定义弹出框的标题、按钮");
// 设置提示框按钮
dlg.setPositiveButton("肯定(或者其余字符)", null);
// 显示提示框
dlg.show();
//...

Native.js代码：

/**
* 在Android平台经过NJS显示系统提示框
*/
function njsAlertForAndroid(){
// 导入AlertDialog类
var AlertDialog = plus.android.importClass("android.app.AlertDialog");
// 建立提示框构造对象，构造函数须要提供程序全局环境对象，经过plus.android.runtimeMainActivity()方法获取
var dlg = new AlertDialog.Builder(plus.android.runtimeMainActivity());
// 设置提示框标题
dlg.setTitle("自定义标题");
// 设置提示框内容
dlg.setMessage("使用NJS的原生弹出框，可自定义弹出框的标题、按钮");
// 设置提示框按钮
dlg.setPositiveButton("肯定(或者其余字符)",null);
// 显示提示框
dlg.show();
}
//...

注意：NJS代码中建立提示框构造对象要求传入程序全局环境对象，可经过plus.android.runtimeMainActivity()方法获取应用的主Activity对象，它是Html5+应用运行期自动建立的程序全局环境对象。

Android设备上运行效果图：

`注意：其实HTML5+规范已经封装过原生提示框消息API：plus.ui.alert( message, alertCB, title, buttonCapture)。此处NJS的示例仅为了开发者方便理解，实际使用时调用plus.ui.alert更简单，性能也更高。**

iOS

如下代码在iOS平台展现调用Native API显示系统提示对话框。
iOS原生Objective-C代码，用于比对参考：

#import <UIKit/UIKit.h>
//...
// 建立UIAlertView类的实例对象
UIAlertView *view = [UIAlertView alloc];
// 设置提示对话上的内容
[view initWithTitle:@"自定义标题" // 提示框标题
message:@"使用NJS的原生弹出框，可自定义弹出框的标题、按钮" // 提示框上显示的内容
delegate:nil // 点击提示框后的通知代理对象，nil相似js的null，意为不设置
cancelButtonTitle:@"肯定(或者其余字符)" // 提示框上取消按钮的文字
otherButtonTitles:nil]; // 提示框上其它按钮的文字，设置为nil表示不显示
// 调用show方法显示提示对话框，在OC中使用[]语法调用对象的方法
[view show];
//...

Native.js代码：

/**
* 在iOS平台经过NJS显示系统提示框
*/
function njsAlertForiOS(){
// 导入UIAlertView类
var UIAlertView = plus.ios.importClass("UIAlertView");
// 建立UIAlertView类的实例对象
var view = new UIAlertView();
// 设置提示对话上的内容
view.initWithTitlemessagedelegatecancelButtonTitleotherButtonTitles("自定义标题" // 提示框标题
, "使用NJS的原生弹出框，可自定义弹出框的标题、按钮" // 提示框上显示的内容
, null // 操做提示框后的通知代理对象，暂不设置
, "肯定(或者其余字符)" // 提示框上取消按钮的文字
, null ); // 提示框上其它按钮的文字，设置为null表示不显示
// 调用show方法显示提示对话框，在JS中使用()语法调用对象的方法
view.show();
}
//...

注意：在OC语法中方法的定义格式为: “(返回值类型) 函数名: (参数1类型) 形参1 参数2名称: (参数2类型) 形参2” 方法的完整名称为: “函数名:参数2名称:”。如:“（void）setPositionX:(int)x Y:(int)y;”，方法的完整名称为“setPositionX:Y:” 调用时语法为：“[pos setPositionX:x Y:y];”。在JS语法中函数名称不能包含“:”字符，因此OC对象的方法名映射成NJS对象方法名时将其中的“:”字符自动删除，上面方法名映射为“setPositionXY”，在NJS调用的语法为：“pos.setPositionXY(x,y);”。
iOS设备上运行效果图：

`注意：其实HTML5+规范已经封装过原生提示框消息API：plus.ui.alert( message, alertCB, title, buttonCapture)。此处NJS的示例仅为了开发者方便理解，实际使用时调用plus.ui.alert更简单、性能也更高。

在HBuilder自带的Hello H5+模板应用中“Native.JS”（plus/njs.html）页面有完整的源代码，可真机运行查看效果。

------------------

转载：http://blog.csdn.net/qq_27626333/article/details/51853039

3、Native.js示例汇总

Native.js虽然强大和开放，但不少web开发者由于不熟悉原生API而难以独立完成。
这篇帖子的目的就是汇总各类写好的NJS代码，方便web开发者。
众人拾柴火焰高，有能力的开发者多多提交NJS代码，你们都会给你点赞的，咱们也会为每位共享NJS代码的朋友送上200积分。

Android平台

中止、开启个推推送功能

var pushManager = plus.android.importClass("com.igexin.sdk.PushManager"); var context = plus.android.runtimeMainActivity(); function enable() { pushManager.getInstance().turnOnPush(context); }  function disable() { pushManager.getInstance().turnOffPush(context); }

感谢yeahcheung分享

利用native.js获取手机gps是否开启

http://ask.dcloud.net.cn/question/11890

经过native.js设置系统墙纸

http://ask.dcloud.net.cn/article/651

监听短信验证码

http://ask.dcloud.net.cn/article/676

限制手机录像时间

http://ask.dcloud.net.cn/question/45756

iOS平台

获取包名

var NSBundle = plus.ios.importClass('NSBundle'); var bundle = NSBundle.mainBundle(); console.log(bundle.bundleIdentifier()); plus.ios.deleteObject(bundle);

获取设备名

http://ask.dcloud.net.cn/question/14691

测试是否安装某应用

http://ask.dcloud.net.cn/question/14430

调用iOS打印API

http://ask.dcloud.net.cn/question/4226

经过native.js登入game center

见Hello H5+里Native.js部分演示及源码。
或在这里搜索“game center”，http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/88

设置获取内容到系统粘贴板

http://ask.dcloud.net.cn/question/3720

打开页面默认弹出键盘

http://ask.dcloud.net.cn/question/2324

播放提示音

http://ask.dcloud.net.cn/question/3962

调用ios的文字转语音（TTS）

http://ask.dcloud.net.cn/question/4175

把base64数据保存为图片

http://ask.dcloud.net.cn/question/6190

设置webview滑动减速度

var webview = plus.ios.currentWebview(); var scrollView = webview.plusGetAttribute("scrollView"); scrollView.plusSetAttribute("decelerationRate:",0.99);

打开ios的Wifi设置页面

http://ask.dcloud.net.cn/question/7797

判断是否开启消息通知

http://ask.dcloud.net.cn/question/4497

检测iOS是否容许使用相机(感谢小闹分享)

http://ask.dcloud.net.cn/article/188

ios获取系统的时区id

var NSTimeZone = plus.ios.importClass("NSTimeZone"); var sys = NSTimeZone.systemTimeZone(); console.log(sys.plusGetAttribute("name"));

状态栏显示网络请求雪花

var UIApplication = plus.ios.import("UIApplication"); var sharedApplication = UIApplication.sharedApplication(); sharedApplication.setNetworkActivityIndicatorVisible(true); plus.ios.deleteObject(sharedApplication);

获取GPS受权状态

var CLLocationManager = plus.ios.import("CLLocationManager"); var authorizationStatus = CLLocationManager.authorizationStatus(); switch(authorizationStatus) { case 0: /// User has not yet made a choice with regards to this application break; case 1: // This application is not authorized to use location services. Due // to active restrictions on location services, the user cannot change // this status, and may not have personally denied authorization break; case 2: // User has explicitly denied authorization for this application, or // location services are disabled in Settings. break; case 3: // User has granted authorization to use their location at any time, // including monitoring for regions, visits, or significant location changes. break; case 4: // User has granted authorization to use their location only when your app // is visible to them (it will be made visible to them if you continue to // receive location updates while in the background). Authorization to use // launch APIs has not been granted. break; case 5: // This value is deprecated, but was equivalent to the new -Always value. break; defalut: break; }

获取手机存储空间

var BundleClass = plus.ios.importClass("NSBundle"); var BundleObj = BundleClass.mainBundle(); var filenamagerobj = plus.ios.newObject("NSFileManager"); var FileAttr = plus.ios.invoke(filenamagerobj,"attributesOfFileSystemForPath:error:",BundleObj.bundlePath(),null); // NSFileSystemFreeSize 参数获取剩余空间 // NSFileSystemSize 获取手机总存储空间 var freeSpace = plus.ios.invoke(FileAttr,"objectForKey:","NSFileSystemFreeSize"); var numberFormatterObj = plus.ios.newObject("NSNumberFormatter"); var FreeSpaceStr = plus.ios.invoke(numberFormatterObj,"stringFromNumber:",freeSpace); var freeSpace = FreeSpaceStr / 1024/1024/1024;

打开/关闭手机的闪光灯

function turnonLight(isOn) { if(plus.os.name == "iOS") { var avcaptClass = plus.ios.importClass("AVCaptureDevice"); if(avcaptClass) { var device = avcaptClass.defaultDeviceWithMediaType("vide"); plus.ios.invoke(device, "lockForConfiguration:", null); if(isOn) { plus.ios.invoke(device, "setTorchMode:", 1); plus.ios.invoke(device, "setFlashMode:", 1); } else { plus.ios.invoke(device, "setTorchMode:", 0); plus.ios.invoke(device, "setFlashMode:", 0); } plus.ios.invoke(device, "unlockForConfiguration"); } } };

显示应用内的ViewController

// NewViewController为应用内建立的原生的ViewController类名,所调用页面的内容须要在原生代码中完成 var newVCobj = plus.ios.newObject("NewViewController"); var UIApplicationClass = plus.ios.importClass("UIApplication"); var UIAppObj = UIApplicationClass.sharedApplication(); var del = plus.ios.invoke(UIAppObj,"delegate"); // 若是当前应用delegate对象包含UIWindow对象而且变量名命名为“window”能够这么写， // 不然须要根据实际代码状况修改 // 应用的delegate对象也能够添加一个返回UIViewController的方法 var appWindowObj = plus.ios.invoke(del,"window"); var appRootController = plus.ios.invoke(appWindowObj,"rootViewController"); plus.ios.invoke(appRootController,"presentViewController:animated:completion:",newVCobj,"YES",null);

参考：Native.js示例汇总 - DCloud问答http://ask.dcloud.net.cn/article/114

native.js是什么且如何使用

native.js是什么且如何使用

1、总结

2、Native.js使用入门

一、概述

技术要求

二、开始使用

2.一、判断平台

2.二、类型转换

类型转换表

2.三、其余转换

2.四、概念

2.4.一、类对象

实例对象

操做对象的属性方法

三、开始写NJS

Android

iOS

3、Native.js示例汇总

Android平台

调用Android本地分享

直接拨打电话

将程序切换到后台

强制弹出软键盘

获取安卓设备device.uuid

获取内存及CPU信息

开启关闭蓝牙

监听蓝牙开关状态

获取蓝牙设备列表

蓝牙链接票据打印机完整代码

NFC数据读取

截屏

获取MAC地址

获取设备当前网速

打开网络设置

打开各类系统设置界面

获取WIFI列表

调用系统控件播放视频

调用os通信录选择控件

原生日历提醒插入

调用系统控件裁剪图片

复制内容到系统粘贴板

调用讯飞的文字转语音功能（TTS）

调用其它Activity后经过startActivityForResult获取返回结果

接收系统广播消息，如监听安装卸载apk的事件

判断app是否安装

以监听手机飞行模式开关为例说明如何使用Native.js进行BroadcastReceiver广播

常驻Android通知栏，不用个推实现本地消息推送(Local Notification)

调用原生的socket链接

启动一个原生service

基于native.js的文件系统管理功能实现

打开闪光灯

中止、开启个推推送功能

利用native.js获取手机gps是否开启

经过native.js设置系统墙纸

监听短信验证码

限制手机录像时间

iOS平台

获取包名

获取设备名

测试是否安装某应用

调用iOS打印API

经过native.js登入game center

设置获取内容到系统粘贴板

打开页面默认弹出键盘

播放提示音

调用ios的文字转语音（TTS）

把base64数据保存为图片

设置webview滑动减速度

打开ios的Wifi设置页面

判断是否开启消息通知

检测iOS是否容许使用相机(感谢小闹分享)

ios获取系统的时区id

状态栏显示网络请求雪花

获取GPS受权状态

获取手机存储空间

打开/关闭手机的闪光灯

显示应用内的ViewController