使用JavaScript开发TronLink钱包的完整指南

使用JavaScript开发TronLink钱包的完整指南

介绍

TronLink是TRON区块链生态系统中最受欢迎的钱包扩展之一，类似于以太坊的MetaMask。本文将详细介绍如何使用JavaScript开发一个与TronLink交互的DApp（去中心化应用程序），包括连接钱包、获取账户信息、发送交易等功能。

为什么选择TronLink？

1.安全性：TronLink提供安全的密钥存储和交易签名
2.便捷性：作为浏览器扩展，用户可以轻松访问TRONDApps
3.兼容性：支持TRON主网和测试网
4.功能丰富：支持TRC10、TRC20代币和智能合约交互

准备工作

在开始之前，请确保：

1.用户已安装TronLink钱包扩展
2.你的网站使用HTTPS协议（TronLink要求安全连接）
3.基本的JavaScript和区块链知识

检测TronLink是否安装

//检查TronLink是否安装
asyncfunctioncheckTronLink(){
//等待一小段时间确保TronLink注入完成
awaitnewPromise(resolve=>setTimeout(resolve,100));

if(window.tronWeb&&window.tronWeb.defaultAddress.base58){
console.log('TronLink已安装并连接');
returntrue;
}elseif(window.tronWeb){
console.log('TronLink已安装但未连接');
returnfalse;
}else{
console.log('TronLink未安装');
returnfalse;
}
}

//使用示例
checkTronLink().then(isInstalled=>{
if(!isInstalled){
alert('请先安装TronLink钱包扩展');
//可以在这里添加TronLink安装链接
}
});

连接TronLink钱包

//连接TronLink钱包
asyncfunctionconnectTronLink(){
try{
if(!window.tronWeb){
thrownewError('TronLink未检测到');
}

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

if(accounts&&accounts.length>0){
console.log('连接成功，当前地址:',window.tronWeb.defaultAddress.base58);
return{
success:true,
address:window.tronWeb.defaultAddress.base58
};
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TronLink失败:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
document.getElementById('connectBtn').addEventListener('click',async()=>{
constresult=awaitconnectTronLink();
if(result.success){
document.getElementById('walletAddress').textContent=result.address;
}else{
alert('连接失败:'+result.error);
}
});

获取账户信息

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

//使用tronWebAPI获取账户信息
constaccount=awaitwindow.tronWeb.trx.getAccount(address||window.tronWeb.defaultAddress.base58);

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

return{
success:true,
account,
trxBalance,
address:account.address
};
}catch(error){
console.error('获取账户信息失败:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
document.getElementById('accountInfoBtn').addEventListener('click',async()=>{
constresult=awaitgetAccountInfo();
if(result.success){
console.log('账户信息:',result.account);
document.getElementById('trxBalance').textContent=result.trxBalance;
}else{
alert('获取账户信息失败:'+result.error);
}
});

发送TRX交易

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

//验证地址有效性
if(!window.tronWeb.isAddress(toAddress)){
thrownewError('无效的接收地址');
}

//转换金额为sun单位
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);

return{
success:true,
transactionId:result.transaction.txID,
result
};
}catch(error){
console.error('发送TRX失败:',error);
return{
success:false,
error:error.message
};
}
}

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

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

constresult=awaitsendTrx(toAddress,amount);
if(result.success){
alert(`交易成功!交易ID:${result.transactionId}`);
//可以在这里添加交易查看链接
}else{
alert('交易失败:'+result.error);
}
});

与智能合约交互

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

//验证合约地址
if(!window.tronWeb.isAddress(contractAddress)){
thrownewError('无效的合约地址');
}

//构建交易
consttransaction=awaitwindow.tronWeb.transactionBuilder.triggerSmartContract(
contractAddress,
options.feeLimit||100000000,
options.callValue||0,
functionSelector,
parameters,
options.from||window.tronWeb.defaultAddress.base58
);

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

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

