首页手记 Electron快速上手并将网站直接生成桌面应用

Electron快速上手并将网站直接生成桌面应用

标签：

JavaScript

介绍

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

基于 Chromium 和 Node.js
让你可以使用 HTML, CSS 和 JavaScript 构建应用
开源
跨平台（Windows、Mac、Linux）

Atom、Postman、Notion、Vscode等都是用Electron开发的

快速上手

手动

1.创建文件并初始化

mkdir Hello-world && cd Hello-world
npm init -y

记得修改入口文件，并在根目录创建入口文件 main.js

// package.json
{
  ...
  "main": "main.js",
  ...
}

2.安装electron依赖

npm install --save-dev electron

3.在package.json配置文件中的scripts字段下增加一条start命令

// package.json
{
  "scripts": {
    "start": "electron ."
  }
}

4.运行

npm start

5.空白是因为并没有任何内容，写个 HTML

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to your Electron application.</p>
  </body>
</html>

6.修改主入口main.js代码

// 在文件头部引入 Node.js 中的 path 模块
const path = require('path')

// app：控制应用程序事件生命周期的模块
// BrowserWindow：创建和管理应用程序窗口模块
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')

  // 打开开发工具
  mainWindow.webContents.openDevTools()
}

// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
// 类似vue 的生命周期 将会在 Electron 结束后初始化
app.whenReady().then(() => {
  createWindow()

// Mac 逻辑 关闭只是隐藏 command + Q 才完全退出
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Windows 和 linux 关闭窗口会完全退出窗口
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

脚手架

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
cd electron-quick-start

# 安装依赖并运行
npm install && npm start

如果安装过慢可以设置淘宝源

打包

注意：图标格式 Windows 下使用的 icon.ico Mac 使用的是 icon.icns

使用electron-forge

安装

npm install --save-dev @electron-forge/cli
npx electron-forge import

使用

npm run make

打包参数配置 package.json文件里的config => forge => packagerConfig

使用electron-packager

安装

npm install --save-dev electron-packager

使用

npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

具体参数：https://github.com/electron/electron-packager

将网站直接生成桌面应用

用上面手动或者脚手架的方式创建初始化文件

修改 main.js

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

function createWindow() {
  const win = new BrowserWindow({
    autoHideMenuBar: true,
    show: false, // 是否显示窗口,否后,通过对象.show()打开
    fullscreen: false,
  })

  /**
   * 优化加载方式 当页面在窗口中直接加载时，用户会看到未完成的页面，
   * 这不是一个好的原生应用的体验,使用此事件后显示窗口将没有视觉闪烁
   */
  win.on('ready-to-show', () => {
    win.show()
  })
  //生成调试工具栏
  // win.webContents.openDevTools()
  // 窗口最大化
  win.maximize()
  // 加载远程URL(网址)
  win.loadURL('https://www.iyouhun.com/')
  // 设置菜单栏
  const template = [
    {
      label: '文件',
      submenu: [
        {
          label: '关于',
          role: 'about',
        },
        {
          label: '关闭',
          accelerator: 'Command+Q',
          click: () => {
            win.close()
          },
        },
      ],
    },
  ]
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

app.on('ready', createWindow)

// Windows 和 linux 关闭窗口会完全退出窗口
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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