码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2016-11-25 17:04:26      阅读：317      评论：0      收藏：0      [点我收藏+]

标签：js调用   cell   获取对象   ade   优化   打开   normal   mic   roi   

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.方法：

 

2.对象：

 

创建对象：

<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

标签：js调用   cell   获取对象   ade   优化   打开   normal   mic   roi   

原文地址：http://www.cnblogs.com/hongyedeboke/p/6101990.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！