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

Posted 2020-08-20 hy叶子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章

[WebView学习之二]:使用Web Apps 支持不同分辨率屏

安卓学习之二--布局

客户端相关知识学习之在h5页面打开另一个页面

[WebView学习之三]:使用WebView来创建Apps

Flask 学习之路由