跟我一起使用electron搭建一个文件浏览器吧
生活随笔
收集整理的這篇文章主要介紹了
跟我一起使用electron搭建一个文件浏览器吧
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個文件瀏覽器應用可以具備以下兩種功能:
一:用戶瀏覽器文件夾和查找文件
二:用戶可以使用默認的應用程序打開文件
接下來我們開始進行開發吧
第一步創建文件和文件夾:
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
項目運行結果為:
轉自:https://www.cnblogs.com/smart-girl/p/10304388.html
總結
以上是生活随笔為你收集整理的跟我一起使用electron搭建一个文件浏览器吧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Round-Robin负载均衡算法及其实
- 下一篇： HTML5+NodeJs实现WebSoc