uni-app基于native.js的文件系统管理功能实现

发布于 1周前 作者 caililin 来自 Uni-App

uni-app基于native.js的文件系统管理功能实现

前言

这段时间以来一直有人问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。先来预览一下效果：

Alt text

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

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

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

  1. 在AndroidManifest.xml下设置权限：
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE">

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

  1. 导入Java类对象
import android.os.Environment;

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

var environment = plus.android.importClass("android.os.Environment");
  1. 判断SD卡是否插入(涉及到SDK的读取，最好先判断SDK是否插入)
environment.getExternalStorageState() === environment.MEDIA_MOUNTED
  1. 获得sd卡根目录：
var sdRoot = environment.getExternalStorageDirectory();
  1. 遍历sd卡根目录下的所有文件和文件夹（返回值为数组）
var files = plus.android.invoke(sdRoot,"listFiles");
  1. 过滤系统隐藏文件
// 遍历sd卡根目录下的所有文件和文件夹  
var files = plus.android.invoke(sdRoot,"listFiles");  
var len = files.length;  
for(var i=0; i<len; i++){  
    var file = files[i];  
    // 过滤隐藏文件  
    if(!plus.android.invoke(file,"isHidden")){  
        // 非隐藏文件执行操作  

    }  
}

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

  1. 文件及文件夹类型判断：
for(var i=0;i<len;i++){  
    if(plus.android.invoke(file,"isDirectory")){  
        // 文件夹  
    }else{  
        // 文件  
    }  
}
  1. 文件大小及单位转换(这里直接上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";  
}
  1. 创建文件夹与删除文件(文件夹)
/**  
 * 创建文件夹  
 * @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("删除成功");  
    }         
}
  1. 打开目录和打开文件

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

参数：

  • filepath: ( String ) 必选 打开文件的路径 字符串类型，文件路径必须是本地路径，否则会导致打开文件失败。
  • options: ( OpenFileOptions ) 可选 打开文件参数
  • errorCB: ( OpenErrorCallback ) 必选 打开文件失败的回调 打开文件操作失败时回调，返回失败信息。

本文完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/circles.css"/>
    <style type="text/css">
        .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;
        }
    </style>
</head>
<body>
    <div class="loading">
        <div class="card">
            <span class="circles-loader">Loading...</span>
        </div>
    </div>

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">文件系统</h1>
        <a id="add" class="mui-icon mui-icon-plus mui-pull-right"></a>
    </header>
    <div class="mui-content">
        <ul id="list" class="mui-table-view mui-table-view-chevron"></ul>
    </div>

    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/njs-io.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        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<len;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 = '<a class="mui-navigate-right">'+
                            '<img class="mui-media-object mui-pull-left" src="img/folder.png">'+
                            '<div class="mui-media-body">'+
                            name +
                            '<p class="mui-ellipsis">文件夹数量：'+ obj.subFolderNum + ' 文件数量：'+ obj.subFileNum +'</p></div></a>';
                        fragmentFolder.appendChild(li);
                    }else{
                        li.setAttribute('data-type', 'File');
                        // 读文件大小
                        var fileSizeString = readFileSize(file);
                        li.innerHTML = '<a class="mui-navigate-right">'+
                            '<img class="mui-media-object mui-pull-left" src="img/file.png">'+
                            '<div class="mui-media-body mui-ellipsis">'+
                            name +
                            '<p class="mui-ellipsis">'+ fileSizeString +'</p></div></a>';
                        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('你点了取消按钮');
                }
            })
        })
    </script>
</body>
</html>

原生文件操作

判断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.getAbsolutePath();//绝对
  • 获得文件或文件夹的父目录
String parentPath = File.getParent();
  • 获得文件或文件夹的名称：
String Name = File.getName();

判断是文件或文件夹

File.isFile()
File.isDirectory()

建立文件或文件夹

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

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

File[] files = File.listFiles();

修改文件夹和文件名

File.renameTo(dest);

删除文件夹或文件

File.delete();

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

后记

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

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

Native.js android API文档

5+ App开发Native.js入门指南

Native.js示例汇总

本文详细工程 njs-io


Harmonyos Next教程
1 回复

在uni-app中，通过native.js模块可以实现原生功能的调用，包括文件系统的管理。虽然native.js更多用于Android和iOS的原生功能调用，但在uni-app框架内，对于文件系统操作，通常会推荐使用uni-app提供的文件系统API，比如uni.getFileSystemManager()。不过，如果你确实需要通过native.js进行文件操作，这里将展示一个结合原生代码和uni-app的方式。

Android端原生代码示例

首先，在Android平台，你需要编写一个原生插件来处理文件操作。这里假设你已经熟悉如何创建和集成原生插件到uni-app项目中。

创建原生插件

  1. 在android/app/src/main/java/com/yourpackage/plugins目录下创建一个Java类，如FilePlugin.java。
package com.yourpackage.plugins;

import android.webkit.JavascriptInterface;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

public class FilePlugin {
    @JavascriptInterface
    public void writeFile(String path, String content) {
        try (FileOutputStream fos = new FileOutputStream(new File(path))) {
            fos.write(content.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
  1. 在android/app/src/main/java/com/yourpackage/MyApplication.java中注册这个插件。
import android.webkit.WebView;
import android.app.Application;
import com.alibaba.fastjson.JSONObject;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        WebView webView = ...; // 获取WebView实例
        webView.addJavascriptInterface(new FilePlugin(), "FilePlugin");
    }
}

uni-app端调用原生插件

在uni-app中，你可以通过native.js调用这个原生方法。

// 使用native.js调用Android原生方法
if (uni.getSystemInfoSync().platform === 'android') {
    plus.android.importClass('java.lang.String');
    var context = plus.android.runtimeMainActivity();
    var FilePlugin = plus.android.getAttribute(context, 'FilePlugin');
    
    // 调用原生方法
    FilePlugin.writeFile('/sdcard/test.txt', 'Hello, World!');
}

注意：上述代码仅为示例，实际项目中需考虑更多异常处理、权限申请（如读写存储权限）等。同时，iOS端的实现会有所不同，需要利用Objective-C或Swift编写相应的原生代码，并通过WKWebView的evaluateJavaScript方法与uni-app通信。

由于native.js直接操作原生代码较为复杂且容易出错，通常建议优先考虑使用uni-app提供的API，如uni.getFileSystemManager()，它提供了跨平台的文件系统操作接口，更加简便和安全。

回到顶部