H5+ 移动app学习之二 Native.js

Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。如果说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。Native.js不是一个js库，不需要下载引入到页面的script中，也不像node.js那样有单独的运行环境，Native.js的运行环境是集成在5+runtime里的。

Native.js for Android封装一条通过JS语法直接调用Native Java接口通道，通过plus.android可调用几乎所有的系统API。

判断平台

Native API具有平台依赖性，所以需要通过以下方式判断当前的运行平台：

function judgePlatform(){

    switch ( plus.os.name ) {

        case "Android":

        // Android平台: plus.android.*

        break;

        case "iOS":

        // iOS平台: plus.ios.*

        break;

        default:

        // 其它平台

        break;

    }

}

开始写NJS

使用NJS调用Native API非常简单，基本步骤如下：
1. 导入要使用到的类；
2. 创建类的实例对象（或者调用类的静态方法创建）；
3. 调用实例对象的方法；

1.方法：

importClass: 导入Java类对象
newObject: 创建实例对象
getAttribute: 获取对象（类对象/实例对象）的属性值
setAttribute: 设置对象（类对象/实例对象）的属性值
invoke: 调用对象（类对象/实例对象）的方法
implements: 实现Interface的方法
runtimeMainActivity: 获取应用主Activity实例对象
currentWebview: 获取当前Webview窗口对象的native层实例对象

2.对象：

ClassObject: Java类对象
InstanceObject: Java实例对象

创建对象：

<script>

        /**

         * 1.导入类，通过new操作实例化对象

         *   通过.操作符直接调用对象的方法

         */

        var Intent = plus.android.importClass("android.content.Intent");

        var intent = new Intent();

        /**

         * 2.不导入类，用plus.android.newObject实例化对象

         *   使用plus.android.invoke方法来调用对象的方法

         */

        var intent = plus.android.newObject("android.content.Intent");

    </script>

3.实例：

1.拨打电话：

<body>

        拨打电话<br/>

        <button onclick="call()">Dial</button>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init();

            function call() {

                // 导入Activity、Intent类

                var Intent = plus.android.importClass("android.content.Intent");

                var Uri = plus.android.importClass("android.net.Uri");

                // 获取主Activity对象的实例

                var main = plus.android.runtimeMainActivity();

                // 创建Intent

                var uri = Uri.parse("tel:10010"); // 这里可修改电话号码

                var call = new Intent("android.intent.action.CALL", uri);

                // 调用startActivity方法拨打电话

                main.startActivity(call);

                // ...

            }

        </script>

    </body>

2.弹框

<body>

        <button onclick="njsAlertForAndroid()">弹框</button>

        <button onclick="h5Alert()">h5弹框</button>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init();

            function njsAlertForAndroid(){

                //导入类

                var alertDialog = plus.android.importClass("android.app.AlertDialog");

                //创建对象

                var dlg = new alertDialog.Builder(plus.android.runtimeMainActivity());

                //调用方法

                dlg.setTitle("标题");

                dlg.setMessage("原生弹出框");

                dlg.setPositiveButton("确定",null);

                dlg.show();

            }

            //也可以使用它集成好的

            function h5Alert(){

                var message = "消息";

                var alertCB ;

                var title = "标题";

                var buttonCapture = "按钮";

                plus.ui.alert(message, alertCB, title, buttonCapture);

            }

        </script>

    </body>

弹框优化

<script type="text/javascript">

            mui.init();

            var AlertDialog = null,mainActivity=null;

            document.addEventListener("plusready",function(){

                switch(plus.os.name){

                    case "Android":

                        mainActivity = plus.android.runtimeMainActivity();

                        AlertDialog = plus.android.importClass("android.app.AlertDialog");

                        break;

                    default: break;

                }

            },false);

            function njsAlertForAndroid(){

                //创建对象

                var dlg = new AlertDialog.Builder(mainActivity);

                //调用方法

                dlg.setTitle("标题");

                dlg.setMessage("原生弹出框");

                dlg.setPositiveButton("确定",null);

                dlg.show();

            }

        </script>

使用高级API优化

