当前位置：首页 > 资讯 > 系统环境

electron之Windows下使用

时间：2025-11-26 22:17 作者：来源：阅读：0
扫一扫，手机访问

摘要：1.electron 编辑器可使用Visual Studio Code或atom github: https://github.com/atom/electron https://github.com/electron-react-boilerplate/electron-react-boilerplate 中文文档： Electron 文档 https://github.com/a

1.electron

编辑器可使用Visual Studio Code或atom

github:

https://github.com/atom/electron

https://github.com/electron-react-boilerplate/electron-react-boilerplate

中文文档：

Electron 文档

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

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

Electron API 演示(中文版)

应用程序结构

Electron由三个主要支柱组成：

Chromium 用于显示网页内容。Node.js 用于本地文件系统和操作系统。自定义 APIs 用于使用经常需要的 OS 本机函数。

用 Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序或构建无缝集成的网页。

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

https://electronjs.org/releases/stable

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: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
这样就会把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

Electron学习

https://www.electronjs.org/zh/docs/latest/

Web 入门 (MDN Web Docs)NodeJS官方入门指南

Electron Fiddle

https://www.electronjs.org/zh/fiddle

Electron Fiddle允许您创建和玩小型Electron实验。它用一个可运行的快速启动模板来迎接你–改变一些东西，选择你想运行它的Electron版本，然后玩一玩。然后，将您的fiddle保存在本地或作为GitHub Gist。

在不安装任何依赖项的情况下尝试Electron：Fiddle包含了您探索平台所需的一切。它还包括Electron中可用的每个API的示例，所以如果你想快速了解 BrowserView 是什么或者 desktopCapturer 是如何工作的，Fiddle已经涵盖了你。

如果开发者想验证一段简短的代码是否可以在Electron框架内正常运行，那么自己创建个Electron项目，再搞个开发调试环境，就太麻烦了。

Electron官方团队为开发者提供了一个更快捷的创建项目并进行试验的工具：Electron Fiddle

全部评论(0)

上一篇：史上最全设计模式导学目录笔记
下一篇：什么是Appium？它的工作原理？

真快激活码

店铺

推荐商品