如何在whatsapp-web.js机器人中实现带按钮的消息回复？

原代码存在的问题 #

1. 重复绑定message事件导致对话ID不可靠：你绑定了两次message事件，全局变量chatId会被所有 incoming 消息覆盖，触发!command时，chatId可能不是当前发送者的ID，应该直接使用msg.from获取当前对话ID。
2. 第三方库使用不当：@deathabyss/wwebjs-sender的send方法大概率是异步函数，但你没有使用await，导致错误无法被try/catch捕获；同时该库可能未适配当前版本的whatsapp-web.js，导致无输出无报错。

方案一：使用whatsapp-web.js原生Buttons组件（推荐） #

whatsapp-web.js本身内置了Buttons类，无需额外依赖，兼容性更好，实现步骤如下：

完整修复代码 #

const { Client, LocalAuth, Buttons } = require('whatsapp-web.js');
const qrcode = require('qrcode-terminal');
const axios = require('axios');
const images = require('./data');
const fs = require('fs');

const quotes = {
    method: 'GET',
    url: 'https://type.fit/api/quotes'
};

const client = new Client({
    authStrategy: new LocalAuth(),
});

client.on('qr', (qr) => {
    qrcode.generate(qr, { small: true });
});

client.on('authenticated', () => {
    console.log('Authenticated');
});

// 统一处理消息事件，避免重复绑定
client.on('message', async (msg) => {
    console.log(`收到消息：${msg.body}，来自：${msg.from}`);
    
    if (msg.body === "!command") {
        // 直接使用当前消息的对话ID
        const from = msg.from;
        
        // 构造按钮消息内容
        const buttonMessage = new Buttons(
            "✅ | 流程已完成！\n\n请选择操作：", // 消息正文
            [
                { id: "confirm", body: "✔ 确认" },
                { id: "cancel", body: "❌ 取消" }
            ], // 按钮数组
            "操作选择", // 消息标题（可选）
            "WwebjsSender" // 页脚（可选）
        );
        
        try {
            // 发送按钮消息
            await client.sendMessage(from, buttonMessage);
            console.log(`已向${from}发送按钮消息`);
        } catch (error) {
            console.error('发送按钮消息失败：', error);
        }
    }
});

client.on('ready', () => {
    console.log("客户端已就绪");
});

client.initialize();

关键说明 #

• 只绑定一次message事件，直接使用msg.from获取当前对话ID，避免全局变量覆盖问题。
• 使用原生Buttons类构造消息，参数依次为：消息正文、按钮数组、标题（可选）、页脚（可选）。
• 按钮对象需包含id（自定义标识，用于后续监听按钮点击）和body（按钮显示文本）。
• 使用await调用sendMessage，确保异步操作完成并捕获错误。

方案二：修复第三方库@deathabyss/wwebjs-sender的使用 #

如果你坚持使用该第三方库，需修改以下几点：

修复后的代码片段 #

// 移除重复的message事件绑定，保留一个即可
client.on('message', async (msg) => {
    console.log(`收到消息：${msg.body}，来自：${msg.from}`);
    
    if (msg.body === "!command") {
        const from = msg.from;
        console.log(from);
        
        let embed = new WwebjsSender.MessageEmbed()
            .sizeEmbed(28)
            .setTitle("✅ | Successful process!")
            .setDescription("The process has been successful!")
            .addField("✔", "To confirm")
            .addField("❌", "To cancel")
            .addFields({
                name: "Now you have 2 buttons",
                value: "✔ or ❌",
            })
            .setFooter('WwebjsSender')
            .setTimestamp();

        let button1 = new WwebjsSender.MessageButton()
            .setCustomId("confirm")
            .setLabel("✔")

        let button2 = new WwebjsSender.MessageButton()
            .setCustomId("cancel")
            .setLabel("❌");

        try {
            // 关键：添加await，因为send是异步函数
            await WwebjsSender.send({
                client: client,
                number: from,
                embed: embed,
                button: [button1, button2]
            });
            console.log("按钮消息发送成功");
        } catch (error) {
            console.error('发送失败：', error);
        }
    }
});

关键修复点 #

1. 移除重复的message事件绑定，确保只有一个事件处理器处理消息。
2. 使用await调用WwebjsSender.send，因为该方法是异步的，否则错误无法被捕获，且发送操作可能未完成。
3. 直接使用msg.from，替代不可靠的全局chatId变量。

内容的提问来源于stack exchange，提问作者Muhammed Rashid