区块链前端: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费用的详细介绍。
希望今天的讲座对你有所帮助!如果你有任何问题,欢迎在评论区留言。我们下次再见! 😊