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。先来预览一下效果:

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

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

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

1.在AndroidManifest.xml下设置权限


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

2.导入Java类对象

import android.os.Environment;

Native.js中使用plus.android.importClass方法:

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

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

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

for(File file : files){
    if(file.isDirectory()){
        // 文件夹
    }else{
        // 文件
    }
}        

nativejs写法:

for(var i=0;i

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…

文件系统

    原生文件操作

    判断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的开篇,先简单介绍这个实例,让大家根据需要自己实现或许更好,本文仅供参考。

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

    Native.js android API文档
    5+ App开发Native.js入门指南

    Native.js示例汇总
    本文详细工程 njs-io

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


    近期在segmentfault讲堂开设了一场关于html5+ App开发工程化实践之路的讲座,会讲到5+ 开发中高性能的优化方案以及使用如何结合Vue.js进行开发,欢迎前来围观:https://segmentfault.com/l/15...。

    你可能感兴趣的:(hbuilder,dcloud,mui)