electron入門教程


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.應用部署:

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

為了使用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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM