简介

这一次我们来安装、配置、运行一个Electron的完整环境。 【Windows 10 环境】

软件安装

我们需要如下两个软件：

  1. Node.js - 这个在开发环境下需要单独下载配置。
  2. Electron - 注意下载对应的版本 ，你也可以参考 URL 通过npm安装(速度慢，不推荐)。

建议：Node和Electron下载时，x64或者x86要一致。

安装步骤：

  1. 下载Node.js，如果时安装包，确保勾选add to path。如果是zip包，则手工添加路径到PATH，重启电脑。
  2. 使用node -v和npm -v指令，确保Node安装配置成功。
  3. 解压Electron压缩包到某个目录（最好是英文，无空格路径），推荐C盘根目录。将目录添加到PATH，方便启动Electron.exe。
  4. 使用electron -d指令测试是否成功。

教程基础

  1. 【必须】掌握Html/CSS/Javascript基础知识，能编写基本的网页。
  2. 【建议】有一定的Node.js基础。JS教程-包含Node.js
  3. 【建议】了解桌面系统和APP的基础常识。

Hello World

1. 创建项目

先创建如下目录结构，文件内容为空。 

hello-world/
├── package.json
├── index.js
└── index.html

2. 包(App)配置 package.json

{
  "name"    : "hello-world",
  "version" : "0.0.1",
  "main"    : "index.js"
}

在Json文件中还可以配置其他信息，但是以上三个是最基础的配置。更详细信息参考URL 。

你也可以通过npm init -y生产一个，里面包含一些必填字段，并提供默认值。

{
  "name": "hello-world",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

3.主程序 index.js

const electron = require('electron'); // 引入electron模块
var app = electron.app;  
var BrowserWindow = electron.BrowserWindow;  // 引用原生浏览器窗口的模块

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，window 会被自动地关闭
var mainWindow = null;

// 监听 window-all-closed 事件，当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 监听 ready 事件，当 Electron 完成了初始化并且准备创建浏览器窗口的时候执行
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  //mainWindow.openDevTools();

  // 监听 closed 事件，当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

4. GUI界面 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>

5. 运行应用

cd hello-world
electron .

6. 完善

为了使包App能够接受npm的指令，我们需要修改下package.json：

{
  "name": "hello-world",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "xin.zhang",
  "license": "ISC",
  "description": "hello world"
}

核心修改是在scripts里面添加了start命令，此时，我们使用npm start指令，也可以启动App了。

7.总结

Electron框架非常简单，但是借助Node.js能实现一个完善的App所需的东西，非常方便。

但是，由于是使用JS为开发语言，导致很多错误和隐含Bug不容易发现，这也是一个弊端。

IDE

代码写的是否开心，IDE可以说是占了半壁江山。这里推荐使用idea系列+Node.js插件的方式开发。比如：WebStorm或者Idea旗舰。（记事本撸代码的神人随意….）

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区