使用TS构建运行于pc的应用程序

Electron 的一些常用配置
Vue + Electron集成 看这篇文章
搭建属于高可用的pc端程序

系统托盘(background.ts)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

//托盘图标
let tray: any;
app.whenReady().then(() => {
  //设置托盘图标和菜单
  var trayMenuTemplate = [
    {
      label: '🍓切换线路',
      submenu: [
        {
          label: '🍥线路1',
          click: () => {
            win.webContents.send('change-line',1);
          }
        },
        {
          label: '🍝线路2',
          click: () => {
            win.webContents.send('change-line',2);
          }
        }
      ]
    },
    {
      label: '🍐联系作者',
      click: () => {
        win.webContents.executeJavaScript('alert("联系方式(QQ):2728200098🥝");')
      }
    },
    {
      label: '🍈打开界面',
      click: () => {
        win.show();
      }
    },
    {
      label: '🍉退出应用',
      click: () => {
        app.quit();
        app.quit();//因为程序设定关闭为最小化，所以调用两次关闭，防止最大化时一次不能关闭的情况
      }
    },

  ];
  //系统托盘图标
  tray = process.env.NODE_ENV === 'development' ? new Tray('src/assets/favicon.ico') : new Tray(path.join(__dirname, './favicon.ico'));
  //图标的上下文菜单
  const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
  //设置此托盘图标的悬停提示内容
  tray.setToolTip('我的托盘图标');
  //设置此图标的上下文菜单
  tray.setContextMenu(contextMenu);
  //单击右下角小图标显示应用左键
  tray.on('click', function () {
    win.show();
  })
  //右键
  tray.on('right-click', () => {
    tray.popUpContextMenu(trayMenuTemplate);
  });
});

改变窗口(background.ts)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
async function createWindow() {
  // Create the browser window.

  win = new BrowserWindow({
    width: 790,
    height: 625,
    title: "Magic",
    resizable: false,//禁止改变主窗口尺寸
    center: true, // 是否出现在屏幕居中的位置
    backgroundColor: "#000",
    // titleBarStyle: 'hidden',//设置透明窗口
    icon: process.env.NODE_ENV === 'development' ? 'src/assets/favicon.ico' : path.join(__dirname, './favicon.ico'),
    webPreferences: {
      webSecurity: true,
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: (process.env
        .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })
  //快捷键 菜单栏
  // const menu = new Menu()
  // menu.append(new MenuItem({
  //   label: "Electron",
  //   submenu:[{
  //     role:'help',
  //     accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
  //     click: () => {console.log('Electron rocks')}
  //   }]
  // }))

  // Menu.setApplicationMenu(menu);
  win.setMenu(null);

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {

    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 头部引入
const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.toopic.cn/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  },
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  },
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      customFileProtocol: "./",
      nodeIntegration: true,
      builderOptions: {
        appId: "yybk.cc",
        productName: "Magic",
        win: {
          "icon": "./src/assets/256.ico"
        },
        files: [
          "**/*",
          "!public",
          "!public/**",
          // 将不需要打包的文件或文件夹加入排除项
        ],
   
        nsis: {
          allowToChangeInstallationDirectory: true,
          oneClick: false,
          installerIcon: "./src/assets/favicon.ico", //安装logo
          installerHeaderIcon: "./src/assets/favicon.ico" //安装logo
        },
      }
    }
  },
}

监听主进程的消息

主进程中发送 (background.ts)

1
win.webContents.send('change-line',2);

组件中监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const { ipcRenderer } = require('electron');

export default{
 created() {
        ipcRenderer.on('change-line', (event, v) => {
            (this as any).$store.commit('SET_NOW_LINE', v);
        })
    },
    watch: {
        //监听到store中数据发生变化 回调方法
        '$store.state.nowLine': {
            handler(value: any) {
                (this as any).$router.go(0)
            },
            deep: true,
        }
    }
}