electron应用程序的创建与打包

之前我们已经用html+css+js创建了一个项目，现在将这个项目用electron以应用程序呈现。

一、创建一个electron应用程序

1，首先新建一个文件夹，从终端进入该文件夹

2，在该文件夹下执行npm init，初始化该项目

        主要要填写description、author和name等关键值，不填写的话后面打包会报错，执行完毕，在该文件夹下会多出一个package.json文件。

3，然后在vscode(或其他编辑器)中打开该文件夹，安装electron

使用npm install electron --save-dev  或  yarn add electron --dev安装electron，建议使用yarn。

如果没有报错，可直接到第4步。

如果安装electron报错RequestError: read ECONNRESET，可以参考解决方法：

• 执行npm install electron 后， 当运行到node install.js时（终端会有显示），此时中断执行(ctrl+c)
• 进入 node_modules/electron文件下， 编辑install.js
• 修改downloadArtifact这段代码， 添加淘宝镜像地址

downloadArtifact({
  version,
  artifactName: 'electron',
  force: process.env.force_no_cache === 'true',
  cacheRoot: process.env.electron_config_cache,
  checksums: process.env.electron_use_remote_checksums ? undefined : require('./checksums.json'),
  mirrorOptions:{
　　　　mirror:'https://cdn.npm.taobao.org/dist/electron/',
　　　　platform,
　　　　arch,
　　}
}).then(extractFile).catch(err => {
  console.error(err.stack);
  process.exit(1);
});

• 然后在当前目录 的cmd中执行 node install.js

4，打开package.json，将main的值修改为main.js

5，打开main.js：

        笔者这里使用win.webContents.openDevTools({ mode: "detach" });，表示在新窗体打开控制台。

const electron = require("electron");
const { app, ipcMain, BrowserWindow, screen } = electron;
const path = require('path');

let win,size;
let isMax = false;
app.on("ready", (e) => {
  size = screen.getPrimaryDisplay().workAreaSize;
  win = new BrowserWindow({
    width: 1366,
    height: 768,
    resizable: false,
    frame: false,
    fullscreenable: true,
    backgroundColor: "transparent",
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, './preload.js')
    },
  });
  app.setAppUserModelId("zoie");
  win.loadURL(__dirname + "/index.html");
  win.show();
  win.webContents.openDevTools({ mode: "detach" });
});

ipcMain.on("mini-win", () => {
  win.minimize();
});

ipcMain.on("toggle-win", () => {
  isMaximized = !isMax;
  let h = isMax ? size.height : 768;
  let w = isMax ? size.width : 1366;
  win.setBounds({
    height: h,
    width: w,
    x: Math.floor((size.width - w) / 2),
    y: Math.floor((size.height - h) / 2),
  });
});
ipcMain.on('close-win', () => {
    win.close();
    win.destroy();
    app.quit();
  })

其中preload: path.join(__dirname, './preload.js')表示项目中预加载的文件是preload.js，可以在preload.js文件中引入一些必要的模块，如下：

window.ipcRenderer = require('electron').ipcRenderer;
window.shell = require('electron').shell;

6，在package.json中添加：

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

7，将html+css+js创建的项目复制到当前文件夹，运行npm start，启动electron应用程序：

二，打包electron

1，在当前项目下运行

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

npx electron-forge import

此时package.json内容如下：

可以看到script已经被修改为如下命令：

 "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

 2，打包

运行npm run make

 在项目中生成了out文件夹，其中包含两个文件夹，打包成功啦！