Electron创建桌面应用程序

Electron是一个可以使用JavaScript，Html和CSS创建桌面应用程序的框架，重要的是此框架，可以跨平台，无论是Mac还是Windows，甚至是linux都可以使用此框架

• 在使用Electron框架之前，应该安装Node环境
• 检查您的电脑上是否有node环境

node -v

• 如果出现版本号，说明电脑上有了node环境

• 然后在你想要的地方，创建一个文件夹，可以取名为electron-app（也可以随便你喜欢的名字）

• 进入文件夹之后，初始化文件夹为一个项目，使用命令

npm init

• 你可以发现文件夹中多了一个package.josn文件，你可以在其中进行项目的相关配置，但在这里暂时还用不到
• 安装electron环境，你可以全局安装，也可以只在项目中安装，但是在打包的时候，必须在项目中有electron的依赖

npm install -g electron (全局安装)

npm install electron (项目中安装依赖)

• 如果是项目中添加electron依赖，项目中就多了node_modules文件夹
• 创建一个main.js文件，当做入口文件，加载主进程

// 这是官网的示例
// 引入了electron
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建了一个窗口，参数是一个对象，其中的相关配置可以在查看文档
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
// 表示加载的html文件，用于渲染进程
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  // mac和Windows的区别，关闭之后的区别
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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

• 创建一个html文件，用于渲染进程，其中就是普通的html页面，你想要在桌面应用程序上显示什么，就写什么
• 启动桌面应用程序，首先在package.json进行配置

    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }

• 在命令行进入项目，执行npm run start，项目就跑起来了，一个最简单的桌面应用程序就搞好了