return{
success:true,
transactionId:result.transaction.txID,
result
};
}catch(error){
console.error('调用合约失败:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例-调用一个简单的transfer函数
document.getElementById('callContractBtn').addEventListener('click',async()=>{
constcontractAddress='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';//USDT合约地址示例
consttoAddress=document.getElementById('contractToAddress').value;
constamount=document.getElementById('contractAmount').value;

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

//将金额转换为合约所需的最小单位（USDT是6位小数）
constamountInWei=amount1000000;

//transfer函数选择器和参数
constfunctionSelector='transfer(address,uint256)';
constparameters=[
{type:'address',value:toAddress},
{type:'uint256',value:amountInWei}
];

constresult=awaitcallContract(contractAddress,functionSelector,parameters);
if(result.success){
alert(`合约调用成功!交易ID:${result.transactionId}`);
}else{
alert('合约调用失败:'+result.error);
}
});

监听账户变化

//监听账户变化
functionsetupAccountChangeListener(){
if(!window.tronWeb){
console.warn('TronLink未检测到，无法设置监听器');
return;
}

//TronLink账户变化事件
window.addEventListener('message',(event)=>{
if(event.data.message&&event.data.message.action==='accountsChanged'){
console.log('检测到账户变化:',event.data.message.data);
//更新UI显示新账户
document.getElementById('walletAddress').textContent=window.tronWeb.defaultAddress.base58;
//可以在这里添加重新加载账户数据的逻辑
}
});
}

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

完整的HTML示例

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>TronLink钱包交互示例</title>
<metaname="description"content="使用JavaScript与TronLink钱包交互的完整示例">
<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;
}
.info{
margin-top:10px;
padding:10px;
background-color:f8f8f8;
border-radius:4px;
}
</style>
</head>
<body>
<h1>TronLink钱包交互示例</h1>
<p>本示例演示如何使用JavaScript与TronLink钱包扩展进行交互。</p>

<divclass="section">
<h2>1.连接钱包</h2>
<buttonid="connectBtn">连接TronLink钱包</button>
<divclass="info">
<p>当前钱包地址:<spanid="walletAddress">未连接</span></p>
</div>
</div>

<divclass="section">
<h2>2.账户信息</h2>
<buttonid="accountInfoBtn">获取账户信息</button>
<divclass="info">
<p>TRX余额:<spanid="trxBalance">-</span>TRX</p>
</div>
</div>

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

<divclass="section">
<h2>4.调用智能合约(USDT转账示例)</h2>
<inputtype="text"id="contractToAddress"placeholder="输入接收地址">
<inputtype="number"id="contractAmount"placeholder="输入USDT金额">
<buttonid="callContractBtn">调用合约转账</button>
</div>

<script>
//这里放置上面所有的JavaScript代码
//检测TronLink是否安装
asyncfunctioncheckTronLink(){
//等待一小段时间确保TronLink注入完成
awaitnewPromise(resolve=>setTimeout(resolve,100));

if(window.tronWeb&&window.tronWeb.defaultAddress.base58){
console.log('TronLink已安装并连接');
returntrue;
}elseif(window.tronWeb){
console.log('TronLink已安装但未连接');
returnfalse;
}else{
console.log('TronLink未安装');
returnfalse;
}
}

//连接TronLink钱包
asyncfunctionconnectTronLink(){
try{
if(!window.tronWeb){
thrownewError('TronLink未检测到');
}

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

if(accounts&&accounts.length>0){
console.log('连接成功，当前地址:',window.tronWeb.defaultAddress.base58);
return{
success:true,
address:window.tronWeb.defaultAddress.base58
};
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TronLink失败:',error);
return{
success:false,
error:error.message
};
}
}

//获取账户信息
asyncfunctiongetAccountInfo(address){
try{
if(!window.tronWeb){
thrownewError('TronLink未连接');
}

//使用tronWebAPI获取账户信息
constaccount=awaitwindow.tronWeb.trx.getAccount(address||window.tronWeb.defaultAddress.base58);

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

return{
success:true,
account,
trxBalance,
address:account.address
};
}catch(error){
console.error('获取账户信息失败:',error);
return{
success:false,
error:error.message
};
}
}

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

//验证地址有效性
if(!window.tronWeb.isAddress(toAddress)){
thrownewError('无效的接收地址');
}

//转换金额为sun单位
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);

return{
success:true,
transactionId:result.transaction.txID,
result
};
}catch(error){
console.error('发送TRX失败:',error);
return{
success:false,
error:error.message
};
}
}

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

//验证合约地址
if(!window.tronWeb.isAddress(contractAddress)){
thrownewError('无效的合约地址');
}

//构建交易
consttransaction=awaitwindow.tronWeb.transactionBuilder.triggerSmartContract(
contractAddress,
options.feeLimit||100000000,
options.callValue||0,
functionSelector,
parameters,
options.from||window.tronWeb.defaultAddress.base58
);

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

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

return{
success:true,
transactionId:result.transaction.txID,
result
};
}catch(error){
console.error('调用合约失败:',error);
return{
success:false,
error:error.message
};
}
}

//监听账户变化
functionsetupAccountChangeListener(){
if(!window.tronWeb){
console.warn('TronLink未检测到，无法设置监听器');
return;
}

//TronLink账户变化事件
window.addEventListener('message',(event)=>{
if(event.data.message&&event.data.message.action==='accountsChanged'){
console.log('检测到账户变化:',event.data.message.data);
//更新UI显示新账户
document.getElementById('walletAddress').textContent=window.tronWeb.defaultAddress.base58;
//可以在这里添加重新加载账户数据的逻辑
}
});
}

//初始化
document.addEventListener('DOMContentLoaded',async()=>{
//检查TronLink是否安装
constisInstalled=awaitcheckTronLink();
if(!isInstalled){
alert('请先安装TronLink钱包扩展');
}

//设置账户变化监听器
setupAccountChangeListener();

//连接钱包按钮事件
document.getElementById('connectBtn').addEventListener('click',async()=>{
constresult=awaitconnectTronLink();
if(result.success){
document.getElementById('walletAddress').textContent=result.address;
}else{
alert('连接失败:'+result.error);
}
});

//获取账户信息按钮事件
document.getElementById('accountInfoBtn').addEventListener('click',async()=>{
constresult=awaitgetAccountInfo();
if(