简介

随着区块链技术的不断发展，越来越多的开发者开始探索Web3.js与MetaMask的结合使用。MetaMask是一个广泛使用的以太坊浏览器扩展，它允许用户与去中心化应用（DApp）进行交互。Web3.js是一个用于与以太坊区块链进行交互的JavaScript库，能够处理账户、合约和交易等操作。本文将深入探讨如何使用Web3.js调起MetaMask，完成一系列区块链操作，并解答常见问题。

Web3.js与MetaMask的基本使用

在开始之前，首先确保你的浏览器中安装了MetaMask，并创建了一个以太坊钱包。接下来，你需要在你的项目中引入Web3.js库。可以使用npm安装或者直接在HTML中引用CDN链接。

例如，通过npm安装Web3.js：npm install web3

引用CDN链接：

接下来，创建一个Web3实例，并确保MetaMask已连接到你的应用程序。你可以使用以下代码片段初始化Web3：

if (typeof window.ethereum !== 'undefined') {
    const web3 = new Web3(window.ethereum);
    try {
        // 请求用户账户访问
        await window.ethereum.request({ method: 'eth_requestAccounts' });
    } catch (error) {
        console.error("用户拒绝访问账户");
    }
} else {
    console.error("请安装MetaMask");
}

上面的代码首先检查用户的浏览器中是否安装了MetaMask，如果安装了，则创建一个Web3实例并请求用户授权。如果用户拒绝访问，会捕捉到错误信息。

创建和发送交易

完成账号的连接后，可以开始创建和发送交易。以下是如何发送以太币交易的示例：

const accounts = await web3.eth.getAccounts();
const sender = accounts[0]; // 获取当前连接的账户
const recipient = '0xRecipientAddress'; // 目标账户地址
const amount = web3.utils.toWei('0.1', 'ether'); // 转账金额（0.1 ETH）

web3.eth.sendTransaction({
    from: sender,
    to: recipient,
    value: amount
})
.then((receipt) => {
    console.log("交易成功", receipt);
})
.catch((error) => {
    console.error("交易失败", error);
});

以上代码片段中，我们获取当前连接账户的地址，设置收款人地址和转账金额，然后使用sendTransaction方法发送交易。返回的receipt会包含交易的详细信息。

与智能合约交互

除了发送以太，Web3.js还提供了与智能合约进行交互的能力。首先，你需要合约的ABI（应用二进制接口）和地址。以下是如何调用智能合约方法的示例：

const contractABI = [/* 合约ABI */];
const contractAddress = '0xYourContractAddress';

const contract = new web3.eth.Contract(contractABI, contractAddress);

// 调用合约的方法
contract.methods.yourMethod(param1, param2).send({ from: sender })
.then((receipt) => {
    console.log("合约调用成功", receipt);
})
.catch((error) => {
    console.error("合约调用失败", error);
});

这里，我们首先创建合约实例，然后使用contract.methods.yourMethod调用合约的某个方法，并通过send发送交易，必须指定发送者地址。

常见问题解答

1. 如何处理MetaMask的网络切换？

在使用MetaMask时，用户可能需要将其网络从主网切换到测试网或使用其他以太坊兼容的区块链。为了在代码中处理网络切换，可以使用window.ethereum.on('chainChanged', ...)来监听网络变化，并更新你的应用状态。

window.ethereum.on('chainChanged', (chainId) => {
    console.log('网络已切换', chainId);
    // 在这里更新应用状态，例如重新加载数据
});

通过监听这个事件，当用户在MetaMask中选择不同的网络时，你的应用就能够相应地更新并调整功能。

2. 如何确保用户已经安装并连接了MetaMask？

可以在页面加载时检查MetaMask是否存在，并提示用户安装。如果用户未连接，可以请求用户连接。以下是一个检查和请求连接的示例：

if (typeof window.ethereum !== 'undefined') {
    const web3 = new Web3(window.ethereum);
    window.ethereum.request({ method: 'eth_requestAccounts' })
    .then(() => {
        console.log("用户已连接MetaMask");
    })
    .catch((error) => {
        console.error("用户未连接MetaMask", error);
    });
} else {
    alert("请安装MetaMask扩展");
}

通过这种方式，你可以确保用户在使用你的DApp之前已经成功连接MetaMask。

3. 如何查询用户的以太坊余额？

你可以通过Web3.js提供的getBalance方法来查询指定账户的以太坊余额。以下是获取余额的示例：

const balance = await web3.eth.getBalance(sender);
const balanceInEther = web3.utils.fromWei(balance, 'ether');
console.log(`账户余额: ${balanceInEther} ETH`);

通过调用该方法，返回的余额是以wei为单位的，因此需要使用fromWei方法转换为以太坊单位以便更易于阅读。

4. 如何处理交易的确认？

发送交易后，用户可能需要知道交易的确认情况。MetaMask会显示交易正在确认的状态，而你可以使用getTransactionReceipt方法來轮询交易状态，或者监听“nonce”的变化来判断交易是否确认。

const receipt = await web3.eth.getTransactionReceipt(transactionHash);
if (receipt