跟我一起使用electron搭建一个文件浏览器吧

最新推荐文章于 2024-08-15 09:53:38 发布

zhangge3663

最新推荐文章于 2024-08-15 09:53:38 发布

阅读量642

点赞数 1

分类专栏： electron

electron 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个文件浏览器应用可以具备以下两种功能:

一:用户浏览器文件夹和查找文件

二:用户可以使用默认的应用程序打开文件

接下来我们开始进行开发吧

第一步创建文件和文件夹:

mkdir lorikeet-electron

cd lorikeet-electron

sudo cnpm install -g electron

touch package.json

index.html
<html>
    <head>
        <title>Lorikeet</title>
        <link rel="stylesheet" href="app.css" />
        <script src="app.js"></script>
    </head>
    <body>
        <h1>welcome to Lorikeet</h1>
    </body>
</html>

package.json
{
    "name": "lorikeet",
    "version": "1.0.0",
    "main": "main.js"
}

main.js
'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

app.on('ready', () => {
    mainWindow = new BrowserWindow();
    mainWindow.loadURL(`file://${app.getAppPath()}/index.html`};
    mainWindow.on('closed', () => { mainWindow = null; });
});

使用electron .运行项目是

第二步:实现启动界面

我们会在工具条中展示用户个人文件夹信息

实现该功能可以分为三部分内容

html负责构建工具条和与用户分人文件夹信息

css负责布局工具条和用户个人文件夹展示上的布局以及样式

javascript负责找到用户个人文件夹信息在哪里并在UI上展示出来

添加展示工具条的个人文件夹的html代码

index.html
<html>
    <head>
        <title>Lorikeet</title>
        <link rel="stylesheet" href="app.css" />
    </head>
    <body>
        <div id="toolbar">
            <div id="current-folder">
        </div>
    </body>
</html>

body {
    padding: 0;
    margin: 0;
    font-family: 'Helvetica', 'Arial', 'sans';
}

#toolbar {
    top: 0px;
    position: fixed;
    background: red;
    width: 100%;
    z-index: 2;
}

#current-folder {
    float: left;
    color: white;
    background: rgba(0,0,0,0.2);
    padding: 0.5em 1em;
    min-width: 10em;
    border-radius: 0.2em;
    margin: 1em;
}

运行效果为:

接下来我们通过node.js找到用户个人文件夹所在的路径

cnpm install osenv --save

在html文件中显示用户个人文件夹信息

<html>
    <head>
        <title>Lorikeet</title>
        <link rel="stylesheet" href="app.css" />
    </head>
    <body>
        <div id="toolbar">
            <div id="current-folder">
                <script>
                    document.write(getUsersHomeFolder());
                </script>
            </div>
        </div>
    </body>
</html>

第三步显示个人文件夹中的文件和文件夹

要实现该功能我们需要做到以下事情

1.获取个人文件夹中的文件和文件夹列表信息

2.对每个文件或文件夹，判断它是文件还是文件夹

3.将文件或文件夹列表信息显示到界面上，并用对应的图标区分出来

我们需要使用async模块来处理调用一系列异步函数的情况并收集他们的结果

cnpm install async --save

再在文件夹中写入

index.html
<html>
    <head>
        <title>Lorikeet</title>
        <link rel="stylesheet" href="app.css" />
        <script src="app.js"></script>
    </head>
    <body>
        <template id="item-template">
            <div class="item">
                <img class="icon"/>
                <div class="filename"></div>
            </div>
        </template>
        <div id="toolbar">
            <div id="current-folder">
                <script>
                    document.write(getUsersHomeFolder());
                </script>
            </div>
        </div>
        <div id="main-area"></div>
    </body>
</html>

app.js
'use strict';

const async = require('async');
const fs = require('fs');
const osenv = require('osenv');
const path = require('path');

function getUsersHomeFolder() {
    return osenv.home();
}

function getFilesInFolder(folderPath, cb) {
    fs.readdir(folderPath, cb);
}

function inspectAndDescribeFile(filePath, cb) {
    let result = {
        file: path.basename(filePath),
        path: filePath, type: ''
    };
    fs.stat(filePath, (err, stat) => {
        if (err) {
            cb(err);
        } else {
            if (stat.isFile()) {
                result.type = 'file';
            }
            if (stat.isDirectory()) {
                result.type = 'directory';
            }
            cb(err, result);
        }
    });
}

function inspectAndDescribeFiles(folderPath, files, cb) {
    async.map(files, (file, asyncCb) => {
        let resolvedFilePath = path.resolve(folderPath, file);
        inspectAndDescribeFile(resolvedFilePath, asyncCb);
    }, cb);
}

function displayFile(file) {
    const mainArea = document.getElementById('main-area');
    const template = document.querySelector('#item-template'):
    let clone = document.importNode(template.content, true);
    clone.querySelector('img').src = `images/${file.type}.svg`;
    clone.querySelector('.filename').innerText = file.file;
    mainArea.appendChild(clone);
}

function displayFiles(err, files) {
    if (err) {
        return alert('Sorry, we could not display your files');
    }
    files.forEach(displayFile);
}

function main() {
    let folderPath = getUsersHomeFolder();
    getFilesInFolder(folderPath, (err, files) => {
        if (err) {
            return alert('Sorry, we could not load your home folder');
        }
        inspectAndDescribeFiles(folderPath, files, displayFiles);
    });
}

main();

app.css
body {
    padding: 0;
    margin: 0;
    font-family: 'Helvetica', 'Arial', 'sans';
}

#toolbar {
    top: 0px;
    position: fixed;
    background: red;
    width: 100%;
    z-index: 2;
}

#current-folder {
    float: left;
    color: white;
    background: rgba(0,0,0,0.2);
    padding: 0.5em 1em;
    min-width: 10em;
    border-radius: 0.2em;
    margin: 1em;
}

#mian-area {
    clear: both;
    margin: 2em;
    margin-top: 3em;
    z-index: 1;
}

.item {
    position: relative;
    float: left;
    padding: 1em;
    margin: 1em;
    width: 6em;
    height: 6em;
    text_aligin: center;
}

.item .filename {
    padding-top: 1em;
    font-size: 10pt;
}

当然也有新建images文件夹，放入文件夹和文件两个图标

https://openclipart.org/detail/83893/file-icon
https://openclipart.org/detail/137155/folder-icon

一个图片保存为directory.svg，另一个图片保存为file.svg

项目运行结果为: