如何使用web3.js与MetaMask进行区块链开发？

By 小狐狸钱包官方网站
2026-04-10 21:42:08

什么是Web3.js和MetaMask？

最近聊到区块链开发，小伙伴们总是提到Web3.js和MetaMask，听上去很炫酷，实际上它们特别有用。我之前也跟着瞎研究了一阵，从入门到实战，发现这玩意儿能让开发者更方便地和以太坊区块链交互。Metamask，咱们就把它想象成一个“桥”，你通过它就可以轻松连接到区块链世界。

Web3.js是一个支持以太坊区块链的JavaScript库，它可以让开发者用JavaScript与区块链进行交互。而MetaMask是一个浏览器扩展，它不仅能储存你的以太坊账户、管理你的私钥，还可以在用户和区块链应用间架起一座桥。所以，结合二者后，你就能轻松地和去中心化应用（DApp）互动，懂吧？

如何安装MetaMask？

我还记得第一次装MetaMask时的心情，感觉自己像在玩游戏一样。你只需要去Chrome、Firefox等浏览器的扩展商店，搜索MetaMask，然后按照提示一步步来。下完后，它会要求你创建一个新钱包或者导入已有的钱包。嘿，记得要把助记词记下来哦，丢了可就再也找不回来了。

安装完后，你会看到一个小狐狸图标在浏览器右上角，点击一下，就能访问你的钱包了。之后你可以通过MetaMask向以太坊转账、发币、甚至开发自己的DApp。只要是跟以太坊有关的事，MetaMask都能帮你搞定。

如何使用Web3.js？

接下来就要开始正经的玩了，首先你得在你的项目里安装Web3.js。我记得我当时是在命令行里输入了一条命令：npm install web3。这一安装，基本上你就能开始和以太坊进行交互了。

它的用法其实也没那么复杂，先得引入Web3.js：

  
const Web3 = require('web3');  
const web3 = new Web3(window.ethereum);

注意window.ethereum这个东西，就是MetaMask提供给你的API，经过它你就能与区块链互动了。记得让用户先授权一下，不然我们就没法执行交易什么的。

连接MetaMask和以太坊网络

接下来就是“连接”的部分了。你得提用户的权限，以下是我用的基本代码：

  
async function connect() {  
  if (window.ethereum) {  
    try {  
      await window.ethereum.request({ method: 'eth_requestAccounts' });  
      console.log('成功连接到MetaMask');  
    } catch (error) {  
      console.error('用户拒绝了连接请求');  
    }  
  } else {  
    console.error('请安装MetaMask扩展');  
  }  
}

当你调用connect函数时，它会弹出一个窗口，询问用户是否授权。答应你的用户，就可以开始操作了！这时你可以获取用户的账户地址，进行交易等各种操作。

发送以太币的基本逻辑

玩的差不多了，我们开始实际搞点东西。发送以太币其实也没啥门槛，像我第一次尝试时，用的代码如下：

  
async function sendEther() {  
  const accounts = await web3.eth.getAccounts();  
  const txHash = await web3.eth.sendTransaction({  
    from: accounts[0],  
    to: '目标地址',  
    value: web3.utils.toWei('0.1', 'ether')  
  });  
  console.log('交易Hash:', txHash);  
}

这是一个简易的发送以太币的函数，你自己可以替换目标地址。执行后，刚提交完，你的MetaMask会弹出一个确认窗口，等确认完成，你的以太币就发出去了。

处理用户账户变化

MetaMask用户最恨的事之一，就是你在开发时，没处理好账户变化的情况。用户随时可以切换账户，你要做到及时响应！可以利用MetaMask提供的事件监听功能：

  
window.ethereum.on('accountsChanged', (accounts) => {  
  console.log('账户变更为:', accounts[0]);  
});

这样一来，用户一旦切换账户，你就能得到反馈，避免一些不必要的麻烦，体验都好很多。

通过Web3.js读取链上数据

读数据也是非常重要的一环，像 Token 的余额，你肯定得知道。可以用如下代码获取余额：

  
async function getBalance() {  
  const accounts = await web3.eth.getAccounts();  
  const balance = await web3.eth.getBalance(accounts[0]);  
  console.log('账户余额:', web3.utils.fromWei(balance, 'ether'));  
}

这样你就能在本地获取用户余额，随时显示在界面上，增强交互。

都需要注意些什么？

在玩得开心的时候，其实也要小心一些坑，比如说私钥千万不要分享！就算是你的亲戚朋友，谁都不可以。很多人受骗都是因为轻信，“我有个朋友要用你的钱包，你给我点儿钱”，这种事千万要警惕。还有就是国内的VPN问题，别让这些影响了你体验。建议用点稳定的工具来翻墙。

小技巧总结

最后给你们一些小技巧，增强使用MetaMask和Web3.js的体验。比如，你可以自己写一个简单的前端页面，实时更新用户的余额，也可以使用React、Vue等框架，结合Web3.js，构建更复杂的DApp。慢慢玩总能找到一些好玩的事情，而MetaMask的文档和社区非常活跃，遇到问题也能很快得到解决。

我的体会

说实话，刚开始接触这些东西的时候，脑袋都有点懵。但随着一遍遍的敲代码，逐渐明白了这些工具的魅力。都会感叹：“哇，原来区块链能这么酷！”用它们构建自己的DApp，感觉就像在搭自己的小世界，尤其是看到自己的项目上线，亲朋好友点赞时，那种成就感，是别的东西无法替代的。

所以，别拘谨！动手试试吧，区块链的世界等着你去探索！希望我的一些分享能帮助到你，祝你玩得开心！

教程