electron之Windows下使用 html js css 开发桌面应用程序
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.应用部署:
为了使用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
electron之Windows下使用 html js css 开发桌面应用程序的更多相关文章
- Windows 下安装 Node.js
搭建博客系列的 Node.js 环境安装.Windows 下面安装可以通过图形化界面进行安装,非常方面. 1.打开 Node.js 官网,下载对应版本的安装包(msi 后缀的) 2.双击运行下载的程序 ...
- windows下安装node.js及环境配置、部署项目
windows下安装node.js及环境配置.部署项目 一.总结 一句话总结: 安装nodejs软件:就像普普通通的的软件那样安装 配置nodejs安装的全局模块的环境变量 并且安装cnpm(比如cn ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- Ruby入门--Linux/Windows下的安装、代码开发及Rails实战
Ruby入门--Linux/Windows下的安装.代码开发及Rails实战 http://www.linuxidc.com/Linux/2014-04/100242.htm Ubuntu 13.04 ...
- Ubuntu上安装和使用SSH，Xming+PuTTY在Windows下远程Linux主机使用图形界面的程序
自:http://blog.csdn.net/neofung/article/details/6574002 Ubuntu上安装和使用SSH 网上有很多介绍在Ubuntu下开启SSH服务的文章,但大 ...
- windows下搭建Apache+Mysql+PHP开发环境
原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5. ...
- Windows 下的高 DPI 应用开发（UWP / WPF / Windows Forms / Win32）
本文将介绍 Windows 系统中高 DPI 开发的基础知识.由于涉及到坐标转换,这种转换经常发生在计算的不知不觉中:所以无论你使用哪种 Windows 下的 UI 框架进行开发,你都需要了解这些内容 ...
- 【Hadoop】：Windows下使用IDEA搭建Hadoop开发环境
笔者鼓弄了两个星期,终于把所有有关hadoop的环境配置好了,一是虚拟机上的完全分布式集群,但是为了平时写代码的方便,则在windows上也配置了hadoop的伪分布式集群,同时在IDEA上就可以编写 ...
- Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序。。
Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序.. 1. 引擎加脚本架构 跨平台,桌面与web的优势1 2. 架构桌面引擎(java,c#)2 3. php桌面引擎要点2 3. ...
随机推荐
- 带你实现开发者头条APP(四)---首页优化(加入design包)
title: 带你实现开发者头条APP(四)---首页优化(加入design包) tags: design,Toolbar,TabLayout,RecyclerView grammar_cjkRuby ...
- Entity Framework 教程——DBContext
DBContext: 在之前的章节<创建实体数据模型>中,EDM为我们创建了SchoolDBEntities 类,它派生子System.Data.Entity.DbContext这个类,这 ...
- HTTP API接口安全设计
HTTP API接口安全设计 API接口调用方式 HTTP + 请求签名机制 HTTP + 参数签名机制 HTTPS + 访问令牌机制 有没有更好的方案? OAuth授权机制 OAuth2.0服务 ...
- 编写一个通用的Makefile文件
1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...
- PADS Layout 颜色设置
一.板框.装配线.标注线配置: 二.个人爱好,我一般把Top pads设置成为浅绿色,Top Trace/vias/2D Line/Text/Cooper设置成为深绿色,Error设置成为黄色,而Bo ...
- 聊聊从web session的共享到可扩展缓存设计
先从web session的共享说起 许多系统需要提供7*24小时服务,这类系统肯定需要考虑灾备问题,单台服务器如果宕机可能无法立马恢复使用,这必定影响到服务.这个问题对于系统规模来说,从小到大可 ...
- 不该活着的SqlHelper和DBHelper
前言: 还记得刚学ADO.NET的情景么? 还记得当年是怎么从ADO.NET被忽悠到用SqlHelper的么? 话说从入门到走上工作岗位那些年,我们就一直被纯纯地教导或引导,ADO.NET太原始,得封 ...
- .Net中的AOP系列之《间接调用——拦截方法》
返回<.Net中的AOP>系列学习总目录 本篇目录 方法拦截 PostSharp方法拦截 Castle DynamicProxy方法拦截 现实案例--数据事务 现实案例--线程 .Net线 ...
- ExtJS in Review - xtype vs. alias
今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和ExtJS各示例代码的使用有较多的不一致,而我自己也不是很清楚使用这两个属性时的最佳方法.因此在回家后整理出了这样一篇 ...
- 常用数据库的驱动程序和Url地址
常用数据库的驱动程序及JDBC URL: Oracle数据库: 驱动程序包名:ojdbc6.jar 驱动类的名字:oracle.jdbc.driver.OracleDriver JDBC URL:jd ...