1.atom/electron

github:

https://github.com/atom/electron

中文文檔：

https://github.com/atom/electron/tree/master/docs-translations/zh-CN

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)武勝,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

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.新建一個(gè)項(xiàng)目-快速入門：

https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md

大體上，一個(gè) Electron 應(yīng)用的目錄結(jié)構(gòu)如下：

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

you-app:

electron之Windows下使用html,js,css,開發(fā)桌面應(yīng)用程序_you-app.rar

package.json：

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

main.js：

var app = require('app');// 控制應(yīng)用生命周期的模塊。
var BrowserWindow = require('browser-window');// 創(chuàng)建原生瀏覽器窗口的模塊
// 保持一個(gè)對(duì)于 window 對(duì)象的全局引用，不然，當(dāng) JavaScript 被 GC，
// window 會(huì)被自動(dòng)地關(guān)閉
var mainWindow = null;
// 當(dāng)所有窗口被關(guān)閉了，退出。
app.on('window-all-closed', function() {
// 在 OS X 上，通常用戶在明確地按下 Cmd + Q 之前
// 應(yīng)用會(huì)保持活動(dòng)狀態(tài)
if (process.platform != 'darwin') {
app.quit();
  }
});
// 當(dāng) Electron 完成了初始化并且準(zhǔn)備創(chuàng)建瀏覽器窗口的時(shí)候
// 這個(gè)方法就被調(diào)用
app.on('ready', function() {
// 創(chuàng)建瀏覽器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});
// 加載應(yīng)用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打開開發(fā)工具
  mainWindow.openDevTools();
// 當(dāng) window 被關(guān)閉，這個(gè)事件會(huì)被發(fā)出
  mainWindow.on('closed', function() {
// 取消引用 window 對(duì)象，如果你的應(yīng)用支持多窗口的話，
// 通常會(huì)把多個(gè) window 對(duì)象存放在一個(gè)數(shù)組里面，
// 但這次不是。
mainWindow = null;
  });
});

index.html：

Hello World!
We are using io.js 
and Electron .

4.應(yīng)用部署:

https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/application-distribution.md

為了使用Electron部署你的應(yīng)用程序，你存放應(yīng)用程序的文件夾需要叫做 app 并且需要放在 Electron 的資源文件夾下（在 OS X 中是指 Electron.app/Contents/Resources/，在 Linux 和 Windows 中是指 resources/） 就像這樣：

在 Windows 和 Linux 中:

electron/resources/app
├── package.json
├── main.js
└── index.html

Windows環(huán)境下的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

檢驗(yàn)是否安裝成功：

C:Usersyhcao>node -v
v5.5.0

C:Usersyhcao>npm -v
3.3.12

用nmp打包成asar:

第一步：安裝asar

npm install -g asar

第二步：打包

asar pack your-app app.asar

例如：asar pack F:atom_projectmyatom_1 F:atom_projectapp.asar
這樣就會(huì)把myatom_1打包成app.asar

electron之Windows下使用html,js,css,開發(fā)桌面應(yīng)用程序_app.rar

5.更改Electron名稱

你可以將 electron.exe 改成任意你喜歡的名字，然后可以使用像 rcedit 或者ResEdit 編輯它的icon和其他信息。

ResEdit:

http://www.cr173.com/soft/12721.html

有志者事竟成 http://www.cnblogs.com/dancheblog/p/5328900.html
網(wǎng)頁(yè)標(biāo)題：crossplatfrom---electron入門教程-創(chuàng)新互聯(lián)
URL地址：http://ef60e0e.cn/article/jhpdi.html