Electron 搭建文件浏览器

需要的模块

1. electron
2. electron-builder
3. async

实现的功能

类似window系统中的文件夹

1. 显示指定目录下的所有文件列表
2. 区分文件和文件夹（最好区分每一种文件类型）
3. 点击文件可以打开（默认打开方式），点击文件夹可以进入该文件目录
4. 可以返回上一目录（返回到顶部时，直接关闭窗口）
5. 可以通过快捷键或按钮直接打开当前目录的文件夹

功能1：获取指定目录下的文件列表
使用fs模块的readdir方法

const fs = require("fs");
fs.readdir(folderpath, (err, files) => {
	if (err) {
		throw new Error("Sorry, cannot load folder");
	}
	// 处理文件列表
})

功能2：区分文件列表中的文件和文件夹
使用fs模块的stat方法

// 在上面的 ‘处理文件列表’ 处，调用
fileSystem.inspectAndDescribeFiles(folderPath, files, (err, files) => {
	if (err) {
		alert("sorry, cannot display files")
		return;
	}
	// 根据文件信息，显示文件列表
})

// 以下代码封装在fileSystem.js模块中
const async = require("async");
// 查看和描述文件列表
function inspectAndDescribeFiles(folderPath, files, cb) {
	// 使用async模块调用异步方法并获取文件列表的详细数据
	async.map(files, (file, asyncCB) => {
		const resolveFilePath = path.resolve(folderPath, file);
		inspectAndDescribeFile(resolveFilePath, asyncCB);
	}, cb)
}

const fs = require('fs');
// 查看和描述文件
function inspectAndDescribeFile(filePath, cb) {
	let result = {
		file: path.basename(filePath),
		path: filePath,
		type: '',
		modifyTime: 0,
		size: 0
	};
	fs.stat(filePath, (err, stat) => {
		if (err) {
			cb(err);
		} else {
			if (stat.isFile()) {
				// 描述文件
			} else if (stat.idDirectory()) {
				// 描述文件夹
			}
			cb(err, result);
		}
	})
}

功能3：点击页面上的文件和文件夹，打开文件或加载新的文件目录

1. 对于文件，直接使用默认的打开方式打开

const shell = require("electron").shell;
shell.openPath(filePath);

2. 对于文件夹，需要重走我们的 加载文件列表的方法 loadDirectory(file.path)

功能4：返回上一目录

1. 需要记录文件目录路由，并使用 加载文件列表的方法 loadDirectory(file.path)
2. 对于返回到顶层时，直接退出应用

const {app} = require("electron").remote;
app.exit();	// 退出程序

功能5：快捷键打开window系统的文件夹
配置index.js

// 创建浏览器窗口
const win = new BrowserWindow({
	 1280,
	height: 720,
	webPreferences: {
		nodeIntegration: true,
		enableRemoteModule: true,	// 增加此行，允许使用electron的remote模块
	},
	autoHideMenuBar: true,  // 默认隐藏菜单栏
	fullscreen: true,       // 默认全屏
});

快捷键监听：

const {shell} = require("electron").remote;
function bindOpenFoldEvent() {
	document.addEventListener("keyup", (e) => {
		// console.log(e.keyCode);	// 所按键的code
		// console.log(e.ctrlKey);	// 是否按了Ctrl键
		// console.log(e.altKey);	// 是否按了Alt键
		if (e.keyCode == 82 && e.altKey) {
			const currentFoldUrl = "..";	// 当前目录路径
			shell.openPath(currentFoldUrl);	// 打开当前目录
		}
	})
}

文件浏览器的demo： https://github.com/tugenhua0707/electron-demo/