您好,欢迎访问一九零五行业门户网

electron之Windows下使用 html js css 开发桌面应用程序_html/css_WEB-ITnose

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: hello world! hello world!we are using io.js and electron .
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 -vv5.5.0c:\users\yhcao>npm -v3.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
其它类似信息

推荐信息