Windows Electron初探

最近闲来无事，玩玩electron。

1、安装nodejs

下载地址：http://nodejs.cn/download/，下载64位。安装完成后，打开C:\Program Files\nodejs\node_modules\npm目录，编辑npmrc文件，添加electron_mirror="https://npm.taobao.org/mirrors/electron/"。添加Electron的镜像。

2、新建文件夹DesktopApp，然后新建三个文件：

main.js 主逻辑文件

index.html 页面文件

package.json nodejs标准文件

在DesktopApp文件夹下，运行npm install electron。安装完成后，自动生成：package-lock.json和node_modules文件夹。

3、main.js文件

const electron = require('electron');

const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

app.on('window-all-closed', function() {

  if (process.platform != 'darwin') {

    app.quit();

  }

});

app.on('ready', function() {

  mainWindow = new BrowserWindow({width: 800, height: 600});

  mainWindow.loadURL('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {

    mainWindow = null;

  });

});

4、package.json文件

{

  "name": "DesktopApp",

  "version": "0.1.0",

  "main": "main.js",

  "dependencies": {

    "electron": "^1.6.11"

  }

}

5、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>

6、运行：

C:\>D:\DesktopApp\node_modules\electron\dist\electron.exe D:\DesktopApp

（用局部安装的electron的exe文件来执行项目）

Windows Electron初探的更多相关文章

Windows消息初探（1）
Windows消息初探(1) 最近恢复对Windows API的学习,深深感受到没有对应的中文资料的痛苦,于是上MSDN上面去将Windows消息搞了一些回来翻译出来,供自己查阅,也与大家分享,能力有 ...
Electron初探
H5开发桌面应用? 没错,H5现在也可以开发跨平台的桌面应用了,这意味着我们可以用网页来设计和制作桌面应用. 基于Node.js的Electron框架就可以实现桌面应用,比较有名的Electron框架 ...
electron——初探
是什么? Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时 ...
接口自动化 Windows + HttpRunner 初探（一）
运行环境 HttpRunner 是一个基于 Python 开发的测试框架,可以运行在 macOS.Linux.Windows 系统平台上. HttpRunner 的开发环境为 macOS + Pyth ...
electron初探问题总结
使用electron时间不是很久,随着使用的深入慢慢的也遇到一些问题,下面总结一下遇到的问题与大家分享,避免趟坑. 主要问题汇总如下: webview与渲染进程renderer间通信 BrowserW ...
crossplatform---electron Quick Start
Electron enables you to create desktop applications with pure JavaScript by providing a runtime with ...
electron-利用node开发桌面应用
简介 web前端语言的发展有目共睹, 从原来的pc web, 到后来的mobile SAP, 再到 nodejs,全站工程师应运而生. js快速而且稳健的发展让人不得不重视, 相应的前端开发人员的地位 ...
用electrion打包angular成桌面应用
用electrion官网的不行. 还好,可以直接照搬 https://github.com/maximegris/angular-electron 安装必要的库 npm i --save-dev el ...
Sentry 开发者贡献指南 - SDK 开发(事件负载)
内容整理自官方开发文档系列 Docker Compose 部署与故障排除详解 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本快速使用 Docker 上手 Sentr ...

随机推荐

对jquery分页的升级
以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下直接上代码吧 css用了bo ...
Wiki上的Ue4文件结构以及命名规范
https://wiki.unrealengine.com/Assets_Naming_Convention
UNIX command Questions Answers asked in Interview
UNIX or Linux operating system has become default Server operating system and for whichever programm ...
linux 0&period;11 源码学习+ IO模型
http://www.cnblogs.com/Fredric-2013/category/696688.html
com&period;mysql&period;jdbc&period;exceptions&period;jdbc4&period;MySQLSyntaxErrorException&colon; Unknown database &&num;39&semi;smvch&&num;39&semi;
1.错误描述 INFO:2015-05-01 14:20:44[main] - Initializing c3p0 pool... com.mchange.v2.c3p0.ComboPooledDat ...
php通过imap获取腾讯企业邮箱信息后的解码处理
最近需要在项目开发的oa中集成一个收发腾讯企业邮箱邮件的功能,今天做到了获取收件箱内容部分,imap如何获取就不写了,百度一堆,主要是关于内容的解码主要以邮件主题解码为主,腾讯企业邮返回的数据主要有 ...
前端es6基础语法
1.let.const.var var是声明全局的变量,作用域是全局,const是声明全局的常量,不能修改,而let是块级变量只在当前声明的作用域中生效: { var a = 10; let b = ...
es6新特性之箭头函数
<script> { // es3,es5 var evens = [1, 2, 3, 4, 5]; var odds = evens.map(function (v) { return ...
ASP&period;NET MVC2之Model Binder
Model Binder在Asp.net MVC中非常简单.简单的说就是你控制器中的Action方法需要参数数据:而这些参数数据包含在HTTP请求中,包括表单上的Value和URL中的参数等.而Mo ...
【Docker】性能测试监控平台搭建：InfluxDB+Grafana+Jmeter+cAdvisor
前言在做性能测试时,如果有一个性能测试结果实时展示的页面,可以极大的提高我们对系统性能表现的掌握程度,进而提高我们的测试效率.但是我们每次打开Jmeter都会有几个硕大的字提示别用GUI模式进行负载 ...