<script type="text/javascript">

            mui.init();

            var AlertDialog = null,mainActivity=null;

            document.addEventListener("plusready",function(){

                switch(plus.os.name){

                    case "Android":

                        mainActivity = plus.android.runtimeMainActivity();

                        break;

                    default: break;

                }

            },false);

            function njsAlertForAndroid(){

                //创建对象

                var dlg = plus.android.newObject("android.app.AlertDialog$Builder",mainActivity);

                //调用方法

                dlg.setTitle("标题");

                dlg.setMessage("原生弹出框");

                dlg.setPositiveButton("确定",null);

                dlg.show();

            }

        </script>

3.GPS

<script>

            if(plus.os.name == "Android") {

                var context = plus.android.importClass("android.content.Context");

                var locationManager = plus.android.importClass("android.location.LocationManager");

                var main = plus.android.runtimeMainActivity();

                var mainSvr = main.getSystemService(context.LOCATION_SERVICE);

                var gpsProvider = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER); //检查是否开启了GPS

                if(!gpsProvider) {

                    var message = "为了获取您的精准位置，请开启GPS设备。";

                    var title = "GPS未启用";

                    var alertCB = function() {

                        var Intent = plus.android.importClass("android.content.Intent");

                        var mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');

                        main.startActivity(mIntent); //打开GPS设置

                    }

                    plus.nativeUI.alert(message, alertCB, title);

                }

            }

        </script>

4.分享

<script type="text/javascript">

            mui.init();

            //调用

//            share('分享到...','要分享的文本');

            function share(shareTip, shareText) {

                //导入Java类对象

                var Context = plus.android.importClass("android.content.Intent");

                //获取应用主Activity

                var Main = plus.android.runtimeMainActivity();

                //将类Context的这个行为(Action)ACTION_SEND，赋给shareIntent

                var shareIntent = new Context(Context.ACTION_SEND);

                //***以下两种写法是一样的

                //***1.

                //plus.android.invoke(shareIntent,"setType","text/plain");

                //plus.android.invoke(shareIntent,"putExtra",Context.EXTRA_TEXT,shareText);

                //***2.

                //设置分享类型

                shareIntent.setType("text/plain");

                //设置分享文本

                shareIntent.putExtra(Context.EXTRA_TEXT, shareText);

                //***以上两种写法是一样的

                //指定分享的包名

                //shareIntent.setPackage('com.tencent.mm',);

                Main.startActivity(Context.createChooser(shareIntent, shareTip));

            }

            //原生代码：

            /*

            Intent sendIntent = new Intent(android.content.Intent.ACTION_SEND);

            sendIntent.putExtra(Intent.EXTRA_TEXT, "This is my text to send.");

            sendIntent.setType("text/plain");

            startActivity(Intent.createChooser(sendIntent,'send to...'));

            */

        </script>

5.选择要使用的应用

<script type="text/javascript">

            mui.init();

            document.querySelector('#btn').addEventListener('click', function() {

                var REQUESTCODE = 1;

                var main = plus.android.runtimeMainActivity();

                var Intent = plus.android.importClass('android.content.Intent');

                var intent = new Intent(Intent.ACTION_GET_CONTENT);

                intent.setType("*/*"); //设置类型，任意类型

//                intent.setType("image/*");

//                intent.setType("audio/*"); //选择音频

//                intent.setType("video/*"); //选择视频 （mp4 3gp 是android支持的视频格式）

                intent.addCategory(Intent.CATEGORY_OPENABLE);

                main.startActivityForResult(intent, REQUESTCODE);

                // http://stackoverflow.com/questions/3401579/get-filename-and-path-from-uri-from-mediastore

                main.onActivityResult = function(requestCode, resultCode, data) {

                    if(REQUESTCODE == requestCode) {

                        var context = main;

                        plus.android.importClass(data);

                        // 获得文件URI路径 (content://开头的uri)

                        var uri = data.getData();

                        // 获取管理所有程序的实例

                        var resolver = context.getContentResolver();

                        plus.android.importClass(resolver);

                        // 判断文件类型

                        var fileType = plus.android.invoke(resolver, "getType", uri);

                        console.log("fileType:" + fileType);

                        // 图片

                        if(fileType.indexOf('image') > -1) {

                            var MediaStore = plus.android.importClass("android.provider.MediaStore");

                            // 获取实例

                            var cursor = resolver.query(uri, null, null, null, null);

                            plus.android.importClass(cursor);

                            if(cursor != null && cursor.moveToFirst()) {

                                var columnIndex = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);

                                // 取出文件路径

                                var filePath = cursor.getString(columnIndex);

                                console.log("filePath:" + filePath);

                            }

                            // 关闭游标

                            cursor.close();

                        }

                    }

                }

            })

        </script>

