mui初级入门教程（七）— 基于native.js的文件系统管理功能实现
mui初级入门教程（七）— 基于native.js的文件系统管理功能实现
文章来源：小青年原创
发布时间：2016-08-01
关键词：mui，nativejs，android
转载需标注本文原始地址: http://zhaomenghuan.github.io...
前言
这段时间以来一直有人问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。先来预览一下效果：
.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'+ ''+
''+ 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()+"\";
### 文件夹或文件夹操作：#### 获得文件夹和文件路径1. 获得文件或文件夹的绝对路径和相对路径。区别:String path = File.getPath();//相对
String path = File.getAbsoultePath();//绝对
1. 获得文件或文件夹的父目录String parentPath = File.getParent();
1. 获得文件或文件夹的名称：String Name = File.getName();
#### 建立文件或文件夹File.mkDir(); //建立文件夹
File.createNewFile();//建立文件
#### 判断是文件或文件夹File.isDirectory()
File.isDirectory()
#### 列出文件夹下的所有文件和文件夹名File[] files = File.listFiles();
#### 修改文件夹和文件名File.renameTo(dest);
#### 删除文件夹或文件File.delete();
这里列出原生的常用方法，大家可以根据需要进行实现。## 后记写到这里，本篇本应该继续讲讲5+ sdk集成中的各种细节，但是想想本篇作为nativejs的开篇，先简单介绍这个实例，让大家根据需要自己实现或许更好，本文仅供参考。文章最后还是要放上文档和本文详细工程：Native.js android API文档5+ App开发Native.js入门指南Native.js示例汇总本文详细工程 njs-io#mui、dcloud、hbuilder#版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
