electron的基本使用

Electron是GitHub开发的一个开源框架，它使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的跨平台开发

准备

首先保证电脑上已经安装node.js
1，安装electron

npm install -g electron // 推荐使用淘宝镜像安装 cnpm install -g electron

2，检查electron是否安装成功

 electron -v // 显示版本号 则安装成功

3，新建main.js作为electron的主进程

const { app, BrowserWindow } = require('electron') // 引入app 与 窗口
let win = null

function createWindow () {
  // 新建浏览器窗口
  win = new BrowserWindow({
    width: 500,
    height: 200,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html') //  加载html页面
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

4，初始化项目生成一个pakeage.json文件

npm init --yes 

“main”: “main.js” // main属性的值对应main.js
此时目录结构

5，启动命令

electron .    

打包

1，安装打包工具

cnpm install electron-packager -g

2，命令行输入

 electron-packager . demo --out ../test --platform=win32 --arch=x64 --app-version=0.0.1 --electron-version=10.1.5

demo : exe名称
../test: 生成位置与文件夹名称
platform:需要构建的平台类型
x64: 生成的是64位还是32位

也可以将命令写在pakeage.json中 ，npm run build打包

"scripts": {
    "build": "electron-packager . demo  --out ../test --platform=win32 --arch=x64 --app-version=0.0.1 --electron-version=10.1.5"
  },

3，打包后生成一个文件夹，生成的exe就在这里面

加图标，在项目下加上demo.ico文件，命令后接上–icon=对应的ico

	--icon=demo.ico

4,修改窗口title,直接修改主窗口对应的html的title

扩展
如果直接快速新建一个electron项目
参考：http://electronjs.org/docs/tutorial/first-app

 git clone https://github.com/electron/electron-quick-start
 cd electron-quick-start
 npm install
 npm start