html遍历安卓文件系统,mui初级入门教程（七）— 基于native.js的文件系统管理功能实现...

文章来源：小青年原创

发布时间：2016-08-01

关键词：mui，nativejs，android

前言

这段时间以来一直有人问5+ sdk怎么在原生中集成，每次给了文档和没给没啥大区别，这部分人之所以不能根据文档写出想要的结果，无非有两种情况，一种对于原生完全懵逼，毕竟基于mui做APP毕竟前端还是占多数，而前端中熟悉原生的人毕竟是少数，很多人声称会原生哪里还会用h5，这话只能呵呵？就大趋势而言，应用web化是现在的潮流所向，现在即使有资金和技术实力的大厂也在做混合式开发和H5的APP，不然dcloud官方也不会花大力气在流应用上。近来越来越多的原生开发者朋友和我交流h5，他们很多是被逼着转前端，这些人懂原生，但是不懂h5，所以这些朋友从原生转mui过程中可能还是不能够理解如果用5+ sdk，中间的交互怎么解决，这就是第二种人的困境？

正是基于这种现实窘境，我打算把自己一知半解的android开发经验重新拿起来，试着去写点什么，抛砖引玉，仅此而已。本文作为混合式开发的第一篇，暂时不会介绍离线打包集成5+ sdk的相关内容，先用nativejs练练手。

步骤分解

在开始集成5+sdk之前，我们先来用native.js写一个文件管理的功能，以此熟悉native.js的相关API。先来预览一下效果：

经常有人问使用5+怎么系统文件，其实用nativejs就可以实现，有人又要问nativejs怎么引用。每次遇到这种问题，真的要喷血而出。

nativejs是集成在5+ app中，默认不需要引入就可以直接引用。nativejs是通过js调用系统原生方法，从而实现5+标准中没有提及的方法，所以说白了你还是要会原生，或者有人用nativejs将原生的方法转成了js，这样你只需要在页面中调用js的方法就可以实现调用原生。nativejs在这里充当一个“语法糖”的作用。

对于这样一个遍历文件系统的功能，用原生方法写，我们会这样写：

1.在AndroidManifest.xml下设置权限

5+ APP中这一步默认设置了，我们不要管。

2.导入Java类对象

import android.os.Environment;

var environment = plus.android.importClass("android.os.Environment");

3.判断SD卡是否插入(涉及到SDK的读取，最好先判断SDK是否插入)

Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED)

nativejs这样写：

environment.getExternalStorageState() === environment.MEDIA_MOUNTED

4.获得sd卡根目录

File skRoot = Environment.getExternalStorageDirectory();

nativejs这样写：

var sdRoot = environment.getExternalStorageDirectory();

5.遍历sd卡根目录下的所有文件和文件夹(返回值为数组)

File[] files = sdRoot.listFiles();

nativejs中使plus.android.invoke调用对象(类对象/实例对象)的方法：

var files = plus.android.invoke(sdRoot,"listFiles");

6.过滤系统隐藏文件

import java.io.File;

import java.io.FileFilter;

FileFilter ff = new FileFilter() {

public boolean accept(File pathname) {

return !pathname.isHidden();//过滤隐藏文件

}

};

File[] files = sdRoot.listFiles(ff);

nativejs中可以这样写：

// 遍历sd卡根目录下的所有文件和文件夹

var files = plus.android.invoke(sdRoot,"listFiles");

var len = files.length;

for(var i=0; i

var file = files[i];

// 过滤隐藏文件

if(!plus.android.invoke(file,"isHidden")){

// 非隐藏文件执行操作

}

}

上面的预览效果可以看出我们对文件夹和文件进行了不同的操作，接着需要在遍历中判断。

7.文件及文件夹类型判断

for(File file : files){

if(file.isDirectory()){

// 文件夹

}else{

// 文件

}

}

nativejs写法：

for(var i=0;i

if(plus.android.invoke(file,"isDirectory")){

// 文件夹

}else{

// 文件

}

}

8.文件大小及单位转换(这里直接上nativejs版本)

// 读文件大小

var FileInputStream = plus.android.importClass("java.io.FileInputStream");

var fileSize = new FileInputStream(file);

var size = fileSize.available();

// 单位转换

var fileSizeString;

if(size == 0){

fileSizeString = "0B";

}else if(size < 1024){

fileSizeString = size + "B";

}else if(size < 1048576){

fileSizeString = (size/1024).toFixed(2) + "KB";

}else if (size < 1073741824){

fileSizeString = (size/1048576).toFixed(2) + "MB";

}else{

fileSizeString = (size/1073741824).toFixed(2) + "GB";

}

9.创建文件夹与删除文件(文件夹)

/**

* 创建文件夹

* @param {Object} path

*/

function creatFolder(path){

var File = plus.android.importClass("java.io.File");

var fd = new File(path);

if(!fd.exists()){

fd.mkdirs();

plus.nativeUI.toast("创建成功");

}

}

/**

* 删除文件(文件夹)

* @param {Object} path

*/

function deleteFile(path){

var File = plus.android.importClass("java.io.File");

var fd = new File(path);

if (fd != null && fd.exists()){

fd.delete();

plus.nativeUI.toast("删除成功");

}

}

10.打开目录和打开文件

我们在打开目录的时候，会遍历该目录下的文件夹和文件，实现方法同上面，打开文件我们可以使用5+ runtime openFile调用第三方程序打开指定的文件。

