使用 Uni-App 开发 ETH/BSC DApp 实现代币转账功能

·

在跨平台应用开发中，Uni-App 结合 Web3.js 能够高效构建支持以太坊（ETH）和币安智能链（BSC）的去中心化应用（DApp）。本文重点介绍如何实现代币转账功能，包括环境配置、合约交互及核心代码实现。

环境准备与 Web3 配置

首先确保已安装 Node.js 和 npm 环境。通过以下命令安装 Web3.js 库：

npm install web3

Web3.js 是与区块链网络交互的核心工具库，支持主流以太坊虚拟机（EVM）兼容链（如 ETH 和 BSC）。

钱包连接与地址获取

DApp 需先连接用户钱包（如 MetaMask）以获取账户地址。以下示例演示自动检测钱包并获取地址：

if (window.ethereum) {
  window.ethereum.enable().then((res) => {
    this.walletAddress = res[0]; // 获取用户钱包地址
  });
} else {
  alert("请安装 MetaMask 钱包");
}

此代码段需在页面加载时执行，确保用户已授权 DApp 访问账户。

代币转账实现步骤

1. 初始化 Web3 与合约实例

使用 Web3 提供商和合约 ABI 初始化合约对象：

const web3 = new Web3(window.web3.currentProvider);
const contractAddr = "0x510B7E4966758615F5AA4fc497Ebb85684519173"; // 代币合约地址
const contract = new web3.eth.Contract(contractAbi, contractAddr);

合约 ABI（应用程序二进制接口）定义了合约方法与数据结构，通用于大部分 ERC-20 标准代币。

2. 查询代币余额与精度

转账前需获取用户代币余额和代币精度：

contract.methods.balanceOf(fromAddress).call().then((balance) => {
  console.log("当前代币余额", balance);
});

const decimals = await contract.methods.decimals().call();

精度值用于计算代币数量，确保转账金额正确转换。

3. 执行代币转账

调用合约的 transfer 方法发送代币：

const amountInWei = web3.utils.toWei(count.toString(), 'ether');
contract.methods.transfer(toAddress, amountInWei).send({
  from: fromAddress,
  gas: 81000,
  gasPrice: await web3.eth.getGasPrice()
}).then((result) => {
  console.log("转账成功，交易哈希:", result.transactionHash);
}).catch((err) => {
  console.error("转账失败", err);
});

此处需注意：

原生币转账（ETH/BNB）

原生币转账无需合约交互，直接发送交易即可：

const amountInWei = web3.utils.toWei(amount.toString(), 'ether');
web3.eth.sendTransaction({
  from: this.walletAddress,
  to: toAddress,
  value: amountInWei,
  gas: 21000,
  gasPrice: 5000000000
}).then((result) => {
  console.log("转账哈希:", result);
});

原生币转账的 Gas 限制通常为 21000，而 Gas 价格需根据网络实时状况调整。

常见问题

如何选择 ETH 或 BSC 网络？

用户可通过 MetaMask 切换网络。DApp 应自动适配当前网络提供商，无需修改代码逻辑。BSC 网络通常具有更低手续费和更快确认速度。

交易失败可能的原因有哪些？

如何查询交易状态？

通过交易哈希可查询区块链浏览器（如 Etherscan 或 BscScan）获取交易确认状态和详情。👉 查看实时交易工具

是否支持其他钱包？

除 MetaMask 外，可兼容任何支持 Web3 注入的钱包（如 Trust Wallet）。核心是检测 window.ethereum 或 window.web3 对象。

如何估算合理 Gas 价格？

可通过网络提供的 Gas 价格API或使用 web3.eth.getGasPrice() 获取实时建议价格。BSC 网络 Gas 价格通常低于 ETH 网络。

代币转账与原生币转账有何区别？

代币转账通过调用智能合约的 transfer 方法实现，而原生币转账直接发送价值到地址。前者需要合约交互且消耗更多 Gas。

总结

Uni-App 结合 Web3.js 为多链 DApp 开发提供了高效解决方案。重点在于正确处理钱包连接、合约初始化和交易发送。开发者应关注网络状态、Gas 优化和用户体验，确保转账功能稳定可靠。对于更复杂的应用场景，👉 探索更多高级策略 可进一步提升应用性能与功能丰富度。