【高频考点精讲】前端区块链集成：从Web3.js到智能合约交互

最新推荐文章于 2025-05-30 15:39:29 发布

全栈老李技术面试

最新推荐文章于 2025-05-30 15:39:29 发布

阅读量616

点赞数 7

分类专栏：前端高频考点精讲文章标签：前端 javascript html css 面试题 react vue

本文链接：https://blog.csdn.net/liuyun_12138/article/details/148202465

版权

前端区块链集成：从Web3.js到智能合约交互

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊前端工程师怎么玩转区块链——不是让你去炒币啊（虽然我知道你们肯定都偷偷研究过K线图），而是正经的前端技术集成。我是全栈老李，一个在Web3领域踩过无数坑的老司机。

当jQuery遇见区块链

还记得十年前我们怎么操作DOM的吗？$("#myButton").click()这种写法现在看起来简直像出土文物。而今天要和区块链交互，Web3.js就是新时代的jQuery——只不过它操作的不是DOM，而是整个去中心化网络。

Web3.js本质上是个JavaScript库，让你能用熟悉的JS语法和以太坊区块链"说话"。想象一下，你平时调后端API是用axios发HTTP请求，现在换成用Web3.js发区块链交易，就这么简单...才怪！要是真这么简单我也不会专门写这篇文章了。

先搞个最小可行Demo

先看个最简单的例子，连接MetaMask钱包并读取账户余额：

// 初始化Web3实例 - 全栈老李提示：记得先npm install web3
import Web3 from 'web3';

async function connectWallet() {
   
  // 检查是否安装了MetaMask
  if (window.ethereum) {
   
    try {
   
      // 请求用户授权
      const accounts = await window.ethereum.request({
    
        method: 'eth_requestAccounts' 
      });
      
      // 创建Web3实例 - 全栈老李的实用技巧：用window.ethereum作为provider
      const web3 = new Web3(window.ethereum);
      
      // 获取余额（单位是wei）
      const balance = await web3.eth.getBalance(accounts[0]);
      
      // 转换单位 - 1 ether = 10^18 wei
      const etherBalance = web3.utils.fromWei(balance, 'ether');
      
      console.log(`当前账户余额: ${
     etherBalance} ETH`);
      return etherBalance;