- Electron是GitHub開發的一個開源框架，它使用Node.js（作爲後端）和Chromium（作爲前端）完成桌面GUI應用程序的跨平臺開發，目前，Electron已經創建了包括VScode和Atom在內的大量應用。
- 如果你有
html，css，js,Nodejs的基礎， 掌握Electron將是一件非常容易的事 - 如果你是一個前端工程師, 掌握了Electron，你無需學習C，Java, 或Python, 就可以創建跨平臺的桌面級應用
安裝electron
npm install -g electron
用electron-forge創建一個項目
electron-forge是一個腳手架程序(和create-react-app類似), 它可以幫我們快速構建一個electron應用, 應用創建成功後, 我們直接編輯
src/index.html即可快速上手electron桌面程序, 下面是創建的具體步驟和幾個簡單實用的小demo
全局安裝electron-forge
npm install -g electron-forge
用electron-forge快速創建項目zhaoolee-electron-app
electron-forge init zhaoolee-electron-app
開啓項目
cd zhaoolee-electron-app npm start
Demo1: 更改index.html內容, 用html css進行佈局
- index.html源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>工程師的五個級別</title>
</head>
<body>
<style>
.title {
font-weight: bold;
font-size: 36px;
}
ol li {
list-style: none;
color: #413F43;
font-size: 26px;
line-height: 40px;
position: relative;
}
ol li:hover {
background-color: #FCF6E5;
}
ol li:hover:after {
font-size: 20px;
border: 1px solid #AB3319;
border-radius: 5px;
content: attr(data);
position: absolute;
right: 0;
opacity: 1;
transition: all 0.2s ease-out;
}
</style>
<div class="title">工程師的五個級別</div>
<ol>
<li data="愛迪生、福特、貝爾、香農、理查德.斯托曼">
第一級:開創一個產業
</li>
<li data="迪恩，丹尼斯.裏奇，肯·湯普遜">第二級: 能設計和實現別人不能做出的產品</li>
<li data="張小龍，阮一峯">第三級: 能獨立設計和實現產品並且能在市場上獲得成功</li>
<li data="項目主管">第四級: 能領導和帶領其他人一同完成更有影響力的工作</li>
<li data="兩年開發經驗的工程師">第五級: 能獨立解決問題, 完成工程工作</li>
</ol>
</body>
</html>如果出現中文亂碼, command+shift+R 刷新緩存即可解決
Demo2: 讀取本地文件
瀏覽器中的js是無法讀取本地文件的, 但electron有了node的的加持, 可以隨意讀取本地的文件, 這裏以讀取
index.html同級目錄下的main.js爲例
- index.html 源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>讀取本地文件</title>
</head>
<body>
<button id="btn">展示index.js內容</button>
<div id="package-json-area">
</div>
</body>
<script>
const fs = require("fs");
const path = require("path");
let btn = document.getElementById("btn");
console.log(btn);
btn.addEventListener('click', function(e) {
fs.readFile(path.join(__dirname, "index.js"), "utf-8", function(err, data) {
if (err) {
console.log(err);
} else {
console.log(data);
document.getElementById("package-json-area").innerHTML = data;
}
})
})
</script>
</html>Demo3: 拖拽讀取本地文件
- index.html 源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽讀取文件</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#text-area {
height: 300px;
background-color: #FCF6E5;
position: relative;
font-size: 20px;
overflow: auto;
font-weight: bold;
}
#text-area #info {
border-radius: 20px;
height: 100px;
font-size: 40px;
color: #A84631;
text-align: center;
line-height: 100px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<body>
<div id="text-area">
<div id="info">將文件拖拽到此處打開</div>
</div>
</body>
<script>
/*釋放目標時觸發的事件:
ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
*/
const fs = require("fs");
const path = require("path");
let textArea = document.getElementById("text-area")
textArea.ondragenter = textArea.ondragover = textArea.ondragleave = function(e) {
e.preventDefault();
}
textArea.ondrop = function(e) {
e.preventDefault();
let filePath = e.dataTransfer.files[0].path;
console.log(filePath);
fs.readFile(filePath, "utf-8", function(err, data){
textArea.innerHTML = data;
})
}
</script>
</html>小結:
- 有了nodejs, 前端程序員, 獲得了開發網站後臺的能力!
- 有了 React-Native, 前端程序員有了開發跨平臺app的能力!
- 有了Electron, 我們可以自由的讀取本地的文件, 隨意調用npm下的大量工具包, 當然也可以把在線h5小遊戲快速移植爲桌面遊戲, 前端程序員,可以使用已掌握的前端技術, 分一塊桌面軟件的蛋糕, 真香!