安裝Electron 與 入門

To Use

安裝 Git 與 Node.js

然後

進入dos 提示  使用批次檔 執行

 rem #Clone this repository

git clone https://github.com/electron/electron-quick-start

rem # Go into the repository

cd electron-quick-start

rem # Install dependencies

npm install

rem # Run the app

npm start

To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

應用程式 文件 部落格 社群 版本發佈 聯絡  中文

Electron 文件1.7.9

Electron 1.7.9 / Docs / Guides / 快速入門

快速入門

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

This doesn't mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

主處理序

In Electron, the process that runs package.json's main script is called the main process. The script that runs in the main process can display a GUI by creating web pages.

畫面轉譯處理序

Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.

In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.

Differences Between Main Process and Renderer Process

The main process creates web pages by creating BrowserWindow instances. Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.

In web pages, calling native GUI related APIs is not allowed because managing native GUI resources in web pages is very dangerous and it is easy to leak resources. If you want to perform GUI operations in a web page, the renderer process of the web page must communicate with the main process to request that the main process perform those operations.

In Electron, we have several ways to communicate between the main process and renderer processes. Like ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style communication. There is also an FAQ entry on how to share data between web pages.

寫你第一個 Electron 應用程式

Generally, an Electron app is structured like this:

your-app/
├── package.json
├── main.js
└── index.html

The format of package.json is exactly the same as that of Node's modules, and the script specified by the mainfield is the startup script of your app, which will run the main process. An example of your package.json might look like this:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Note: If the main field is not present in package.json, Electron will attempt to load an index.js.

The main.js should create windows and handle system events, a typical example being:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 將這個 window 物件記在全域變數裡。
// 如果你不這麼做，這個視窗在 JavaScript 物件被 GC 後就會被自動關閉。
let win

function createWindow () {
  // 建立瀏覽器視窗。
  win = new BrowserWindow({width: 800, height: 600})

  // 並載入應用程式的 index.html。
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // 打開 DevTools。
  win.webContents.openDevTools()

  // 視窗關閉時會觸發。
  win.on('closed', () => {
    // 拿掉 window 物件的參照。如果你的應用程式支援多個視窗，
    // 你可能會想存成陣列，現在該是時候清除相關的物件了。
    win = null
  })
}

// 這個方法在 Electron 初始化完成，準備好建立瀏覽器視窗時會被叫用。
// 有些 API 只能在這個事件發生後才能用。
app.on('ready', createWindow)

// 在所有視窗都關閉時結束程式。
app.on('window-all-closed', () => {
  // 在 macOS 裡，普遍的作法是將應用程式及選單列繼續留著，直到使用者按了 Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在 macOS 裡，一般會在使用者按了 Dock 圖示且沒有其他視窗開啟的情況下，
  // 重新在應用程式裡建立視窗。
  if (win === null) {
    createWindow()
  }
})

// 你可以在這個檔案中繼續寫應用程式主處理序要執行的程式碼。 你也可以將它們放在別的檔案裡，再由這裡 require 進來。

最後，index.html 裡放你想顯示的網頁內容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    我們用了 node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    以及 Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

執行你的應用程式

Once you've created your initial main.js, index.html, and package.json files, you'll probably want to try running your app locally to test it and make sure it's working as expected.

electron

electron is an npm module that contains pre-compiled versions of Electron.

If you've installed it globally with npm, then you will only need to run the following in your app's source directory:

electron .

If you've installed it locally, then run:

macOS / Linux

$ ./node_modules/.bin/electron .

Windows

$ .\node_modules\.bin\electron .

Manually Downloaded Electron Binary

If you downloaded Electron manually, you can also use the included binary to execute your app directly.

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Linux

$ ./electron/electron your-app/

Windows

$ .\electron\electron.exe your-app\

Electron.app here is part of the Electron's release package, you can download it from here.

Run as a distribution

After you're done writing your app, you can create a distribution by following the Application Distribution guide and then executing the packaged app.

Try this Example

Clone and run the code in this tutorial by using the electron/electron-quick-start repository.

Note: Running this requires Git and Node.js (which includes npm) on your system.

# 複製儲存庫
$ git clone https://github.com/electron/electron-quick-start
# 進到儲存庫裡
$ cd electron-quick-start
# 安裝相依的套件
$ npm install
# 執行應用程式
$ npm start

For more example apps, see the list of boilerplates created by the awesome electron community.

---

利用notepad ++ 
攥寫  package.json main.js index.html

your-app/

├── package.json ├── main.js └── index.html

進入dos 提示 更換目錄 cd test1

執行程式   electron   . 

Electron 文件 部落格 社群 應用程式 版本發佈 聯絡 Code of Conduct 語言

 with  by