void plus.runtime.openFile( filepath, options, errorCB );

参数：

filepath: ( String ) 必选 打开文件的路径

字符串类型，文件路径必须是本地路径，否则会导致打开文件失败。

options: ( OpenFileOptions ) 可选 打开文件参数

errorCB: ( OpenErrorCallback ) 必选 打开文件失败的回调

打开文件操作失败时回调，返回失败信息。

本文完整代码：

.loading {

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

margin-top: -100px;

margin-left: -100px;

z-index: 9999;

}

.loading .card {

display: table-cell;

text-align: center;

vertical-align: middle;

width: 200px;

height: 200px;

}

.mui-backdrop {

background-color: #15b5e9;

}

Loading…

文件系统

mui.init({

gestureConfig:{

longtap: true //默认为false

}

});

var mask;

mui.ready(function () {

mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调；

mask.show();//显示遮罩

})

var sdRoot = null;

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

init();

}, false);

// 渲染列表

function init(){

// 获得sd卡根目录

sdRoot = getSDRoot();

// 遍历sd卡根目录下的所有文件和文件夹

var files = plus.android.invoke(sdRoot,"listFiles");

var len = files.length;

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

var fragmentFolder = document.createDocumentFragment();

var fragmentFile = document.createDocumentFragment();

var li;

for(var i=0;i

var file = files[i];

// 过滤隐藏文件

if(!plus.android.invoke(file,"isHidden")){

var name = plus.android.invoke(file,"getName");

li= document.createElement('li');

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

li.setAttribute('name',name);

// 判断是文件还是文件夹

if(plus.android.invoke(file,"isDirectory")){

// 设置标志为文件夹，供后面使用

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

// 读取文件夹下子文件夹及子文件数目

var obj = readSonFilenum(file);

li.innerHTML = ''+

''+

'

'+ name +

'

文件夹数量：'+ obj.subFolderNum + ' 文件数量：'+ obj.subFileNum +'

';

fragmentFolder.appendChild(li);

}else{

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

// 读文件大小

var fileSizeString = readFileSize(file);

li.innerHTML = ''+

''+

'

'+ name +

'

'+ fileSizeString +'

';

fragmentFile.appendChild(li);

}

};

}

list.appendChild(fragmentFolder);

list.appendChild(fragmentFile);

// 关闭遮罩

mask.close();

document.querySelector('.loading').style.display = 'none';

}

// 点击打开文件

mui('.mui-table-view').on('tap','li',function(){

var name = this.getAttribute('name');

var fileType = this.getAttribute('data-type');

var filepath = sdRoot + '/' + name;

if(fileType === 'Folder'){

// 打开目录详细页面

mui.openWindow({

url: 'sub.html',

id: 'sub',

extras:{

name: name,

filepath: filepath

}

})

}else{

// 打开文件

plus.runtime.openFile(filepath);

}

})

// 创建文件夹

document.querySelector('#add').addEventListener('tap',function (e) {

e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了

var btnArray = ['取消', '确定'];

mui.prompt('请输入要创建的文件夹名:', '文件夹名', '创建文件夹', btnArray, function(e) {

if (e.index == 1) {

creatFolder(sdRoot+"/"+e.value);

} else {

plus.nativeUI.toast('你点了取消按钮');

}

})

})

// 长按删除文件

mui('.mui-table-view').on('longtap','li',function(){

var name = this.getAttribute('name');

var btnArray = ['取消', '确定'];

mui.confirm('你确定要删除这个文件夹？', '删除文件夹', btnArray, function(e) {

if (e.index == 1) {

deleteFile(sdRoot+"/"+name);

} else {

plus.nativeUI.toast('你点了取消按钮');

}

})

})

原生文件操作

判断SD卡是否插入

Environment.getExternalStorageState().equals(

android.os.Environment.MEDIA_MOUNTED);

获得sd卡根目录

File skRoot = Environment.getExternalStorageDirectory();

获得私有根目录

File fileRoot = Context.getFilesDir()+"\";

文件夹或文件夹操作

获得文件夹和文件路径

获得文件或文件夹的绝对路径和相对路径。区别:

String path = File.getPath();//相对

String path = File.getAbsoultePath();//绝对

获得文件或文件夹的父目录

String parentPath = File.getParent();

获得文件或文件夹的名称：

String Name = File.getName();

建立文件或文件夹

File.mkDir(); //建立文件夹

File.createNewFile();//建立文件

判断是文件或文件夹

File.isDirectory()

File.isDirectory()

列出文件夹下的所有文件和文件夹名

File[] files = File.listFiles();

修改文件夹和文件名

File.renameTo(dest);

删除文件夹或文件

File.delete();

这里列出原生的常用方法，大家可以根据需要进行实现。

后记

写到这里，本篇本应该继续讲讲5+ sdk集成中的各种细节，但是想想本篇作为nativejs的开篇，先简单介绍这个实例，让大家根据需要自己实现或许更好，本文仅供参考。

文章最后还是要放上文档和本文详细工程：

写文章不容易，也许写这些代码就几分钟的事，写一篇大家好接受的文章或许需要几天的酝酿，然后加上几天的码字，累并快乐着。如果文章对您有帮助请我喝杯咖啡吧！

近期在segmentfault讲堂开设了一场关于https://segmentfault.com/l/15...。