whatsapp-web.js在electron中踩坑

最新推荐文章于 2024-12-27 14:01:19 发布

熄灭的夏萤

最新推荐文章于 2024-12-27 14:01:19 发布

阅读量1.3k

点赞数

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_43910826/article/details/133844126

版权

本文介绍了如何使用Electron创建一个项目，通过whatsapp-web.js库实现在点击按钮后生成二维码，让用户通过WhatsApp扫码登录，同时实现消息发送等功能，包括处理登录事件和通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

期望：创建一个electron项目，实现点击获取二维码后whatsapp扫码登录，然后能够控制消息发送等数据

创建electron项目：下载使用eletron-quick-start模板

项目结构如下

导入依赖：可以根据whatsapp-web.js getting started 中示例快速引用，也可以单独写一个whatsappEvents.js文件

// whatsappEvents.js
const { Client } = require('whatsapp-web.js');
const EventEmitter = require('events');

class WhatsAppEvents extends EventEmitter {
  constructor() {
    super();

    this.client = new Client();
    // 登录的二维码
    // 监听QR Code事件以便登录 
    this.client.on('qr', (qrCode) => {
      // 触发自定义事件 'qr-code-received'，并传递QR Code数据
      this.emit('qr-code-received', qrCode);
    });

    // 监听登录事件
    this.client.on('authenticated', (session) => {
      console.log('authenticated!!!!!!!!!!!!!!');

      // todo 触发自定义事件 'authenticated'，并传递登录会话数据
      this.emit('authenticated', session);
    });

    this.client.on('disconnected', (reason) => {
      console.log('disconnected!!!!!!!!!!!!!!');
      // 处理断开连接事件
      // todo 在渲染进程中发送重新连接通知
      this.emit('whatsapp-login-disconnected', reason);
    });

    // 连接WhatsApp Web
    this.client.initialize();
  }
}

module.exports = WhatsAppEvents;

首先 npm i whatsapp-web.js （注意，此时安装版本如果是1.22.1，会有踩坑一）

npm i qrcode (链接生成二维码的工具)

在html中添加按钮以及绘制二维码的canvas

//index.html
<canvas id="qrcode" ></canvas>
<button id="start-qr">start-qr</button>
<script src="./renderer.js"></script>

添加按钮事件，通过ipcRenderer和ipcmain通信

// renderer.js
const { ipcRenderer } = require('electron');
const QRCode = require('qrcode');
const canvas = document.getElementById('qrcode');

window.onload = () => {
  const btn = document.getElementById('start-qr');
  btn.onclick = () => {
    // 向主进程请求二维码链接
    ipcRenderer.send('qr-code-start', '请求二维码');
  }

  // 监听从主进程发送来的QR Code
  ipcRenderer.on('qr-code-received', (ev, qrCode) => {
    // 将QR Code显示在页面上

    // QRCode将文本或链接转为二维码
    QRCode.toCanvas(canvas, qrCode, function (error) {
      if (error) console.error(error);
      console.log('QR Code generated');
    });
  });

}

在main.js中引入

// main.js
const WhatsAppEvents = require('./whatsappEvents');
//主进程接收消息操作
ipcMain.on('qr-code-start', (ev, data) => {
  console.log(data)
  // 创建WhatsApp事件处理实例
  const whatsappEvents = new WhatsAppEvents();

  // 监听自定义事件 'qr-code-received'，将QR Code发送到渲染进程
  whatsappEvents.on('qr-code-received', function (qrCode) {

    // 通过ipcMain发送QR Code到渲染进程
    ev.sender.send('qr-code-received', qrCode);
  });

  whatsappEvents.on('authenticated', function (session) {
    //...
    // 处理登录成功后的操作,页面跳转等
  });

})

踩坑一、扫码登录后没有登录事件

https://github.com/pedroslopez/whatsapp-web.js/issues/2473

总结就是whatsapp-web.js版本为1.22.1时可以修改依赖包中代码

node_modules/whatsapp-web.js/src/client.js

第175行的INTRO_IMG_SELECTOR 字段

const INTRO_IMG_SELECTOR = 'div[role=\'textbox\']'; //'[data-icon=\'chat\']';