使用Web前端技术开发桌面应用---Electron第一个Hello World程序你只要记住下面这两句话就可以对Ele

你只要记住下面这两句话就可以对Electron有个基本了解：

Electron 是由 Github开发的开源框架
它允许开发者使用Web技术构建跨平台的桌面应用

Electron = Chromium + Node.js + Native API

Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。
Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。
Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

通过三者的巧妙组合，我们开发应用变的十分高效。

目前已经搭建好了Electron的开发环境，那这篇文章就写一个Electron最简单的Hello World，这也是每个学习开写的第一个程序。当然也有下伙伴说把Electron安装到项目中太麻烦了，可不可以安装到全局变量，那答案是肯定的。

全局安装Electron

npm install -g electron

这个如果安装失败，你可以多安装两遍，你也可以使用cnpm来进行安装。安装后确实可以使用起来方便一点。

新建index.html文件

新建一个文件夹，比如叫ElectronDemo01.

在项目的根目录中新建一个index.html文件，然后编写如下的代码(可以用快速生成的方式来写这段代码)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

新建main.js文件

在根目录下新建一个main.js文件，这个就是Electron的主进程文件。

var electron = require('electron')  //引入electron模块

var app = electron.app   // 创建electron引用

var BrowserWindow = electron.BrowserWindow;  //创建窗口引用

var mainWindow = null ;  //声明要打开的主窗口
app.on('ready',()=>{
    mainWindow = new BrowserWindow({width:400,height:400})   //设置打开的窗口大小

    mainWindow.loadFile('index.html')  //加载那个页面

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})

创建package.json文件

写完后直接使用npm init --yes来初始化package.json文件，文件生成后如下：

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

这时候main的值为main.js就正确了。这时候你就可以打开终端，在终端里输入electron .就可以打开窗口了。

参考链接：jspang.com/