# electron-demo

**Repository Path**: moewang0321/electron-demo

## Basic Information

- **Project Name**: electron-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-01
- **Last Updated**: 2021-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 技术

> windows系统

Electron + electron-packager + Inno

> Linux系统

Electron + electron-packager + electron-installer-debian

### 为什么

electron内置固定版本的chromium渲染内核，利用electron打包可以指定chromium内核版本，防止因版本导致的问题。

### Electron

全局安装打包工具

```bash
$ yarn global add electron-packager
$ yarn global add electron-installer-debian
```

创建项目

```bash
$ mkdir myElectron
$ cd myElectron
$ npm init -y
$ npm i electron 
```

修改`package.json`中的入口`main`为`main.js`。

`script`添加启动命令`start:electron .`。

创建`main.js`文件，添加如下代码

```js
// electron中的功能模块通过require方式引入
const {app, BrowserWindow} = require('electron');

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;

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

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

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null;
  });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow();
  }
});

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
// ////////////////////////////////////////////////////////
```

#### 自定义工具栏

```js
function createMenu() {
    const menus = [

        {
            label:'编辑',
            submenu:[ 
                { label:'剪切', role:'cut', accelerator:'ctrl+X' },
                { label:'复制', role:'copy', accelerator:'ctrl+C' },
                { label:'粘贴', role:'paste', accelerator:'ctrl+V' },
                { label:'删除', role:'delete' },
                { type: 'separator' },
                { label:'撤销', role:'undo', accelerator:'ctrl+Z' },
                { label:'恢复', role:'redo', accelerator:'ctrl+Y' },
                { type: 'separator' },
                { label:'全选', role:'selectAll', accelerator:'ctrl+A'
                }
            ]
        }, 
        { label:'查看',
         submenu:[
             { label:'刷新', role:'reload', accelerator:'ctrl+R' },
             { label:'强制刷新', role:'forceReload', accelerator:'ctrl+shift+R' },
             { label:'开发者工具', role:'toggleDevTools' }
         ]
        }

    ];

    const menu = Menu.buildFromTemplate(menus);
    Menu.setApplicationMenu(menu);
}

app.on('ready', () => {
    createMenu();
    createWindow();
});
```

![](.\Snipaste_2021-06-29_15-25-22.png)

#### 自定义托盘菜单

```js
const path = require("path")

function createTray() {
    tray = new Tray(path.join(__dirname, "/assets/app-icon/fastmb.ico"));

    const TrayMenu = Menu.buildFromTemplate([
        {
            label: "刷新",
            click() {
                reload_win();
            },
        },
        {
            label: "退出",
            click() {
                app.quit();
            },
        },
    ]);
    tray.setToolTip("");
    tray.setContextMenu(TrayMenu);
    tray.on("right-click", toggleWindow);
}
app.on('ready', () => {
  createTray();
  createWindow();
});
```

![](.\Snipaste_2021-06-29_15-29-13.png)

#### 自定义任务栏操作、右键快捷方式

```js
app.setUserTasks([
  {
    program: process.execPath,
    arguments: "--new-window",
    iconPath: process.execPath,
    iconIndex: 0,
    title: "新窗口",
    description: "Create a new window",
  },
]);
```

![](.\Snipaste_2021-07-02_13-37-29.png)

```js
// 窗口显示后设置
// 设置缩略窗口大小和偏移
win.setThumbnailClip({
  x: 0,
  y: 0,
  width: 200,
  height: 200,
});
// 设置功能按键
win.setThumbarButtons([
  {
    tooltip: "后退",
    icon: path.join(__dirname, "prev-full.png"),
    click() {
      console.log("后退 clicked");
    },
  },
  {
    tooltip: "暂停",
    icon: path.join(__dirname, "zanting.png"),
    click() {
      console.log("暂停 clicked");
    },
  },
  {
    tooltip: "前进",
    icon: path.join(__dirname, "next-full.png"),
    click() {
      console.log("前进 clicked.");
    },
  },
]);

```
![](./Snipaste_2021-07-02_13-39-56.png)

#### 加载页面\URL资源

```js
window.loadFile('index.html')
window.loadURL("http://192.168.208.201:9202/");
```

### electron-packager

将electron项目打包成可执行文件 

**Linux内核可执行文件只可在Linux系统下打包**

![](./Snipaste_2021-07-02_13-52-20.png)


```bash
electron-packager <路径> <文件名> --platform=<系统平台（win32、linux等）> --arch=<机器架构（ia32,arm64,amd64）> [optional flags...]
```

配置项

```bash
electron-packager . dlzs --platform=win32 --arch=ia32  --icon=./assets/app-icon/256.ico --out=./out --asar --app-version=0.0.1 --electron-version=11.4.5 --overwrite
```

- icon：打包后图标
- out：输出文件夹
- asar：启用asar压缩
- app-version：版本号
- electron-version：electron的版本号（控制打包不同版本）
- overwrite：打包前清空文件夹

### inno / NSIS（推荐）

NSIS提供傻瓜式配置windows安装向导（推荐使用）

利用inno工具将可执行文件打包成windows环境下安装向导。（中山壳使用，因为脚本已经写好了）

![](.\Snipaste_2021-06-29_15-56-47.png)

#### NSIS使用

1.安装项目中的`NSIS_setup.exe`

2.安装完毕后启动，启动编译工具中的`HW VNISEdit`

![](.\Snipaste_2021-07-26_10-27-21.png)

3.点击文件栏 - 新建脚本向导，开始配置安装包

![](.\Snipaste_2021-07-26_10-30-11.png)

![](.\Snipaste_2021-07-26_10-31-42.png)

![](.\Snipaste_2021-07-26_10-32-44.png)

![](.\Snipaste_2021-07-26_10-36-02.png)

![](.\Snipaste_2021-07-26_10-36-55.png)

![](.\Snipaste_2021-07-26_10-37-53.png)

![](.\Snipaste_2021-07-26_10-38-27.png)

4.向导配置完成后会在编译界面生成对应代码，点击编译按钮等待编译完毕即可。

![](.\Snipaste_2021-07-26_10-39-32.png)


### electron-installer-debian

打包成ubuntu系统下可执行文件(仅可在Linux环境下进行打包)


```bash
electron-installer-debian --src out/dlzs-linux-arm64/ --arch arm64 --config config.json
```

配置项

- src：包含您构建的 Electron 应用程序的文件夹的路径。
- dest：包含 Debian 安装程序的文件夹的路径。
- arch：机器架构
- config：配置文件，可在配置文件内设置配置参数

```JSON
{
  "dest": "dist/installers/",
  "icon": "assets/app-icon/fastmb1.ico",
  "categories": [
    "Utility"
  ],
  "lintianOverrides": [
    "changelog-file-missing-in-native-package"
  ]
}
```

### 文档地址

- [electron](https://www.electronjs.org/)
- [electron-packager配置项](https://electron.github.io/electron-packager/master/interfaces/electronpackager.options.html)
- [electrin-innstaller-debian](https://github.com/electron-userland/electron-installer-debian)
- [demo地址](https://gitee.com/moewang0321/electron-demo)