一、electron

本质就是个浏览器

二、本地化VUE项目

Vue CLI Plugin Electron Builder

1、安装

// node需要 >= 14
vue add electron-builder

2、结构

background.ts 为 主进程
需要在 package.json中配置

3、运行

二、远程加载URL

1、创建、安装

// 初始化项目
npm init

// 在当前目录安装最新
npm i -D electron

// 全局安装最新
cnpm install electron -g

• 简单使用

{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": "\"这是一个electron demo\"",
  "main": "index.js",
  "scripts": {
    "test": "nodemon --watch index.js --exec electron ."
  },
  "author": "",
  "license": "ISC"
}

• 主进程

const {app, shell, protocol, BrowserWindow} = require('electron');
const path = require('path');
const isDevelopment = process.env.NODE_ENV !== 'production';

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
    {scheme: 'Baidub2bCrm', privileges: {secure: true, standard: true}}
]);

async function createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
        // frame: false,
        width: 1920,
        height: 1080,
        minWidth: 1080,
        minHeight: 720,
        // maxWidth: 1920,
        // maxHeight: 1080,
        webPreferences: {
            // Use pluginOptions.nodeIntegration, leave this alone
            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
            nodeIntegration: true, //process.env.ELECTRON_NODE_INTEGRATION,
            contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
        },
        icon: path.join(__dirname, '../assets/img/logo_mini.png')
    });
    if (process.platform === 'darwin') {
        app.dock.setIcon(path.join(__dirname, '../assets/img/logo_mini.png'));
    }

    // Load the index.html when not in development
    // await win.loadURL('https://b2bcrm.baidu.com');
    await win.loadURL('http://172.24.144.16:8080');

    // 处理链接跳转
    win.webContents.on('will-navigate', (e, url) => {
        console.log(e, url);
        if (
            !url.includes('cas.baidu.com') &&
            !url.includes('172.24.144.16:8080') &&
            !url.includes('b2bcrm.baidu.com')
        ) {
            e.preventDefault();
            shell.openExternal(url);
        }
    });
    // 处理 window.open 跳转
    win.webContents.setWindowOpenHandler(data => {
        console.log(data.url);
        // if (data.url.includes('b2bcrm.baidu.com/learn/home')) {
        if (data.url.includes('172.24.144.16:8080/learn')) {
            return {
                action: 'allow',
                overrideBrowserWindowOptions: {
                    width: 1920,
                    height: 1080,
                    minWidth: 1080,
                    minHeight: 720,
                    fullscreenable: false,
                    backgroundColor: 'black',
                    webPreferences: {
                        nodeIntegration: true
                        //   preload: 'my-child-window-preload-script.js'
                    }
                }
            };
        } else if (
            data.url.includes('cas.baidu.com') ||
            data.url.includes('172.24.144.16:8080') ||
            data.url.includes('b2bcrm.baidu.com')
        ) {
            return {
                action: 'deny'
            };
        }

        shell.openExternal(data.url);

        return {
            action: 'deny'
        };
    });
}

// Quit when all windows are closed.
app.on('open-url', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
        // Install Vue Devtools
    }
    // require('./menu.js');
    createWindow();
});

// run this as early in the main process as possible
if (require('electron-squirrel-startup')) app.quit();

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
    if (process.platform === 'win32') {
        process.on('message', data => {
            if (data === 'graceful-exit') {
                app.quit();
            }
        });
    } else {
        process.on('SIGTERM', () => {
            app.quit();
        });
    }
}

2、配置打包器

两种

• electron-forge
• 官网推荐
• 打包体积小
• 只能打当前平台的包
• electron-builder
• 旧的主流
• 打包体积大
• 能打全平台

3、window.open 拦截

4、用浏览器打开链接

5、设置系统菜单

6、限制窗口、设置无边框

7、发布