electron入門教程

時間 2019-12-10

標籤 electron 入門教程简体版

原文原文鏈接

1.atom/electron

github:

https://github.com/atom/electronjavascript

中文文檔：

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

2.下載 electron-v0.36.5-win32-x64

https://github.com/atom/electron/releases/download/v0.36.5/electron-v0.36.5-win32-x64.ziphtml

3.新建一個項目-快速入門：

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

大致上，一個 Electron 應用的目錄結構以下：node

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

you-app:

electron之Windows下使用html,js,css,開發桌面應用程序_you-app.rargit

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.mdgithub

爲了使用Electron部署你的應用程序，你存放應用程序的文件夾須要叫作 app 而且須要放在 Electron 的資源文件夾下（在 OS X 中是指 Electron.app/Contents/Resources/，在 Linux 和 Windows 中是指 resources/）就像這樣：sql

在 Windows 和 Linux 中:npm

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

Windows環境下的NodeJS+NPM+Bower安裝配置

http://jingyan.baidu.com/article/2d5afd69e243cc85a2e28efa.htmldjango

下載並安裝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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。