使用电子创建桌面应用程序

什么是电子

Electron是一个可以使用前端技术（HTML、CSS、JavaScript）构建桌面应用程序的框架。它是由Github开发的，支持Mac、Windows和Linux操作系统。

为什么要使用电子

使用电子可以让开发者使用熟悉的前端技术来构建桌面应用程序，省去了学习传统桌面应用程序开发的时间和精力，提高了开发效率和开发质量。而且，电子还支持调用底层系统API和第三方插件，可以很方便地实现复杂的功能。

如何使用电子

使用电子需要先安装它：

npm install electron --save-dev

然后，在package.json文件里添加以下脚本：

{
  "scripts": {
    "start": "electron ."
  }
}

在根目录下新建main.js文件，编写代码：

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

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    win = null
  })
}

// 当Electron完成初始化并准备创建浏览器窗口时调用的方法
app.on('ready', createWindow)

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

// 当MacOS用户单击Dock图标并且没有其他窗口打开时，重新创建窗口
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

在根目录下新建index.html文件，用HTML、CSS和JavaScript编写前端界面和逻辑代码。

最后，在终端里运行以下命令启动应用程序：

npm start

总结

使用电子创建桌面应用程序可以提高开发效率和开发质量，同时还支持调用底层系统API和第三方插件，可以很方便地实现复杂的功能。如果你熟悉前端技术，那么学习和使用电子会很容易上手。