6.扫描手机音频文件

<script type="text/javascript">

            mui.init();

            document.addEventListener("plusready", function() {

                if(plus.os.name == "Android") {

                    var Context = plus.android.importClass("android.content.Context");

                    var ContentResolver = plus.android.importClass("android.content.ContentResolver");

                    var Cursor = plus.android.importClass("android.database.Cursor");

                    var Uri = plus.android.importClass("android.net.Uri");

                    var MediaStore = plus.android.importClass("android.provider.MediaStore");

                    var main = plus.android.runtimeMainActivity();

                    var list = document.getElementById("list");

                    var li;

                    //创建一个游标对象

                    var context = main;

                    var Uri = new Uri();

                    Uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;

                    var resolver = new ContentResolver();

                    resolver = context.getContentResolver();

                    var c = new Cursor();

                    c =resolver.query(Uri, null, null, null, null);

                    c.moveToFirst();

                    if(c != null) {

                        while(c.moveToNext()) {

                            //扫描本地文件，得到歌曲的相关信息

                            var music_name = c.getString(c.getColumnIndex(MediaStore.Audio.Media.TITLE));

                            var music_singer = c.getString(c.getColumnIndex(MediaStore.Audio.Media.ARTIST));

                            var music_time = c.getString(c.getColumnIndex(MediaStore.Audio.Media.DURATION));

                            var music_path = c.getString(c.getColumnIndex(MediaStore.Audio.Media.DATA));

                            li = document.createElement('li');

                            li.className = "mui-table-view-cell mui-media";

                            li.setAttribute('name', music_name);

                            li.setAttribute('data-type', 'File');

                            li.innerHTML = '<a class="mui-navigate-right">' +

                                '<img class="mui-media-object mui-pull-left" src="img/folder.png">' +

                                '<div class="mui-media-body">' + music_name +

                                '<p class="mui-ellipsis">' + music_singer +

                                '</p></div></a>';

                            list.appendChild(li);

                        }

                    }

                    c.close();

                }

            }, false);

        </script>

通过遍历文件系统扫描音频文件

var count = 0;

//    document.addEventListener("plusready",plusReady, false);

function plusReady(){

    if(plus.storage.getLength() == 0) {

        alert("文件夹");

        plus.io.resolveLocalFileSystemURL("/storage/sdcard0/", function(fs) {//手机内存

            findMP3(fs);

        }, function() {

            alert("打开失败");

        });

        plus.io.resolveLocalFileSystemURL("/storage/sdcard1/", function(fs) {//内存卡

            findMP3(fs);

        }, function() {

            alert("打开失败");

        });

    } else {

        alert("应用数据");

        for(var i = 1; i <= plus.storage.getLength(); i++) {

            count++;

            var songitem = plus.storage.getItem(i + ".mp3");

            li = document.createElement("li");

            li.innerText =count+"   "+songitem;

            li.className = "mui-table-view-cell";

            document.getElementById("songUl").appendChild(li);

        }

    }

}

function isHidden(fs) {

    var reg = /^\./;

    return reg.test(fs.name);

}

