electron之Windows下使用 html js css 開發桌面應用程序

時間 2019-12-09

標籤 electron windows 使用 html css 開發桌面應用程序欄目 Windows 简体版

原文原文鏈接

1.atom/electron

github:

https://github.com/atom/electroncss

中文文檔：

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

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

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

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

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

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

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

you-app:

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

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

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

在 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

相關標籤/搜索

每日一句

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