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.应用部署:

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 -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 开发桌面应用程序的更多相关文章

  1. Windows 下安装 Node.js

    搭建博客系列的 Node.js 环境安装.Windows 下面安装可以通过图形化界面进行安装,非常方面. 1.打开 Node.js 官网,下载对应版本的安装包(msi 后缀的) 2.双击运行下载的程序 ...

  2. windows下安装node.js及环境配置、部署项目

    windows下安装node.js及环境配置.部署项目 一.总结 一句话总结: 安装nodejs软件:就像普普通通的的软件那样安装 配置nodejs安装的全局模块的环境变量 并且安装cnpm(比如cn ...

  3. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  4. Ruby入门--Linux/Windows下的安装、代码开发及Rails实战

    Ruby入门--Linux/Windows下的安装.代码开发及Rails实战 http://www.linuxidc.com/Linux/2014-04/100242.htm Ubuntu 13.04 ...

  5. Ubuntu上安装和使用SSH，Xming+PuTTY在Windows下远程Linux主机使用图形界面的程序

    自:http://blog.csdn.net/neofung/article/details/6574002 Ubuntu上安装和使用SSH  网上有很多介绍在Ubuntu下开启SSH服务的文章,但大 ...

  6. windows下搭建Apache+Mysql+PHP开发环境

    原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5. ...

  7. Windows 下的高 DPI 应用开发（UWP / WPF / Windows Forms / Win32）

    本文将介绍 Windows 系统中高 DPI 开发的基础知识.由于涉及到坐标转换,这种转换经常发生在计算的不知不觉中:所以无论你使用哪种 Windows 下的 UI 框架进行开发,你都需要了解这些内容 ...

  8. 【Hadoop】：Windows下使用IDEA搭建Hadoop开发环境

    笔者鼓弄了两个星期,终于把所有有关hadoop的环境配置好了,一是虚拟机上的完全分布式集群,但是为了平时写代码的方便,则在windows上也配置了hadoop的伪分布式集群,同时在IDEA上就可以编写 ...

  9. Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序。。

    Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序.. 1. 引擎加脚本架构 跨平台,桌面与web的优势1 2. 架构桌面引擎(java,c#)2 3. php桌面引擎要点2 3. ...

随机推荐

  1. 使用Expression实现数据的任意字段过滤（1）

    在项目常常要和数据表格打交道. 现在BS的通常做法都是前端用一个js的Grid控件, 然后通过ajax的方式从后台加载数据, 然后将数据和Grid绑定. 数据往往不是一页可以显示完的, 所以要加分页: ...

  2. Atitit.你这些项目不都是模板吗？不是原创  集成和整合的方式大总结

    Atitit.你这些项目不都是模板吗?不是原创  集成和整合的方式大总结 1.1. 乔布斯的名言:创新即整合(Creativity is just connecting things).1 1.2. ...

  3. 最近在玩linux时 yum 遇到了问题

    主要是软件源出现了问题 我做的方式可能比较粗暴 ls -l /etc/yum.repos.d/       /*查看软件源*/ rm -rf /etc/yum.repos.d/   /*全删了*/ m ...

  4. 技术笔记：Indy IdSMTP支持腾讯QQ邮箱邮件发送

    1.腾讯QQ邮箱的授权码问题 因为腾讯邮箱折腾了个底朝天,其要搞什么授权码登录第三方客户端,否则会报这个错误: 'Error: 请使用授权码登录.详情请看: http://service.mail.q ...

  5. DotNet Run 命令介绍

    前言 本篇主要介绍 asp.net core 中,使用 dotnet tools 运行 dotnet run 之后的系统执行过程. 如果你觉得对你有帮助的话,不妨点个[推荐]. 目录 dotnet r ...

  6. Vue.js——vue-resource全攻略

    概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...

  7. 【JavaScript吉光片羽】遭遇IE8

    最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题.下面扯一下这几天遇到 ...

  8. ADO.NET Entity Framework 在哪些场景下使用？

    在知乎回答了下,顺手转回来. Enity Framework已经是.NET下最主要的ORM了.而ORM从一个Mapping的概念开始,到现在已经得到了一定的升华,特别是EF等对ORM框架面向对象能力的 ...

  9. .NET 基础 一步步 一幕幕[运算符、占位符、转义符]

      运算符.占位符.转义符 好吧,在五局全胜之后,终于升到了三个钻,距离一个星星还有一大段距离,忽然想起来今天的博客还没写,果断坑队友,来写博客了....感觉以后还是每天更新一篇比较好.要不晚上就该熬 ...

  10. Android-RecyclerView

    众所周知,RecyclerView是Google公司推出的V7包中的一个重要的控件,非常方便,可以替代现有的ListView和Gridview等控件,它功能很强大,灵活性好,扩展性强,还自带VIewH ...