Step 7 07. 前端集成：Ethers.js 与钱包交互

<!-- Title: 07. 前端集成：Ethers.js 与钱包交互 --> <!-- Series: Web3 DApp 开发实战 (ID: 13) --> <!-- Author: admin --> # 前端集成：Ethers.js 与钱包交互 ## 1. 连接钱包 DApp 的第一步：连接 MetaMask。 ```javascript const provider = new ethers.providers.Web3Provider(window.ethereum); await provider.send("eth_requestAccounts", []); const signer = provider.getSigner(); ``` 这行代码会弹出一个窗口，请求用户授权。 ## 2. 调用合约 前端如何调用链上的函数？ 需要两样东西： 1. **Address**: 合约地址。 2. **ABI (Application Binary Interface)**: 合约的“说明书”（JSON格式），告诉前端有哪些函数、参数是什么。 ```javascript const contract = new ethers.Contract(address, abi, signer); // 读取数据 (免费) const balance = await contract.balanceOf(userAddress); // 写入数据 (需要付 Gas，弹窗签名) const tx = await contract.transfer(toAddress, amount); await tx.wait(); // 等待区块确认 ``` ## 3. 监听事件 区块链是异步的。 你可以监听合约发出的事件（如 `Transfer`），实时更新前端 UI。 ```javascript contract.on("Transfer", (from, to, amount, event) => { console.log(`${from} sent ${amount} to ${to}`); }); ``` ## 4. 结语 Web3 的前端开发，本质上就是处理**状态同步**和**异步交互**。 因为区块链真的很慢，所以优秀的 Loading 状态和错误处理（如用户拒绝签名）至关重要。