使用JavaScript开发TRONLink钱包集成指南

使用JavaScript开发TRONLink钱包集成指南

TRONLink是波场(TRON)区块链上最受欢迎的钱包扩展程序之一，类似于以太坊的MetaMask。本文将详细介绍如何使用JavaScript与TRONLink钱包进行交互，包括连接钱包、查询余额、发送交易等功能。

什么是TRONLink钱包？

TRONLink是一个浏览器扩展钱包，允许用户与TRON区块链交互。它提供安全的密钥存储、便捷的交易签名和DApp浏览体验。开发者可以通过简单的API将TRONLink集成到自己的DApp中。

准备工作

在开始编码前，请确保：

1.用户已安装TRONLink浏览器扩展
2.你的网站使用HTTPS协议（本地开发可以使用HTTP）
3.了解基本的JavaScript和区块链概念

检测TRONLink是否安装

首先，我们需要检测用户的浏览器是否安装了TRONLink：

//检测TRONLink是否安装
asyncfunctioncheckTronLinkInstalled(){
//等待一段时间确保window.tronWeb对象已注入
awaitnewPromise(resolve=>setTimeout(resolve,1000));

if(window.tronWeb){
returntrue;
}

returnfalse;
}

//使用示例
checkTronLinkInstalled().then(installed=>{
if(installed){
console.log('TRONLink已安装');
}else{
console.log('未检测到TRONLink，请先安装');
//可以在这里显示安装引导
}
});

连接TRONLink钱包

连接钱包是DApp与用户交互的第一步：

//连接TRONLink钱包
asyncfunctionconnectTronLink(){
try{
//检查是否已安装
constinstalled=awaitcheckTronLinkInstalled();
if(!installed){
thrownewError('TRONLink未安装');
}

//请求账户访问权限
constaccounts=awaitwindow.tronWeb.request({method:'tron_requestAccounts'});

if(accounts&&accounts.length>0){
console.log('连接成功，当前账户:',accounts[0]);
returnaccounts[0];
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TRONLink失败:',error);
throwerror;
}
}

//使用示例
document.getElementById('connectBtn').addEventListener('click',async()=>{
try{
constaddress=awaitconnectTronLink();
document.getElementById('walletAddress').textContent=address;
}catch(error){
alert(error.message);
}
});

获取账户信息

连接成功后，我们可以获取更多账户信息：

//获取账户余额和基本信息
asyncfunctiongetAccountInfo(address){
try{
if(!window.tronWeb){
thrownewError('TRONLink未连接');
}

//获取账户资源信息
constaccount=awaitwindow.tronWeb.trx.getAccount(address);

//获取TRX余额
constbalance=awaitwindow.tronWeb.trx.getBalance(address);
consttrxBalance=window.tronWeb.fromSun(balance);

//获取代币余额
consttokens=awaitwindow.tronWeb.trx.getAccountTokens(address,0,10);

return{
address,
balance:trxBalance,
account,
tokens
};
}catch(error){
console.error('获取账户信息失败:',error);
throwerror;
}
}

//使用示例
asyncfunctiondisplayAccountInfo(){
try{
constaddress=window.tronWeb.defaultAddress.base58;
constinfo=awaitgetAccountInfo(address);

console.log('账户信息:',info);
document.getElementById('accountInfo').innerHTML=`
<p>地址:${info.address}</p>
<p>TRX余额:${info.balance}TRX</p>
<p>带宽:${info.account.free_net_usage||0}</p>
<p>能量:${info.account.account_resource?.frozen_balance_for_energy?.frozen_balance||0}</p>
`;
}catch(error){
console.error('显示账户信息失败:',error);
}
}

发送TRX交易

发送TRX是钱包的基本功能：

//发送TRX交易
asyncfunctionsendTrx(toAddress,amount){
try{
if(!window.tronWeb){
thrownewError('TRONLink未连接');
}

//将TRX转换为Sun（1TRX=1,000,000Sun）
constamountSun=window.tronWeb.toSun(amount);

//创建交易对象
consttransaction=awaitwindow.tronWeb.transactionBuilder.sendTrx(
toAddress,
amountSun,
window.tronWeb.defaultAddress.base58
);

//签名交易
constsignedTransaction=awaitwindow.tronWeb.trx.sign(transaction);

//广播交易
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTransaction);

returnresult;
}catch(error){
console.error('发送TRX失败:',error);
throwerror;
}
}

//使用示例
document.getElementById('sendTrxBtn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('toAddress').value;
constamount=document.getElementById('amount').value;

try{
constresult=awaitsendTrx(toAddress,amount);
console.log('交易已发送:',result);
alert(`交易已发送，交易ID:${result.txid}`);
}catch(error){
alert(`发送失败:${error.message}`);
}
});

与智能合约交互

TRONLink也支持与智能合约交互：

