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

这个文件浏览器应用可以具备以下两种功能噢～
This file browser application can have the following two functions.
一：用户浏览文件夹和查找文件
First: Users browse folders and find files
二：用户可以使用默认的应用程序打开文件
2: Users can use default applications to open files
接下来我们开始进行开发吧～
Next, let's start developing.
第一步创建文件和文件夹
The first step is to create files and folders
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 .运行项目是
Using electron. Running the project is

第二步：实现启动界面
Step 2: Implement startup interface
我们会在工具条中展示用户个人文件夹信息
We will display the user's personal folder information in the toolbar
实现该功能可以分为三部分内容
The realization of this function can be divided into three parts.
html负责构建工具条和用户个人文件夹信息
htmlResponsible for building toolbars and user personal folder information
css负责布局工具条和用户个人文件夹展示上的布局以及样式
css is responsible for the layout toolbar and the layout and style of the user's personal folder display
javascript负责找到用户个人文件夹信息在哪里并在UI上展示出来
javascript is responsible for finding out where the user's personal folder information is and displaying it on the UI
添加展示工具条的个人文件夹的html代码
HTML code for adding personal folders to display toolbars

index.html
<html>
  <head>
    <title>Lorikeet</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div id="toolbar">
      <div id="current-folder">
      </div>
    </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;
}

运行效果为
The operation effect is as follows:

接下来我们通过node.js找到用户个人文件夹所在的路径
Next, we use node. JS to find the path where the user's personal folder is located.
cnpm install osenv --save
在html文件中现实用户个人文件夹信息
Realistic User Personal Folder Information in HTML Files

<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>

第三步显示个人文件夹中的文件和文件夹
Step 3: Display files and folders in personal folders
要实现该功能我们需要做到以下事情
To achieve this function, we need to do the following things
1.获取个人文件夹中的文件和文件夹列表信息

Get information about files and folder lists in personal folders
2.对每个文件或文件夹，判断它是文件还是文件夹
For each file or folder, determine whether it is a file or a folder
3.将文件或文件夹列表信息显示到界面上，并用对应的图标区分出来
Display the list information of files or folders on the interface and distinguish them with corresponding icons.
我们需要使用async模块来处理调用一系列异步函数的情况并收集他们的结果
We need to use the async module to handle calls to a series of asynchronous functions and collect their results
cnpm install async --save
再在文件夹中写入
Write in the folder again

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;
}

#main-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-align: center;
}

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

当然也有新建images文件夹，放入文件夹和文件两个图标
Of course, there are also new images folder, put in folder and file icons
https://openclipart.org/detail/83893/file-icon
https://openclipart.org/detail/137155/folder-icon
一个图片保存为directory.svg 一个图片保存为file.svg
A picture is saved as directory. SVG and a picture is saved as file. svg
项目运行结果为
The results of project operation are as follows:

by我还差的很远
本文的例子学习自 <<跨平台桌面应用开发基于Electron与NW.js>>这本书

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

猜你喜欢