Developing decentralized applications (DApps) on blockchain networks like Ethereum (ETH) and Binance Smart Chain (BSB) has become increasingly accessible thanks to modern cross-platform frameworks. One such powerful tool is uni-app, a Vue.js-based framework that enables developers to build applications for multiple platforms—including H5, iOS, Android, and various小程序 (mini-programs)—using a single codebase. This guide walks you through integrating Web3 functionality into a uni-app project to enable seamless ETH, BNB, and token transfers on both Ethereum and BSC networks.
Whether you're building a wallet interface, a DeFi dashboard, or a gaming DApp, understanding how to interact with blockchain via smart contracts is essential. Here’s how to implement secure and efficient cryptocurrency transactions in your uni-app DApp.
Setting Up Web3 in Uni-App
To interact with the Ethereum or Binance Smart Chain network, you need the web3.js library, which provides a JavaScript interface for blockchain operations.
Install Web3.js
Begin by installing the library via npm:
npm install web3Once installed, import it into your page or component:
import Web3 from 'web3';This allows your app to communicate with the user's wallet—typically MetaMask or a Web3-enabled browser—and sign transactions securely.
Detecting User Wallets
Before initiating any transaction, detect whether the user has a compatible wallet installed.
onLoad() {
if (window.ethereum) {
window.ethereum.request({ method: 'eth_requestAccounts' }).then((accounts) => {
this.walletAddress = accounts[0];
console.log('Connected wallet:', this.walletAddress);
}).catch((err) => {
alert('User denied account access');
});
} else {
alert('Please install a Web3 wallet like MetaMask');
}
}Note: Always usewindow.ethereum.request()instead of deprecated methods likeenable()for better security and compatibility.
Performing Token Transfers (ERC-20/BEP-20)
Transferring custom tokens—such as USDT, USDC, or any BEP-20 token—requires interaction with the token's smart contract using its ABI and contract address.
Sample Contract ABI
The following ABI supports standard ERC-20/BEP-20 functions like transfer, balanceOf, and decimals:
const contractAbi = [
{ "constant": true, "inputs": [], "name": "name", "outputs": [{ "name": "", "type": "string" }], "type": "function" },
{ "constant": false, "inputs": [{ "name": "dst", "type": "address" }, { "name": "wad", "type": "uint256" }], "name": "transfer", "outputs": [{ "name": "", "type": "bool" }], "type": "function" },
{ "constant": true, "inputs": [{ "name": "", "type": "address" }], "name": "balanceOf", "outputs": [{ "name": "", "type": "uint256" }], "type": "function" },
{ "constant": true, "inputs": [], "name": "decimals", "outputs": [{ "name": "", "type": "uint8" }], "type": "function" },
{ "constant": true, "inputs": [], "name": "symbol", "outputs": [{ "name": "", "type": "string" }], "type": "function" }
// Additional methods omitted for brevity
];Transfer Implementation
Here’s how to send tokens from one address to another:
async tokenTransfer(count) {
const contractAddr = '0x510B7E4966758615F5AA4fc497Ebb85684519173'; // Example: BSC-USDT
const fromAddress = this.walletAddress;
const toAddress = '0x417F36b1A773d7D602A56b9fBB5353E6A07cCafD';
const web3 = new Web3(window.ethereum);
const contract = new web3.eth.Contract(contractAbi, contractAddr);
// Get token decimals
const decimals = await contract.methods.decimals().call();
const amountInWei = web3.utils.toWei(count.toString(), 'ether');
try {
await contract.methods.transfer(toAddress, amountInWei).send({
from: fromAddress,
gas: 81000,
gasPrice: await web3.eth.getGasPrice()
});
console.log('Transaction successful');
} catch (err) {
console.error('Transaction failed:', err.message);
}
}👉 Learn how to test your DApp transactions safely before going live.
Sending Native Coins: ETH or BNB
Sending native coins (ETH on Ethereum or BNB on BSC) doesn't require a smart contract—just a simple transaction.
BNB/ETH Transfer Example
async transfer() {
const web3 = new Web3(window.ethereum);
const toAddress = '0xeA66e8573e9D03320718AB858B5713686860bE99';
const amount = 0.01;
const value = web3.utils.toWei(amount.toString(), 'ether');
try {
const tx = await web3.eth.sendTransaction({
from: this.walletAddress,
to: toAddress,
value: value,
gas: 21000,
gasPrice: await web3.eth.getGasPrice()
});
console.log('Transaction hash:', tx.transactionHash);
} catch (err) {
console.error('Transaction rejected:', err.message);
}
}This method works identically on both chains as long as the user's wallet is connected to the correct network.
Core Keywords for SEO Optimization
To ensure visibility and relevance in search engines, integrate these core keywords naturally throughout your content:
- uni-app dapp development
- ETH BSC token transfer
- web3.js integration
- BEP-20 transfer in Vue
- blockchain wallet integration
- smart contract interaction
- decentralized app transaction
These terms reflect high-intent queries from developers exploring DApp creation across multi-chain environments.
Frequently Asked Questions
How do I switch between Ethereum and BSC networks in uni-app?
You can prompt users to switch networks using wallet_addEthereumChain. For BSC:
await window.ethereum.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: '0x38',
rpcUrl: 'https://bsc-dataseed.binance.org/'
}]
});Ensure your UI detects the current chain ID (web3.eth.getChainId) to avoid sending transactions on the wrong network.
Can I use uni-app for other blockchains?
Yes. As long as the blockchain supports EVM (Ethereum Virtual Machine) and has Web3 compatibility—such as Polygon, Avalanche, or Arbitrum—you can adapt this setup by changing the RPC URL and chain ID.
What security considerations should I keep in mind?
Never expose private keys in frontend code. Rely on Web3 wallets (like MetaMask) for signing. Validate all inputs, confirm transaction details with users before sending, and handle errors gracefully.
Why is gas price important in transactions?
Gas price determines how fast your transaction is processed. Too low, and it may get stuck; too high, and you overpay. Use web3.eth.getGasPrice() as a baseline and allow advanced users to adjust manually.
Is uni-app suitable for production DApps?
Absolutely. With proper state management (e.g., Pinia or Vuex), modular architecture, and responsive design, uni-app scales well for real-world DApps targeting mobile and web users simultaneously.
👉 Discover tools that streamline blockchain development workflows.
Final Thoughts
Building DApps with uni-app bridges the gap between traditional front-end development and blockchain innovation. By leveraging web3.js, you can create intuitive interfaces for ETH/BNB transfers and token interactions across Ethereum and Binance Smart Chain—all within a single, maintainable codebase.
As the Web3 ecosystem grows, frameworks like uni-app empower developers to deliver cross-platform experiences without sacrificing performance or security.
Whether you're launching a decentralized exchange interface, NFT marketplace, or yield optimizer, mastering these fundamentals puts you on the right path.