//调用智能合约
asyncfunctioncallContract(contractAddress,functionSelector,parameters=[],options={}){
try{
if(!window.tronWeb){
thrownewError('TRONLink未连接');
}

//构建交易
consttransaction=awaitwindow.tronWeb.transactionBuilder.triggerSmartContract(
contractAddress,
functionSelector,
options,
parameters,
window.tronWeb.defaultAddress.base58
);

//签名交易
constsignedTransaction=awaitwindow.tronWeb.trx.sign(transaction.transaction);

//广播交易
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTransaction);

returnresult;
}catch(error){
console.error('调用合约失败:',error);
throwerror;
}
}

//使用示例：调用USDT合约的transfer方法
asyncfunctiontransferUsdt(toAddress,amount){
constcontractAddress='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';//USDT合约地址
constfunctionSelector='transfer(address,uint256)';

//将地址转换为hex格式
consthexAddress=window.tronWeb.address.toHex(toAddress);

//USDT有6位小数，需要乘以10^6
constamountWithDecimals=amount1000000;

constparameters=[
{type:'address',value:hexAddress},
{type:'uint256',value:amountWithDecimals}
];

try{
constresult=awaitcallContract(contractAddress,functionSelector,parameters);
console.log('USDT转账成功:',result);
returnresult;
}catch(error){
console.error('USDT转账失败:',error);
throwerror;
}
}

监听账户变化

当用户切换账户时，我们需要更新UI：

//监听账户变化
functionsetupAccountChangeListener(){
if(!window.tronWeb)return;

window.tronWeb.on('addressChanged',(newAddress)=>{
console.log('账户已切换:',newAddress);
//更新UI显示新账户信息
displayAccountInfo();
});

window.tronWeb.on('disconnect',()=>{
console.log('TRONLink已断开连接');
//更新UI显示断开状态
document.getElementById('walletStatus').textContent='未连接';
});
}

//初始化时调用
setupAccountChangeListener();

完整的HTML示例

下面是一个完整的HTML页面，集成了上述所有功能：

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>TRONLink钱包集成示例</title>
<style>
body{
font-family:Arial,sans-serif;
max-width:800px;
margin:0auto;
padding:20px;
line-height:1.6;
}
.section{
margin-bottom:30px;
padding:20px;
border:1pxsolidddd;
border-radius:5px;
}
button{
background-color:4CAF50;
color:white;
padding:10px15px;
border:none;
border-radius:4px;
cursor:pointer;
margin:5px0;
}
button:hover{
background-color:45a049;
}
input{
padding:8px;
margin:5px0;
width:100%;
box-sizing:border-box;
}
accountInfo{
background-color:f9f9f9;
padding:15px;
border-radius:4px;
}
</style>
</head>
<body>
<h1>TRONLink钱包集成示例</h1>

<divclass="section">
<h2>钱包连接</h2>
<pid="walletStatus">未连接</p>
<buttonid="connectBtn">连接TRONLink钱包</button>
</div>

<divclass="section">
<h2>账户信息</h2>
<divid="accountInfo">
<p>请先连接钱包</p>
</div>
<buttonid="refreshBtn">刷新账户信息</button>
</div>

<divclass="section">
<h2>发送TRX</h2>
<inputtype="text"id="toAddress"placeholder="接收地址">
<inputtype="number"id="amount"placeholder="金额(TRX)">
<buttonid="sendTrxBtn">发送TRX</button>
</div>

<divclass="section">
<h2>USDT转账</h2>
<inputtype="text"id="usdtToAddress"placeholder="接收地址">
<inputtype="number"id="usdtAmount"placeholder="金额(USDT)">
<buttonid="sendUsdtBtn">发送USDT</button>
</div>

<script>
//检测TRONLink是否安装
asyncfunctioncheckTronLinkInstalled(){
awaitnewPromise(resolve=>setTimeout(resolve,1000));
return!!window.tronWeb;
}