function findMP3(fs) {

    if(fs.isDirectory) {

        var directoryReader = fs.createReader();

        directoryReader.readEntries(function(entries) {

            var i;

            var li = null;

            if(entries.length == 0) {

                return;

            }

            for(i = 0; i < entries.length; i++) {

                if(isHidden(entries[i])) {

                    continue

                }

                if(entries[i].isDirectory) {

                    findMP3(entries[i]);

                }

                if(entries[i].isFile) {

                    var reg = /\.mp3$/;

                    if(reg.test(entries[i].name)) {

                        count++;

                        li = document.createElement("li");

                        li.innerText =count+"   "+entries[i].fullPath;

                        li.className = "mui-table-view-cell";

                        li.setAttribute("id",entries[i].fullPath);

                        document.getElementById("songUl").appendChild(li);

                        plus.storage.setItem(count + ".mp3", entries[i].fullPath);

                    }

                }

            }

        }, function(e) {

            alert("Read entries failed: " + e.message);

        });

    } else { //过滤掉不是mp3的文件格式

        var reg = /\.mp3$/;

        if(!reg.test(fs.name)) {

            count++;

            li = document.createElement("li");

            li.innerText =count+"   "+fs.fullPath;

            li.className = "mui-table-view-cell";

            li.setAttribute("id",fs.fullPath);

            document.getElementById("songUl").appendChild(li);

            plus.storage.setItem(count + ".mp3", fs.fullPath);

        }

    }

}

function loadMusic() {

    alert("开始");

document.addEventListener("plusready",plusReady, false);

plusReady();

    alert("结束");

}

H5+ 移动app学习之二 Native.js的更多相关文章

Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较目录前言参考来源前置技术要求楔子几种APP开发模式概述 Native App Web App Hybrid Ap ...
JavaScript 基础学习（二）js 和 html 的结合方式
第一种使用一个标签 <script type="text/javascript"> js代码; </script> 第二种使用 script 标签,引入 ...
前端学习(十二）js数据类型（笔记）
选项卡: for循环 for(初始值,条件,自增){} for(var i=0; i<9;i++){} 几个按钮对应相同个内容!!! -------------------- ...
Java Script 学习笔记 (二) Casper JS
1. click() VS mouse.click() 在写自动化脚本要勾选一个复选框时,用casper.mouse.click() 无法选上这个checkbox, 需要用到casper.click( ...
WebView全面学习（二）-- Native与js双方通信
WebView全面学习(二)-- Native与js双方通信 Native与js通信的本质 Native与js通信的核心在于WebView. 两端的通信主要还是单向的.假如要完成js->Nati ...
客户端相关知识学习（二）之h5与原生app交互的原理
前言现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
App开发Native.js入门指南
概述 Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展 ...
【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...
mui开发app之html5+,5+Runtime,5+sdk,native.js
说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...

随机推荐

Oracle 性能优化
(1) 选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table) ...
【转载】STL之priority_queue
参考资料:传送门先回顾队列的定义:队列(queue)维护了一组对象,进入队列的对象被放置在尾部,下一个被取出的元素则取自队列的首部.priority_queue特别之处在于,允许用户为队列中存储的元素 ...
python_九九乘法表
# 九九乘法表 print(" 九九乘法表") for table_x in range(1,10): for table_y in range(1,table_x +1): pr ...
maven报brors occurred during the build
原因分析: 此问题一般发生在eclipse保存文件并自动部署时候.本人在写项目的时候,还没等部署好,关闭了了eclipse,结果出现了这种情况.有一种产生此错误的原因是因为此项目不不是由eclipse ...
OpenStack三种类型的NAT转换
SNAT SNAT即源网络地址转换,这个NAT路由修改IP包包头中的源IP地址.SNAT功能通常用于让只具有私有IP地址的主机能够访问外网,比如,多个PC使用路由器共享上网,每个PC都配置了内网IP, ...
openstack资料相关
https://github.com/int32bit/openstack-workflow #openstack各种时序图 http://docs.openstack.org/developer/ ...
spring data jpa 调用存储过程
网上这方面的例子不是很多,研究了一下,列出几个调用的方法. 假如我们有一个mysql的存储过程 CREATE DEFINER=`root`@`localhost` PROCEDURE `plus1in ...
@RequestParam @RequestBody @PathVariable 等参数绑定注解详解
文章主要讲解request 数据到handler method 参数数据的绑定所用到的注解和什么情形下使用. 简介: handler method 参数绑定常用的注解,我们根据他们处理的Request ...
如何在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作
Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...
mysql 优化
1.存储过程造数据 CREATE DEFINER=`root`@`localhost` PROCEDURE `generate_test_data`(`n` int) begin declare i ...