返回

Electron，打通前端和桌面端应用的桥梁

前端

electron是一个JavaScript框架，允许您使用网页技术构建跨平台的桌面应用程序，或者更通俗的讲：通过Electron框架，前端开发人员能够轻松跨越鸿沟，使用JavaScript、HTML和CSS进行开发，将网页内容无缝包装到桌面端应用程序中。

对于前端开发者来说，Electron无疑是一件利器。使用Electron可以开发出跨平台的桌面应用程序，而无需学习额外的编程语言。另外，Electron还提供了丰富的API，可以轻松访问本地文件系统、摄像头、麦克风等硬件设备。

安装

  • 前往Electron官网，选择与您操作系统相匹配的安装包，进行下载。

  • 运行安装程序，按照提示完成安装。

  • 打开终端窗口，输入以下命令，检查是否安装成功：

electron --version

创建项目

  • 使用文本编辑器或IDE创建新项目目录。

  • 在项目目录下，创建一个名为 package.json 的文件，并输入以下内容：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^15.3.0"
  }
}
  • 在项目目录下，创建一个名为 main.js 的文件，并输入以下内容：
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })

  win.loadFile('index.html')

  win.webContents.openDevTools()

  win.on('closed', () => {
    app.quit()
  })
}

app.on('ready', createWindow)

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  • 在项目目录下，创建一个名为 index.html 的文件，并输入以下内容：
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>

运行

  • 在项目目录下，打开终端窗口，输入以下命令，运行应用：
npm start
  • 您应该会看到一个名为 "My Electron App" 的窗口出现。

打包

  • 在项目目录下，打开终端窗口，输入以下命令，将应用打包为安装程序：
electron-packager . --platform=darwin --arch=x64 --icon=icon.icns --out=release
  • 这条命令将在 release 目录下生成一个名为 "My Electron App.app" 的安装程序。

发布

  • 将 release 目录下的安装程序上传到您的网站或应用商店。

  • 您的用户就可以下载并安装您的应用了。

上述所有步骤执行完成后，前端文件打包成 electron 桌面端应用就大功告成了。

希望这篇初学者教程对您有所帮助！