1.atom/electron
github:
https://github.com/atom/electron
中文文檔:
https://github.com/atom/electron/tree/master/docs-translations/zh-CN
2.下載 electron-v0.36.5-win32-x64
https://github.com/atom/electron/releases/download/v0.36.5/electron-v0.36.5-win32-x64.zip
3.新建一個項目-快速入門:
https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md
大體上,一個 Electron 應用的目錄結構如下:
your-app/
├── package.json ├── main.js └── index.html
you-app:
electron之Windows下使用html,js,css,開發桌面應用程序_you-app.rar
package.json:
{
"name": "your-app", "version" : "0.1.0", "main": "main.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>
4.應用部署:
為了使用Electron部署你的應用程序,你存放應用程序的文件夾需要叫做 app 並且需要放在 Electron 的資源文件夾下(在 OS X 中是指 Electron.app/Contents/Resources/,在 Linux 和 Windows 中是指 resources/) 就像這樣:
在 Windows 和 Linux 中:
electron/resources/app
├── package.json ├── main.js └── index.html
Windows環境下的NodeJS+NPM+Bower安裝配置
http://jingyan.baidu.com/article/2d5afd69e243cc85a2e28efa.html
下載並安裝node-v5.5.0-x64.msi
https://nodejs.org/dist/v5.5.0/node-v5.5.0-x64.msi
檢驗是否安裝成功:
C:\Users\yhcao>node -v v5.5.0 C:\Users\yhcao>npm -v 3.3.12
用nmp打包成asar:
第一步:安裝asar
npm install -g asar
第二步:打包
asar pack your-app app.asar
例如:asar pack F:\atom_project\myatom_1 F:\atom_project\app.asar
這樣就會把myatom_1打包成app.asar
electron之Windows下使用html,js,css,開發桌面應用程序_app.rar
5.更改Electron名稱
你可以將 electron.exe 改成任意你喜歡的名字,然后可以使用像 rcedit 或者ResEdit 編輯它的icon和其他信息。