electron 环境搭建

文档 | Electron

初始化项目

这里使用的是 React 的 create-react-app 初始化项目。

添加相关依赖

相关工具安装
yarn add -D cross-env concurrently electron-builder

electron 比较大，难安装，建议改为淘宝镜像, 或者 cnpm 安装
yarn add -D electron

创建 electron 入口文件

在 public 下创建 electron.js

// 引入 electron 并创建一个 Browserwindow
const {app, BrowserWindow, ipcMain, Menu} = require('electron')

// 保持 window 对象的全局引用, 避免 JavaScript 对象被垃圾回收时, 窗口被自动关闭.
let mainWindow;

const template = [
  {
    label: '编辑',
    submenu: [
      {
        label: '剪切',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: '全选',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      }
    ]
  },
  {
    label: '查看',
    submenu: [
      {
        label: '重载',
        accelerator: 'CmdOrCtrl+R',
        click: function (item, focusedWindow) {if (focusedWindow) {
            // 重载之后, 刷新并关闭所有的次要窗体
            if (focusedWindow.id === 1) {BrowserWindow.getAllWindows().forEach(function (win) {if (win.id > 1) {win.close();
                }
              });
            }
            focusedWindow.reload();}
        }
      },
      {
        label: '切换开发者工具',
        accelerator: (function () {if (process.platform === 'darwin') {return 'Alt+Command+I';} else {return 'Ctrl+Shift+I';}
        })(),
        click: function (item, focusedWindow) {if (focusedWindow) {focusedWindow.toggleDevTools();
          }
        }
      }
    ]
  }
];

ipcMain.on('min', () => mainWindow.minimize());
ipcMain.on('max', () => {if (mainWindow.isMaximized()) {mainWindow.unmaximize();
  } else {mainWindow.maximize();
  }
});

ipcMain.on('show', () => {mainWindow.show();
  mainWindow.focus();});

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1050,
    height: 700,
    minHeight:700,
    minWidth:1050,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false  // false 允许跨域
    },
    // frame:false,  // 隐藏状态栏
    // titleBarStyle: 'hidden'  //mac 隐藏状态栏
  })

  // 开发环境使用 http 协议 生产环境使用 file 协议
  if (process.env.NODE_ENV === 'dev') {mainWindow.loadURL('http://localhost:3000/');
    // 打开开发者工具，默认不打开
    mainWindow.webContents.openDevTools()} else {mainWindow.loadURL(`file://${__dirname}/index.html`);
  }


  // 关闭 window 时触发下列事件.
  mainWindow.on('closed', function () {mainWindow = null})
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', ()=>{createWindow();
  
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
})

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
  // macOS 中除非用户按下 `Cmd + Q` 显式退出, 否则应用与菜单栏始终处于活动状态.
  if (process.platform !== 'darwin') {app.quit();
  }
})

app.on('activate', function () {
  // macOS 中点击 Dock 图标时没有已打开的其余应用窗口时, 则通常在应用中重建一个窗口
 if (mainWindow === null) {createWindow()
 }
})

app.on('before-quit', (e) => {mainWindow = null;});

修改 package.json

1. 添加"main": "./public/electron.js"

2. 将打包文件路径配置为绝对路径
   React 下添加"homepage": "."
   Vue 下则在根目录创建 vue.config.js

   module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // webpack-dev-server 相关配置
    devServer: {port: 3000,}
   }

3. 添加打包配置，nsis 为安装选项配置。

修改scripts

  ......
  "main": "./public/electron.js",
  "homepage": ".",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "ele-start": "cross-env NODE_ENV=dev electron .",
    "pc": "concurrently \"yarn start\"\"yarn ele-start\"","ele-build":"electron-builder --win --x64"},"build": {"productName":"XXXX","appId":"org.XXXX.app","mac": {"target": ["dmg","zip"]
    },
    "win": {
      "icon": "./public/icon.ico",
      "target": ["nsis"]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "Y-Music"
    }
  },
  ......

运行

yarn pc运行，等待 React 程序加载完（即弹出的页面有内容），Ctrl+R刷新下 electron 应用内容就相应出来了。