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原本没有 ...

随机推荐

ionic ios iframe 白屏
之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常原因是ios对app打开外部网页有限制需要取消限制解决方法 1.确认添加whitelist 插件 2.在conf ...
【原】聊一聊 url 编码问题
最近项目中遇到需要编码的一个问题,在encode和encodeURIComponent上绕了个小圈,所以打算总结一下js的编码问题,网上也有很多类似的文章,不过呢,总结出来的东西才是自己滴为什么需要 ...
[教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]
[教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程] http://bbs.pcbeta.com/viewthread-1571455-1-1.html [教程] [ ...
WPF 控件总结
内容控件:1.Button:当Button.IsCancel="True"时,点击按钮,对话框关闭.当Button.IsDefault="True",按回车触发 ...
Ubuntu 14.04 安装SSH
1.一般我们安装好ubuntu系统后,首先就是更换国内的ubuntu源,使得更新及安装软件速度更快 sudo cp /etc/apt/sources.list /etc/apt/sources.lis ...
手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
带有runat="server" 的服务器控件通过 ClientID 获取Id
带有runat="server" 的服务器控件获取Id <input type="text" id="txtName" runat= ...
如何使用跨平台工具创建 NuGet 包（转）
原文地址 https://docs.microsoft.com/zh-cn/dotnet/articles/core/deploying/creating-nuget-packages 内容对于 . ...
PostgreSQL数据库中的常见错误
转载以作参考. 错误1 FATAL: connection limit exceeded for non-superusers 原因:非超级用户的连接数(max_connections - super ...
Timequest静态时序分析(STA)基础
Setup Slack Hold Slack Recovery&Removal Recovery: The minimum time an asynchronous signal must b ...