使用Electron打包WeChat

1.创建vue项目 使用vue ui
2.使用vue add electron-builder 安装electron
3.安装npm install wechaty
4.在electron中的main.js中导入wechaty

import {
  WechatyBuilder
} from 'wechaty'
import path from 'path';
import { FileBox } from 'file-box'
let bot =null;
function initChat() {

  bot = WechatyBuilder.build()//{ name: loginKey }
  // bot = WechatyBuilder.build()
  bot.on('scan', onScan)
  bot.on('login', onLogin)
  bot.on('logout', onLogout)
  bot.on('message', onMessage)
  bot.on('error', onError)
  bot.on('friendship', onFriendship)
  bot.start()
    .catch(console.error)
}

5.实现main.js 通讯到渲染进程
创建一个用于通讯的elec_udp.js

//electron udp socket.
window.electron = require('electron');
const ipcRenderer = window.electron.ipcRenderer; 
const contextBridge = window.electron.contextBridge; 
//渲染进程发送消息给主进程
ipcRenderer.send('receiving-broadcast');
//主进程发送消息给渲染进程
ipcRenderer.on('broadcast-reply', (event, message) => {
    console.log('msg:', message);
    let myEvent = new CustomEvent('udpreceivemsg', message);
    document.dispatchEvent(myEvent);


})
/*
* 搭建主进程和渲染进程的桥梁
*/ 
const sendMainInfo = async (val) => {
    ipcRenderer.invoke('render-info',val);
  }
// electronAPI 代表向渲染进程传递的对象命名，sendMainInfo表示向渲染进程传递一个回调函数
contextBridge.exposeInMainWorld('electronAPI',{
    platform: process.platform,
    sendMainInfo,
  });

在electron中的 main.js中进行挂载

 const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(process.cwd(), '/lib/elec_udp.js'),  //挂载electron-udp模块
    }
  })

在vue.config.js中把elec_udp.js所在的目录配置进入打包环境中，不然打包成exe时会找不到文件

module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // 额外文件配置
        extraFiles: ["./lib"],
        asar:true
      },
    },
  },
})

在main.js中监听注册，拿到通讯实列eventS

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()

  ipcMain.on("receiving-broadcast", (event, arg) => {
    // console.log("主进程接收到渲染进程的广播消息", arg)
    eventS = event;
    initChat();
  });

})

实现主进程与渲染进程的通讯

 /**
   * 二维码回调
   * @param {} qrcode 
   * @param {*} status 
   */
  function onScan(qrcode, status) {
    if (eventS) {
      eventS.sender.send("broadcast-reply", {
        type: 0,
        notes: "扫码登录",
        content: qrcode,
      });
    }
  }
  /**
   * 登录成功
   * @param {d} user 
   */
  async function onLogin(user) {
    if (eventS) {
      const name = await user.name()
      eventS.sender.send("broadcast-reply", {
        type: 1,
        notes: "登录成功",
        content: name,
      });
    }
  }
  
  async function onMessage(msg) {
    if (eventS) {
      if(msg.type() === Message.Type.Text){
        eventS.sender.send("broadcast-reply", {
          type: 2,
          notes: "登录成功",
          content: msg.text(),
        });
      }
    }
  }
  ....  把自己想要发送的内容整理好，丢给eventS发送就好了

4.渲染进程接收及发送

//接收
  mounted() {
	document.addEventListener('udpreceivemsg', this.broadcastReplys, false);
	}
  methods: {
  //message 接受消息
   broadcastReplys(message) {
   }
}
//发送  message自定义消息
window.electronAPI.sendMainInfo(message)