Electron 可讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你能夠把它看做是專一於桌面應用而不是 web 服務器的,io.js 的一個變體。javascript
這不意味着 Electron 是綁定了 GUI 庫的 JavaScript。相反,Electron 使用 web 頁面做爲它的 GUI,因此你能把它看做成一個被 JavaScript 控制的,精簡版的 Chromium 瀏覽器。html
在 Electron 中,入口是一個 JavaScript 腳本。不一樣於直接提供一個URL,你須要手動建立一個瀏覽器窗口,而後經過 API 加載 HTML 文件。你還能夠監聽窗口事件,決定什麼時候讓應用退出。java
在 Electron 裏,運行 package.json 裏 main 腳本的進程被稱爲主進程。在主進程運行的腳本能夠以建立 web 頁面的形式展現 GUI。node
因爲 Electron 使用 Chromium 來展現頁面,因此 Chromium 的多進程結構也被充分利用。每一個 Electron 的頁面都在運行着本身的進程,這樣的進程咱們稱之爲渲染進程。linux
訪問源碼: https://gitee.com/ting-hui/electron-demo/tree/01-start-project/git
安裝node.js,npmweb
本地建立一個新文件夾chrome
命令管理進入文件夾shell
初始化項目npm
DOS窗口使用npm init
初始化一個項目
初始化完成後會在文件夾中生成一個package.json的文件
修改package.json文件
package name: 項目名字叫啥 version: 版本號 description: 對項目的描述 entry point: 項目的入口文件(通常你要用那個js文件做爲node服務,就填寫那個文件) test command: 項目啓動的時候要用什麼命令來執行腳本文件(默認爲node app.js) git repository: 若是你要將項目上傳到git中的話,那麼就須要填寫git的倉庫地址 keywirds: 項目關鍵字 author: 做者的名字 license: 發行項目須要的證書
安裝Electron
全局安裝npm install -g electron
,單獨給每一個要開發的應用安裝時,須要進入到開發的應用文件夾中,運行npm install --save-dev electron
命令,此處以給單個app安裝爲例,執行成功後會生成一個node_modules
文件夾:
Electron應用開發程序示例
先建立項目入口文件app.js
,
const { app, BrowserWindow } = require('electron') function createWindow () { // 建立瀏覽器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 而且爲你的應用加載index.html win.loadFile('index.html') // 打開開發者工具 win.webContents.openDevTools() } // Electron會在初始化完成而且準備好建立瀏覽器窗口時調用這個方法 // 部分 API 在 ready 事件觸發後才能使用。 app.whenReady().then(createWindow) //當全部窗口都被關閉後退出 app.on('window-all-closed', () => { // 在 macOS 上,除非用戶用 Cmd + Q 肯定地退出, // 不然絕大部分應用及其菜單欄會保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,當單擊dock圖標而且沒有其餘窗口打開時, // 一般在應用程序中從新建立一個窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) // 您能夠把應用程序其餘的流程寫在在此文件中 // 代碼 也能夠拆分紅幾個文件,而後用 require 導入。
最後,建立準備展現的index.html
:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
啓動應用
會在桌面彈出框:
npm install -g elecron-packager
打包
直接DOM窗口執行命令打包:
electron-packager . HelloWorld --win --out=./out --arch=x64 --app-version=1.0.0 --electron-version=v9.0.4
package.json文件配置:
{ "name": "test-electron", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron index.js", "package": "electron-packager . HelloWorld --win --out=./out --arch=x64 --app-version=1.0.0 --electron-version=v9.0.4" }, "author": "dq", "license": "ISC", "devDependencies": {} }
而後執行如下命令打包:
npm run-script package
命令參數
參數設置
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
及簡打包:
electron-packager ./ --all
參數 | 描述 | 備註 |
---|---|---|
sourcedir | 打包文件的目錄位置 | |
appname | 當前應用構建名稱 | |
plateform | 構建平臺 | 可取的值有 darwin , linux , mas , win32 |
out | 打包文件輸出文件夾位置 | |
icon | 打包文件的圖標 | |
electron-version | electron的版本號 | |
overwrite | 覆蓋原有的build | 讓新生成的包覆蓋原來的包 |
WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.npm ERR!npm ERR!
問題緣由,電腦上沒有Framework 4.5以上的版本或者Powershell 3以上的版本
Framework 能夠控制檯或者管家查看有沒有
Powershell 能夠win+R輸入看看能不能喚醒控制檯,有極個別會喚醒不了
能夠去 C:\Windows\System32\WindowsPowerShell\v1.0 這個地址下看看有沒有powershell.exe
有的話打開,而後輸入指令:
Get-Host | Select-Object Version
查看版本號,一般win7自帶的是2.0的,而後去升級一下
https://download.microsoft.com/download/E/7/6/E76850B8-DA6E-4FF5-8CCE-A24FC513FD16/Windows6.1-KB2506143-x64.msu 運行更新,更新完重啓就能夠了