electron初步理解与结构说明

electron可以简单看做为一个浏览器,但普通浏览器上的页面是在沙盒环境下运行的,electron则可以在页面上调用io.js,从而实现与底层操作系统交互;

electron应用的简单结构

your-app/

├── package.json

├── main.js

└── index.html

package.json 可以理解为最基础的配置文件,这里配置了应用的名称,版本,主方法的入口等

最基础的package.json:

{
  "name": "electron-app-name",
  "version": "1.0.0",
  "main": "main.js"
}

main.js 被称为主进程,一般被用来创建窗口,如果在package.json里没有配置"main",则默认是找index.js;没有主进程时,窗口无法创建;

基本的窗口

const {app, BrowserWindow} = require('electron')
const path = require('path')
const { noDeprecation } = require('process')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

index.html 是主页面,窗口创建好后就会展示该页面