//连接TRONLink钱包
asyncfunctionconnectTronLink(){
try{
constinstalled=awaitcheckTronLinkInstalled();
if(!installed){
thrownewError('TRONLink未安装');
}

constaccounts=awaitwindow.tronWeb.request({method:'tron_requestAccounts'});

if(accounts&&accounts.length>0){
document.getElementById('walletStatus').textContent='已连接:'+accounts[0];
returnaccounts[0];
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TRONLink失败:',error);
throwerror;
}
}

//获取账户信息
asyncfunctiongetAccountInfo(address){
try{
constaccount=awaitwindow.tronWeb.trx.getAccount(address);
constbalance=awaitwindow.tronWeb.trx.getBalance(address);
consttrxBalance=window.tronWeb.fromSun(balance);
consttokens=awaitwindow.tronWeb.trx.getAccountTokens(address,0,10);

return{
address,
balance:trxBalance,
account,
tokens
};
}catch(error){
console.error('获取账户信息失败:',error);
throwerror;
}
}

//显示账户信息
asyncfunctiondisplayAccountInfo(){
try{
constaddress=window.tronWeb.defaultAddress.base58;
constinfo=awaitgetAccountInfo(address);

lettokensHtml='';
if(info.tokens&&info.tokens.length>0){
tokensHtml='<h3>代币余额:</h3><ul>';
info.tokens.forEach(token=>{
constbalance=token.balance/Math.pow(10,token.tokenDecimal);
tokensHtml+=`<li>${token.tokenAbbr}:${balance}</li>`;
});
tokensHtml+='</ul>';
}

document.getElementById('accountInfo').innerHTML=`
<p>地址:${info.address}</p>
<p>TRX余额:${info.balance}TRX</p>
<p>带宽:${info.account.free_net_usage||0}</p>
<p>能量:${info.account.account_resource?.frozen_balance_for_energy?.frozen_balance||0}</p>
${tokensHtml}
`;
}catch(error){
console.error('显示账户信息失败:',error);
}
}

//发送TRX交易
asyncfunctionsendTrx(toAddress,amount){
try{
constamountSun=window.tronWeb.toSun(amount);
consttransaction=awaitwindow.tronWeb.transactionBuilder.sendTrx(
toAddress,
amountSun,
window.tronWeb.defaultAddress.base58
);
constsignedTransaction=awaitwindow.tronWeb.trx.sign(transaction);
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTransaction);
returnresult;
}catch(error){
console.error('发送TRX失败:',error);
throwerror;
}
}

//调用智能合约
asyncfunctioncallContract(contractAddress,functionSelector,parameters=[],options={}){
try{
consttransaction=awaitwindow.tronWeb.transactionBuilder.triggerSmartContract(
contractAddress,
functionSelector,
options,
parameters,
window.tronWeb.defaultAddress.base58
);
constsignedTransaction=awaitwindow.tronWeb.trx.sign(transaction.transaction);
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTransaction);
returnresult;
}catch(error){
console.error('调用合约失败:',error);
throwerror;
}
}

//USDT转账
asyncfunctiontransferUsdt(toAddress,amount){
constcontractAddress='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';
constfunctionSelector='transfer(address,uint256)';
consthexAddress=window.tronWeb.address.toHex(toAddress);
constamountWithDecimals=amount1000000;

constparameters=[
{type:'address',value:hexAddress},
{type:'uint256',value:amountWithDecimals}
];

try{
constresult=awaitcallContract(contractAddress,functionSelector,parameters);
console.log('USDT转账成功:',result);
returnresult;
}catch(error){
console.error('USDT转账失败:',error);
throwerror;
}
}

//监听账户变化
functionsetupAccountChangeListener(){
if(!window.tronWeb)return;

window.tronWeb.on('addressChanged',(newAddress)=>{
console.log('账户已切换:',newAddress);
document.getElementById('walletStatus').textContent='已连接:'+newAddress;
displayAccountInfo();
});

window.tronWeb.on('disconnect',()=>{
console.log('TRONLink已断开连接');
document.getElementById('walletStatus').textContent='未连接';
document.getElementById('accountInfo').innerHTML='<p>请先连接钱包</p>';
});
}

//初始化
document.addEventListener('DOMContentLoaded',async()=>{
//连接按钮
document.getElementById('connectBtn').addEventListener('click',async()=>{
try{
awaitconnectTronLink();
awaitdisplayAccountInfo();
setupAccountChangeListener();
}catch(error){
alert(error.message);
}
});

//刷新按钮
document.getElementById('refreshBtn').addEventListener('click',async()=>{
if(window.tronWeb&&window.tronWeb.defaultAddress){
awaitdisplayAccountInfo();
}else{
alert('请先连接钱包');
}
});

//发送TRX按钮
document.getElementById('sendTrxBtn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('toAddress').value;
constamount=document.getElementById('amount').value;

if(!toAddress||!amount){
alert('请输入接收地址和金额');
return;
}

try{
constresult=awaitsendTrx(toAddress,amount);
alert(`交易已发送，交易ID:${result.txid}`);
awaitdisplayAccountInfo();
}catch(error){
alert(`发送失败:${error.message}`);
}
});

//发送USDT按钮
document.getElementById('sendUsdtBtn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('usdtToAddress').value;
constamount=document.getElementById('usdtAmount').value;

if(!toAddress||!amount){
alert('请输入接收地址和金额');
return;
}

try{
constresult=awaittransferUsdt(toAddress,amount);
alert(`USDT转账已发送，交易ID:${result.txid}`);
awaitdisplayAccountInfo();
}catch(error){
alert(`USDT转账失败:${error.message}`);
}
});

//自动检查是否已连接
if(awaitcheckTronLinkInstalled()&&window.tronWeb.defaultAddress){
document