Electron 快速入門及最新安裝教程

時間 2021-02-17

標籤 html node 程序員 web npm json 數組瀏覽器服務器微信欄目 HTML 简体版

原文原文鏈接

做者：程序員學院
官方網址： https://www.chengxuyuan.com
微信公衆號：華仁程序員學院

1、 Electron簡介

Electron提供了豐富的本地（操做系統）的API，使你可以使用純JavaScript來建立桌面應用程序。與其它各類的Node.js運行時不一樣的是Electron專一於桌面應用程序而不是Web服務器。html

Electron 可讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你能夠把它看做是專一於桌面應用而不是 web 服務器的，io.js 的一個變體。node

這不意味着 Electron 是綁定了 GUI 庫的 JavaScript。相反，Electron 使用 web 頁面做爲它的 GUI，因此你能把它看做成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。程序員

2、學習前提

由於Electron是一個可以讓你使用JavaScript 調用豐富的原生 APIs 來創造桌面應用，因此你必須掌握JavaScript的知識。web

3、Electron安裝

1. 安裝 node.js

Node.js官網：https://nodejs.org/zh-cn/，點擊下載安裝便可，這裏不做詳細講解。npm

2. 檢查node.js和npm是否安裝成功

node -v
npm -v

建議把npm的倉庫切換到國內taobao倉庫，
註冊cnpm命令，以下json

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. Electron的安裝

cnpm install -g electron

electron是否安裝成功可經過命令 electron -v 查看。
數組

4. 打包輸出工具

cnpm install -g electron-packager

5. electron 客戶端工具（electron.exe）

打開連接：https://developer.aliyun.com/mirror/NPM?from=tnpm
瀏覽器

找到對應版本，我如今安裝的版本是：10.1.2

服務器

OK，下載下來並解壓，能夠放到D盤軟件安裝目錄裏面，例如：D:\Program Files

微信

好的，咱們如今就安裝好了

4、打造咱們的第一個 Electron 應用

大致上，一個 Electron 應用的目錄結構以下：

CXY/

├── package.json

├── main.js

└── index.html

package.json的格式和 Node 的徹底一致，而且那個被 main 字段聲明的腳本文件是你的應用的啓動腳本，它運行在主進程上。你應用裏的 package.json 看起來應該像：

{
 "name" : "CXY",
 "version" : "0.1.0",
 "main" : "main.js"
}

注意：若是 main 字段沒有在 package.json 聲明，Electron會優先加載 index.js。

main.js 應該用於建立窗口和處理系統時間，一個典型的例子以下：

var app = require('app'); // 控制應用生命週期的模塊。var BrowserWindow = require('browser-window'); // 建立原生瀏覽器窗口的模塊
// 保持一個對於 window 對象的全局引用，否則，當 JavaScript 被 GC，// window 會被自動地關閉var mainWindow = null;
// 當全部窗口被關閉了，退出。
app.on('window-all-closed', function() {
 // 在 OS X 上，一般用戶在明確地按下 Cmd + Q 以前
 // 應用會保持活動狀態
 if (process.platform != 'darwin') {
 app.quit();
 }
});
// 當 Electron 完成了初始化而且準備建立瀏覽器窗口的時候// 這個方法就被調用
app.on('ready', function() {
 // 建立瀏覽器窗口。
 mainWindow = new BrowserWindow({width: 800, height: 600});
 // 加載應用的 index.html
 mainWindow.loadURL('file://' + __dirname + '/index.html');
 // 打開開發工具
 mainWindow.openDevTools();
 // 當 window 被關閉，這個事件會被髮出
 mainWindow.on('closed', function() {
 // 取消引用 window 對象，若是你的應用支持多窗口的話，
 // 一般會把多個 window 對象存放在一個數組裏面，
 // 但此次不是。
 mainWindow = null;
 });
});

最後，你想展現的 index.html ：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        We are using io.js <script>
            document.write(process.version)
        </script>
        and Electron <script>
            document.write(process.versions['electron'])
        </script>.
    </body>
</html>