Vue 通过 ChromiumWebBrowser 调用 WinForm 函数 - 实用教程

要通过 ChromiumWebBrowser 调用 WinForm 函数，你需要遵循以下步骤：

1. 在 Vue 项目中安装并引入'electron' 模块，因为'ChromiumWebBrowser' 需要在 Electron 环境下运行。可以使用 npm 来安装'electron' 模块：

npm install electron --save

2. 在 Vue 项目的 main.js 文件中，引入'electron' 模块，并创建 Electron 窗口：

const { app, BrowserWindow } = require('electron')

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

  // 加载 Vue 应用的 index.html
  win.loadURL('http://localhost:8080')
}

app.whenReady().then(() => {
  createWindow()
})

3. 在 Vue 项目中，将需要调用 WinForm 函数的按钮绑定一个方法，该方法通过'ipcRenderer' 向 Electron 主进程发送消息：

// 在 Vue 组件中
methods: {
  callWinFormFunction() {
    const { ipcRenderer } = require('electron')
    ipcRenderer.send('call-win-form-function')
  }
}

4. 在 Electron 主进程中，监听来自 Vue 应用的消息，并在收到消息时调用 WinForm 函数：

const { app, BrowserWindow, ipcMain } = require('electron')

// 创建浏览器窗口...

ipcMain.on('call-win-form-function', () => {
  // 调用 WinForm 函数
  winFormFunction()
})

这样，当你在 Vue 应用中点击调用 WinForm 函数的按钮时，会向 Electron 主进程发送消息，主进程收到消息后会调用 WinForm 函数。