dApp无法与MetaMask交互问题求助（附app.js代码）

• 确认MetaMask注入的API对象
  新版MetaMask已不再默认注入web3对象，转而使用window.ethereum。先在浏览器控制台执行console.log(window.ethereum)，如果返回undefined，要么是MetaMask未安装，要么是网站未被钱包授权访问。

• 严格在用户交互回调内发起权限请求
  MetaMask的安全规则禁止非用户主动触发的权限请求，你的设置按钮点击事件必须直接包裹授权逻辑，不能嵌套异步操作导致丢失交互上下文：

  document.querySelector('#settings-btn').addEventListener('click', async () => {
    if (!window.ethereum) {
      alert('请先安装MetaMask钱包');
      return;
    }
    try {
      // 请求账户授权
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('已授权账户:', accounts[0]);
      // 这里写你的设置逻辑，比如绑定账户到dApp
    } catch (err) {
      // 捕获用户拒绝授权、钱包锁定等错误
      console.error('交互失败:', err.message);
    }
  });
  

• 适配API版本差异
  如果你仍在使用旧版web3.js（v1.x之前），可能会和window.ethereum存在兼容性问题。建议要么直接使用window.ethereum的原生方法，要么升级web3.js到最新稳定版，初始化时传入钱包提供的provider：

  import Web3 from 'web3';
  
  // 初始化web3实例
  const initWeb3 = async () => {
    if (!window.ethereum) throw new Error('MetaMask未安装');
    const web3 = new Web3(window.ethereum);
    // 监听账户或链变更事件
    window.ethereum.on('accountsChanged', (accounts) => {
      // 更新dApp内的账户状态
    });
    return web3;
  };
  

• 检查已连接状态避免重复请求
  可以先查询当前是否已有授权账户，减少不必要的弹窗：

  const checkConnectedAccounts = async () => {
    const accounts = await window.ethereum.request({ method: 'eth_accounts' });
    return accounts.length > 0 ? accounts[0] : null;
  };
  
  // 在设置按钮点击时调用
  document.querySelector('#settings-btn').addEventListener('click', async () => {
    const connectedAccount = await checkConnectedAccounts();
    if (connectedAccount) {
      // 已连接，直接执行设置逻辑
      console.log('当前已连接账户:', connectedAccount);
    } else {
      // 未连接，请求授权
      await window.ethereum.request({ method: 'eth_requestAccounts' });
    }
  });
  

• 调试时重点查看错误信息
  所有异步交互逻辑都要加try-catch，MetaMask返回的错误会包含明确的原因（比如用户拒绝、链ID不匹配），根据错误信息能快速定位问题。

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