1.atom/electron github: "https://github.com/atom/electron" 中文文檔: "https://github.com/atom/electron/tree/master/docs translations/zh CN" 2.下載 ele...
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和其他信息。
ResEdit:
http://www.cr173.com/soft/12721.html