H5+ 移動app學習之二 Native.js

時間 2019-12-01

標籤 h5 移動 app 學習之二 native.js native 欄目無線简体版

原文原文鏈接

來源：http://www.cnblogs.com/hongyedeboke/p/6101990.html

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裏的。javascript

Native.js for Android封裝一條經過JS語法直接調用Native Java接口通道，經過plus.android可調用幾乎全部的系統API。html

判斷平臺

Native API具備平臺依賴性，因此須要經過如下方式判斷當前的運行平臺：html5

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. 調用實例對象的方法；java

1.方法：

importClass: 導入Java類對象
newObject: 建立實例對象
getAttribute: 獲取對象（類對象/實例對象）的屬性值
setAttribute: 設置對象（類對象/實例對象）的屬性值
invoke: 調用對象（類對象/實例對象）的方法
implements: 實現Interface的方法
runtimeMainActivity: 獲取應用主Activity實例對象
currentWebview: 獲取當前Webview窗口對象的native層實例對象

2.對象：

ClassObject: Java類對象
InstanceObject: Java實例對象

建立對象：node

<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.撥打電話：android

<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.彈框ios

<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>

彈框優化git

<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.GPSapp

<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("結束");
}