发布于 由admin

区块链前端：Vue 3 + Web3.js的DApp钱包集成方案

区块链前端：Vue 3 + Web3.js的DApp钱包集成方案

引言

大家好，欢迎来到今天的讲座！今天我们要聊的是如何在Vue 3项目中集成Web3.js来创建一个DApp（去中心化应用）钱包。如果你对区块链、智能合约和前端开发感兴趣，那么这篇文章绝对适合你！我们会用轻松诙谐的语言，带你一步步完成这个集成过程。准备好了吗？让我们开始吧！

什么是DApp？

首先，我们来简单了解一下什么是DApp。DApp是“去中心化应用”的缩写，它是一种基于区块链技术的应用程序。与传统的应用程序不同，DApp的数据存储在区块链上，而不是集中式的服务器中。这意味着DApp具有更高的透明度、安全性和抗审查性。

为了与区块链交互，我们需要使用一种叫做“钱包”的工具。钱包可以帮助我们管理私钥、发送交易和与智能合约进行交互。常见的钱包有MetaMask、WalletConnect等。今天我们要做的就是将这些钱包集成到我们的Vue 3项目中，让用户可以方便地与区块链进行交互。

环境准备

在开始之前，我们需要确保已经安装了以下工具：

  • Node.js：用于运行JavaScript代码。
  • npm 或 yarn：用于管理依赖包。
  • Vue CLI：用于创建和管理Vue项目。
  • MetaMask：一个流行的以太坊钱包扩展，用户可以通过它与DApp进行交互。

创建Vue 3项目

如果你还没有创建Vue 3项目，可以使用Vue CLI快速生成一个新项目：

vue create my-dapp

选择Vue 3作为默认版本，并安装必要的依赖。完成后，进入项目目录：

cd my-dapp

安装Web3.js

Web3.js是一个用于与以太坊区块链交互的JavaScript库。我们可以使用npm或yarn来安装它：

npm install web3

或者

yarn add web3

集成MetaMask

MetaMask是一个非常流行的以太坊钱包，它允许用户通过浏览器扩展与DApp进行交互。为了集成MetaMask，我们需要检测用户的浏览器是否已经安装了MetaMask，并连接到以太坊网络。

检测MetaMask

在Vue 3中，我们可以在mounted生命周期钩子中检测MetaMask是否存在。如果存在，我们可以获取当前连接的账户信息。

<template>
  <div>
    <h1>我的DApp</h1>
    <p v-if="account">当前账户: {{ account }}</p>
    <button @click="connectWallet" v-else>连接钱包</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Web3 from 'web3';

export default {
  setup() {
    const account = ref(null);
    const web3 = new Web3(window.ethereum);

    const connectWallet = async () => {
      try {
        // 请求用户授权连接钱包
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        const accounts = await web3.eth.getAccounts();
        account.value = accounts[0];
        console.log('Connected to MetaMask:', account.value);
      } catch (error) {
        console.error('用户拒绝连接钱包', error);
      }
    };

    onMounted(() => {
      if (window.ethereum) {
        // 如果MetaMask已安装，自动连接
        connectWallet();
      } else {
        console.warn('请安装MetaMask');
      }
    });

    return {
      account,
      connectWallet,
    };
  },
};
</script>

监听账户变化

用户可能会在页面加载后切换账户或断开钱包连接。为了处理这种情况，我们可以监听accountsChanged事件，并在账户发生变化时更新状态。

onMounted(() => {
  if (window.ethereum) {
    // 自动连接钱包
    connectWallet();

    // 监听账户变化
    window.ethereum.on('accountsChanged', (accounts) => {
      if (accounts.length > 0) {
        account.value = accounts[0];
        console.log('账户已更改:', account.value);
      } else {
        account.value = null;
        console.log('钱包已断开');
      }
    });

    // 监听网络变化
    window.ethereum.on('chainChanged', (chainId) => {
      console.log('网络已更改:', chainId);
    });
  } else {
    console.warn('请安装MetaMask');
  }
});

与智能合约交互

现在我们已经成功连接了MetaMask，接下来可以与智能合约进行交互了。假设我们有一个简单的ERC-20代币合约，合约地址为0x...，ABI（应用程序二进制接口）如下：

[
  {
    "constant": true,
    "inputs": [],
    "name": "name",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "symbol",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [
      {
        "name": "_owner",
        "type": "address"
      }
    ],
    "name": "balanceOf",
    "outputs": [
      {
        "name": "balance",
        "type": "uint256"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  }
]

我们可以使用Web3.js与这个合约进行交互。首先，定义合约实例：

const contractAddress = '0x...'; // 合约地址
const contractABI = [/* ABI内容 */]; // 合约ABI

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

然后，我们可以调用合约中的方法。例如，查询用户的代币余额：

const getBalance = async () => {
  if (account.value) {
    try {
      const balance = await contract.methods.balanceOf(account.value).call();
      console.log('用户余额:', web3.utils.fromWei(balance, 'ether'), 'ETH');
    } catch (error) {
      console.error('获取余额失败', error);
    }
  } else {
    console.warn('请先连接钱包');
  }
};

发送交易

除了查询数据，我们还可以通过DApp发送交易。例如，用户可以将代币转账给其他地址。发送交易需要用户签名并广播到区块链网络。

const sendTokens = async (toAddress, amount) => {
  if (account.value) {
    try {
      const tx = await contract.methods.transfer(toAddress, web3.utils.toWei(amount, 'ether')).send({
        from: account.value,
      });
      console.log('交易成功:', tx.transactionHash);
    } catch (error) {
      console.error('交易失败', error);
    }
  } else {
    console.warn('请先连接钱包');
  }
};

处理Gas费用

在以太坊网络中，每笔交易都需要支付Gas费用。Gas费用是用来支付矿工打包交易的报酬。我们可以使用Web3.js来估算Gas费用，并提示用户确认交易。

const estimateGas = async (toAddress, amount) => {
  if (account.value) {
    try {
      const gas = await contract.methods.transfer(toAddress, web3.utils.toWei(amount, 'ether')).estimateGas({
        from: account.value,
      });
      console.log('预计Gas费用:', gas);
    } catch (error) {
      console.error('估算Gas失败', error);
    }
  } else {
    console.warn('请先连接钱包');
  }
};

总结

通过今天的讲座，我们学习了如何在Vue 3项目中集成Web3.js和MetaMask，创建一个简单的DApp钱包。我们不仅学会了如何连接钱包、监听账户变化，还掌握了如何与智能合约进行交互和发送交易。

当然，这只是DApp开发的冰山一角。如果你想进一步深入学习，建议阅读以下文档：

  • Web3.js官方文档：详细介绍了Web3.js的各种功能和API。
  • Ethereum官方文档：提供了关于以太坊网络、智能合约和Gas费用的详细介绍。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言。我们下次再见！ 😊

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注