一、是什么？能做什么？
- Electron 是Github開發(fā)的一個框架，它依賴于Node.js.Node.js（V8）允許使用JavaScript語言開發(fā)服務(wù)端程序和終端程序(命令行程序)，Node.js + JavaScript = PHP。
- Node.js ：服務(wù)端程序（Web、聊天服務(wù)器等）和命令行程序
- Electron ：桌面應(yīng)用（跨平臺）
二、開發(fā)Electron桌面應(yīng)用需要什么技術(shù)？
- 開發(fā)Electron桌面應(yīng)用和開發(fā)web應(yīng)用使用相同的技術(shù)，如Web三劍客：HTML、CSS和JavaScript。
三、Why Electron
- 由于Electron是基于Node.js的，也就是說，Electron可以調(diào)用大量的Node.js API。
- 桌面應(yīng)用可以訪問本地資源，各種硬件以及OS本身的資源，Docker、touchbar
四、配置環(huán)境
- 安裝Node.js 官網(wǎng)
安裝成功后敲開命令行 輸入node --version 會顯示以下圖所示：
image.png - 全局安裝Electron(要聯(lián)網(wǎng))
使用npm安裝，命令如下：
npm install electron -g
其中參數(shù)g就是全局安裝
安裝完成后檢查是否安裝成功：electron -v
出現(xiàn)版本號就是安裝成功了！
此外：升級electron：npm update electron -g
卸載electron：npm uninstall electron
五、開發(fā)第一個Electron桌面應(yīng)用
- 準備
1.1開發(fā)electron桌面應(yīng)用至少需要3個文件
- package.json 用于配置Electron工程的 (名字是不可變的)
- index.js 相當(dāng)于Electron桌面應(yīng)用的入口點
- index.html 用于主窗口UI的頁面文件
- 代碼編寫
2.1 package.json
{
"name":"DemoDay2020-01-08--1", //項目名
"version":"1.0.0", //項目版本
"main":"index.js" //項目入口文件
}
2.2 index.js
const {app,BrowserWindow} = require('electron'); //引入electron
function createWindow(){ //隨意創(chuàng)建一個方法，方法名隨意
win = new BrowserWindow({width:800,height:600}); //設(shè)置顯示窗口大小
win.loadFile('index.html'); //執(zhí)行的加載頁面
}
app.on('ready',createWindow); //執(zhí)行node中的ready函數(shù)中執(zhí)行之前創(chuàng)建的方法
2.3 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DemoDay2020-01-08--1</title>
</head>
<body>
<h1>這是第一個桌面程序</h1>
</body>
</html>
HTML頁面隨意編寫，運行有顯示就好
- 編輯完這三個文件之后，就可以打開命令行輸入
electron 加上三個文件所在目錄
如果就在當(dāng)前工程目錄可以直接輸入以下命令：
electron .
之后你就可以看到運行后的效果了
image.png
以上就是一個Electron的一個簡單的介紹。
