TRONLink钱包PHP实现(无MySQL版)
TRONLink钱包PHP实现(无MySQL版)
本文将介绍如何使用纯前端技术(HTML5+CSS+JS)结合PHP和JSON实现一个简单的TRONLink钱包功能,无需MySQL数据库。
功能概述
这个简易TRONLink钱包将实现以下功能:
1.创建新钱包(生成助记词和私钥)
2.导入现有钱包(通过助记词或私钥)
3.显示钱包余额
4.简单的TRX转账功能
5.交易历史记录(存储在本地JSON文件中)
技术架构
-前端:HTML5+CSS+JavaScript(使用TronWeb库与TRON区块链交互)
-后端:PHP(仅用于处理JSON文件存储,不涉及MySQL)
-数据存储:本地JSON文件
完整代码实现
1.项目结构
/tronlink-wallet/
├──index.php主页面
├──wallet.php钱包操作处理
├──data/数据存储目录
│└──wallets.json存储钱包信息
├──css/
│└──style.css样式表
└──js/
└──script.js前端交互逻辑
2.HTML部分(index.php)
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="简易TRONLink钱包实现,无需数据库,使用PHP和JSON存储数据">
<metaname="keywords"content="TRONLink,TRON钱包,PHP钱包,无数据库钱包">
<title>PHPTRONLink钱包</title>
<linkrel="stylesheet"href="css/style.css">
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/TronWeb.js"></script>
</head>
<body>
<divclass="container">
<header>
<h1>PHPTRONLink钱包</h1>
<pclass="subtitle">无需数据库的TRON区块链钱包解决方案</p>
</header>
<divid="wallet-section"class="section">
<h2>我的钱包</h2>
<divid="wallet-info"class="hidden">
<p>地址:<spanid="wallet-address"></span></p>
<p>余额:<spanid="wallet-balance">0</span>TRX</p>
<buttonid="refresh-balance"class="btn">刷新余额</button>
<buttonid="logout"class="btnbtn-danger">退出</button>
<divclass="transfer-form">
<h3>转账</h3>
<inputtype="text"id="to-address"placeholder="接收地址">
<inputtype="number"id="amount"placeholder="TRX数量"step="0.000001">
<buttonid="send-trx"class="btnbtn-primary">发送</button>
<pid="transfer-status"></p>
</div>
</div>
<divid="login-options">
<divclass="option">
<h3>创建新钱包</h3>
<buttonid="create-wallet"class="btnbtn-primary">生成钱包</button>
<divid="new-wallet-info"class="hidden">
<p><strong>请保存以下信息:</strong></p>
<p>助记词:<spanid="mnemonic-display"></span></p>
<p>私钥:<spanid="private-key-display"></span></p>
<buttonid="confirm-create"class="btn">确认并登录</button>
</div>
</div>
<divclass="option">
<h3>导入钱包</h3>
<divclass="tab">
<buttonclass="tablinksactive"onclick="openTab(event,'mnemonic-tab')">助记词</button>
<buttonclass="tablinks"onclick="openTab(event,'privatekey-tab')">私钥</button>
</div>
<divid="mnemonic-tab"class="tabcontent"style="display:block;">
<textareaid="import-mnemonic"placeholder="输入12个单词的助记词"></textarea>
<buttonid="import-by-mnemonic"class="btn">导入</button>
</div>
<divid="privatekey-tab"class="tabcontent">
<textareaid="import-privatekey"placeholder="输入私钥"></textarea>
<buttonid="import-by-privatekey"class="btn">导入</button>
</div>
</div>
</div>
</div>
<divid="transaction-history"class="sectionhidden">
<h2>交易记录</h2>
<table>
<thead>
<tr>
<th>交易ID</th>
<th>类型</th>
<th>金额</th>
<th>时间</th>
</tr>
</thead>
<tbodyid="tx-table-body">
<!--交易记录将通过JS动态加载-->
</tbody>
</table>
</div>
</div>
<scriptsrc="js/script.js"></script>
</body>
</html>
3.CSS样式(css/style.css)
/基础样式/
body{
font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;
line-height:1.6;
color:333;
background-color:f5f5f5;
margin:0;
padding:0;
}
.container{
max-width:1000px;
margin:0auto;
padding:20px;
}
header{
text-align:center;
margin-bottom:30px;
padding-bottom:20px;
border-bottom:1pxsolideee;
}
h1{
color:2c3e50;
margin-bottom:5px;
}
.subtitle{
color:7f8c8d;
font-size:16px;
}
.section{
background:white;
border-radius:8px;
padding:20px;
margin-bottom:20px;
box-shadow:02px10pxrgba(0,0,0,0.05);
}
/按钮样式/
.btn{
display:inline-block;
background:3498db;
color:white;
padding:10px20px;
border:none;
border-radius:4px;
cursor:pointer;
font-size:16px;
transition:background0.3s;
}
.btn:hover{
background:2980b9;
}
.btn-primary{
background:2ecc71;
}
.btn-primary:hover{
background:27ae60;
}
.btn-danger{
background:e74c3c;
}
.btn-danger:hover{
background:c0392b;
}
/表单元素/
input[type="text"],
input[type="number"],
textarea{
width:100%;
padding:10px;
margin:8px0;
border:1pxsolidddd;
border-radius:4px;
box-sizing:border-box;
}
textarea{
min-height:100px;
resize:vertical;
}
/标签页样式/
.tab{
overflow:hidden;
border:1pxsolidccc;
background-color:f1f1f1;
border-radius:4px4px00;
}
.tabbutton{
background-color:inherit;
float:left;
border:none;
outline:none;
cursor:pointer;
padding:10px16px;
transition:0.3s;
}
.tabbutton:hover{
background-color:ddd;
}
.tabbutton.active{
background-color:3498db;
color:white;
}
.tabcontent{
display:none;
padding:15px;
border:1pxsolidccc;
border-top:none;
border-radius:004px4px;
}
/钱包信息样式/
wallet-address{
font-family:monospace;
word-break:break-all;
display:inline-block;
background:f9f9f9;
padding:5px;
border-radius:3px;
}
.transfer-form{
margin-top:20px;
padding-top:20px;
border-top:1pxsolideee;
}
/交易表格/
table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}
th,td{
padding:12px;
text-align:left;
border-bottom:1pxsolidddd;
}
th{
background-color:f2f2f2;
}
tr:hover{
background-color:f5f5f5;
}
/响应式设计/
@media(max-width:768px){
.container{
padding:10px;
}
.option{
margin-bottom:20px;
}
}
/辅助类/
.hidden{
display:none;
}
.success-message{
color:2ecc71;
}
.error-message{
color:e74c3c;
}
4.JavaScript逻辑(js/script.js)
//初始化TronWeb
consttronWeb=newTronWeb({
fullHost:'https://api.trongrid.io',
headers:{"TRON-PRO-API-KEY":'your-api-key'}//替换为你的API密钥
});
//DOM元素
constwalletSection=document.getElementById('wallet-section');
constwalletInfo=document.getElementById('wallet-info');
constloginOptions=document.getElementById('login-options');
constcreateWalletBtn=document.getElementById('create-wallet');
constnewWalletInfo=document.getElementById('new-wallet-info');
constconfirmCreateBtn=document.getElementById('confirm-create');
constimportMnemonicBtn=document.getElementById('import-by-mnemonic');
constimportPrivateKeyBtn=document.getElementById('import-by-privatekey');
constlogoutBtn=document.getElementById('logout');
constrefreshBalanceBtn=document.getElementById('refresh-balance');
constsendTrxBtn=document.getElementById('send-trx');
constwalletAddressSpan=document.getElementById('wallet-address');
constwalletBalanceSpan=document.getElementById('wallet-balance');
consttransactionHistory=document.getElementById('transaction-history');
//全局变量
letcurrentWallet=null;
//页面加载时检查本地存储
document.addEventListener('DOMContentLoaded',()=>{
checkSession();
});
//检查会话状态
functioncheckSession(){
constwalletData=localStorage.getItem('tronWallet');
if(walletData){
currentWallet=JSON.parse(walletData);
showWalletInfo();
loadWalletData();
}
}
//创建新钱包
createWalletBtn.addEventListener('click',async()=>{
try{
//生成助记词
constmnemonic=awaittronWeb.createRandomMnemonic();
//从助记词生成账户
constaccount=awaittronWeb.fromMnemonic(mnemonic);
//显示生成的助记词和私钥
document.getElementById('mnemonic-display').textContent=mnemonic;
document.getElementById('private-key-display').textContent=account.privateKey;
//保存临时钱包数据
currentWallet={
address:account.address.base58,
privateKey:account.privateKey,
mnemonic:mnemonic
};
//显示钱包信息
newWalletInfo.classList.remove('hidden');
createWalletBtn.disabled=true;
}catch(error){
console.error('创建钱包失败:',error);
alert('创建钱包失败:'+error.message);
}
});
//确认创建钱包并保存
confirmCreateBtn.addEventListener('click',async()=>{
if(!currentWallet)return;
try{
//保存钱包到服务器
constresponse=awaitfetch('wallet.php',{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
action:'save',
address:currentWallet.address,
privateKey:currentWallet.privateKey,
mnemonic:currentWallet.mnemonic
})
});
constresult=awaitresponse.json();
if(result.success){
//保存到本地存储
localStorage.setItem('tronWallet',JSON.stringify(currentWallet));
showWalletInfo();
loadWalletData();
}else{
alert('保存钱包失败:'+result.message);
}
}catch(error){
console.error('保存钱包失败:',error);
alert('保存钱包失败:'+error.message);
}
});
//通过助记词导入钱包
importMnemonicBtn.addEventListener('click',async()=>{
constmnemonic=document.getElementById('import-mnemonic').value.trim();
if(!mnemonic){
alert('请输入助记词');
return;
}
try{
//从助记词恢复账户
constaccount=awaittronWeb.fromMnemonic(mnemonic);
currentWallet={
address:account.address.base58,
privateKey:account.privateKey,
mnemonic:mnemonic
};
//保存钱包
constresponse=awaitfetch('wallet.php',{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
action:'save',
address:currentWallet.address,
privateKey:currentWallet.privateKey,
mnemonic:currentWallet.mnemonic
})
});
constresult=awaitresponse.json();
if(result.success){
localStorage.setItem('tronWallet',JSON.stringify(currentWallet));
showWalletInfo();
loadWalletData();
}else{
alert('导入钱包失败:'+result.message);
}
}catch(error){
console.error('导入钱包失败:',error);
alert('导入钱包失败:'+error.message);
}
});
//通过私钥导入钱包
importPrivateKeyBtn.addEventListener('click',async()=>{
constprivateKey=document.getElementById('import-privatekey').value.trim();
if(!privateKey){
alert('请输入私钥');
return;
}
try{
//从私钥恢复账户
constaddress=tronWeb.address.fromPrivateKey(privateKey);
currentWallet={
address:address,
privateKey:privateKey,
mnemonic:null
};
//保存钱包
constresponse=awaitfetch('wallet.php',{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
action:'save',
address:currentWallet.address,
privateKey:currentWallet.privateKey,
mnemonic:currentWallet.mnemonic
})
});
constresult=awaitresponse.json();
if(result.success){
localStorage.setItem('tronWallet',JSON.stringify(currentWallet));
showWalletInfo();
loadWalletData();
}else{
alert('导入钱包失败:'+result.message);
}
}catch(error){
console.error('导入钱包失败:',error);
alert('导入钱包失败:'+error.message);
}
});
//显示钱包信息
functionshowWalletInfo(){
if(!currentWallet)return;
walletAddressSpan.textContent=currentWallet.address;
walletInfo.classList.remove('hidden');
loginOptions.classList.add('hidden');
transactionHistory.classList.remove('hidden');
//加载余额和交易记录
refreshBalance();
loadTransactions();
}
//刷新余额
refreshBalanceBtn.addEventListener('click',refreshBalance);
asyncfunctionrefreshBalance(){
if(!currentWallet)return;
try{
constbalance=awaittronWeb.trx.getBalance(currentWallet.address);
constbalanceInTRX=tronWeb.fromSun(balance);
walletBalanceSpan.textContent=balanceInTRX;
}catch(error){
console.error('获取余额失败:',error);
alert('获取余额失败:'+error.message);
}
}
//发送TRX
sendTrxBtn.addEventListener('click',async()=>{
if(!currentWallet)return;
consttoAddress=document.getElementById('to-address').value.trim();
constamount=parseFloat(document.getElementById('amount').value);
if(!toAddress||!amount||amount<=0){
alert('请输入有效的地址和金额');
return;
}
try{
//验证地址
if(!tronWeb.isAddress(toAddress)){
alert('无效的TRON地址');
return;
}
//创建交易
consttransaction=awaittronWeb.transactionBuilder.sendTrx(
toAddress,
tronWeb.toSun(amount),
currentWallet.address
);
//签名交易
constsignedTx=awaittronWeb.trx.sign(transaction,currentWallet.privateKey);
//广播交易
constresult=awaittronWeb.trx.sendRawTransaction(signedTx);
document.getElementById('transfer-status').textContent='交易已发送!交易ID:'+result.txid;
document.getElementById('transfer-status').className='success-message';
//刷新余额和交易记录
setTimeout(()=>{
refreshBalance();
loadTransactions();
},5000);
}catch(error){
console.error('发送交易失败:',error);
document.getElementById('transfer-status').textContent='发送失败:'+error.message;
document.getElementById('transfer-status').className='error-message';
}
});
//加载交易记录
asyncfunctionloadTransactions(){
if(!currentWallet)return;
try{
constresponse=awaitfetch('wallet.php?action=get_tx&address='+currentWallet.address);
consttransactions=awaitresponse.json();
consttxTableBody=document.getElementById('tx-table-body');
txTableBody.innerHTML='';
if(transactions.length===0){
txTableBody.innerHTML='<tr><tdcolspan="4">
转载请注明出处: TronLink官网下载-TRON-TRX-波场-波比-波币-波宝|官网-钱包-苹果APP|安卓-APP-下载
本文的链接地址: https://tianjinfa.org/post/2993
扫描二维码,在手机上阅读
文章作者:
文章标题:TRONLink钱包PHP实现(无MySQL版)
文章链接:https://tianjinfa.org/post/2993
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 !
文章标题:TRONLink钱包PHP实现(无MySQL版)
文章链接:https://tianjinfa.org/post/2993
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 !
打赏
如果觉得文章对您有用,请随意打赏。
您的支持是我们继续创作的动力!
微信扫一扫
支付宝扫一扫
您可能对以下文章感兴趣
-
你好!😊有什么我可以帮你的吗?
9小时前
-
TronLink钱包网页版实现(PHP+CSS+JS+HTML5+JSON)
6小时前
-
使用Go语言构建TronLink钱包:完整源码与实现指南
7小时前
-
原创TronLink钱包HTML5实现方案-SEO优化版
7小时前
-
TronLink钱包集成开发指南
7小时前
-
TronLink钱包开发指南:使用JavaScript构建去中心化应用
8小时前
-
使用PHP+CSS+JS+HTML5+JSON构建TronLink风格钱包应用(无MySQL)
8小时前
-
你好!😊有什么我可以帮你的吗?
8小时前
-
TronLink钱包集成开发指南:PHP+CSS+JS+HTML5+JSON实现
9小时前
-
TRONLink钱包PHP实现(无MySQL版)
9小时前