原创TronLink钱包实现(不使用MySQL)
原创TronLink钱包实现(不使用MySQL)
本文将详细介绍如何使用PHP、CSS、JS和HTML5创建一个简单的TronLink钱包功能,无需MySQL数据库,仅使用JSON文件存储数据。这个实现包含了基本的钱包功能,如创建账户、查看余额和转账等。
技术架构
-前端:HTML5+CSS+JavaScript(使用TronWeb库与TRON区块链交互)
-后端:PHP(处理基本逻辑和JSON文件存储)
-数据存储:JSON文件(替代MySQL)
实现步骤
1.项目结构
/tron-wallet/
├──assets/
│├──css/
││└──style.css
│└──js/
│└──app.js
├──data/
│└──wallets.json
├──includes/
│└──functions.php
├──index.php
├──create.php
├──send.php
└──config.php
2.配置文件(config.php)
<?php
//定义基础路径
define('BASE_PATH',dirname(__FILE__));
//定义数据文件路径
define('WALLETS_FILE',BASE_PATH.'/data/wallets.json');
//初始化JSON文件如果不存在
if(!file_exists(WALLETS_FILE)){
file_put_contents(WALLETS_FILE,json_encode([]));
}
//设置时区
date_default_timezone_set('Asia/Shanghai');
//安全设置
header('X-Frame-Options:DENY');
header('X-XSS-Protection:1;mode=block');
header('X-Content-Type-Options:nosniff');
?>
3.功能函数(includes/functions.php)
<?php
require_once(__DIR__.'/../config.php');
/
获取所有钱包数据
/
functiongetWallets(){
$data=file_get_contents(WALLETS_FILE);
returnjson_decode($data,true)?:[];
}
/
保存钱包数据
/
functionsaveWallets($wallets){
file_put_contents(WALLETS_FILE,json_encode($wallets,JSON_PRETTY_PRINT));
}
/
创建新钱包
/
functioncreateWallet($name){
$wallets=getWallets();
//生成随机ID
$id=uniqid('wallet_');
$wallets[$id]=[
'id'=>$id,
'name'=>$name,
'created_at'=>date('Y-m-dH:i:s'),
'address'=>'',//将由前端生成
'balance'=>0
];
saveWallets($wallets);
return$id;
}
/
更新钱包地址
/
functionupdateWalletAddress($id,$address){
$wallets=getWallets();
if(isset($wallets[$id])){
$wallets[$id]['address']=$address;
saveWallets($wallets);
returntrue;
}
returnfalse;
}
/
更新钱包余额
/
functionupdateWalletBalance($id,$balance){
$wallets=getWallets();
if(isset($wallets[$id])){
$wallets[$id]['balance']=$balance;
saveWallets($wallets);
returntrue;
}
returnfalse;
}
/
获取单个钱包信息
/
functiongetWallet($id){
$wallets=getWallets();
return$wallets[$id]??null;
}
/
安全输出
/
functione($string){
returnhtmlspecialchars($string,ENT_QUOTES,'UTF-8');
}
?>
4.首页(index.php)
<?php
require_once(__DIR__.'/includes/functions.php');
$wallets=getWallets();
?>
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="简易TronLink钱包-无需安装扩展的TRON区块链钱包">
<metaname="keywords"content="TRON,波场,钱包,TronLink,区块链">
<title>简易TronLink钱包</title>
<linkrel="stylesheet"href="assets/css/style.css">
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/TronWeb.js"></script>
</head>
<body>
<header>
<h1>简易TronLink钱包</h1>
<p>无需安装扩展的TRON区块链钱包解决方案</p>
</header>
<main>
<sectionclass="wallet-list">
<h2>我的钱包</h2>
<ahref="create.php"class="btn">创建新钱包</a>
<divclass="wallets">
<?phpif(empty($wallets)):?>
<pclass="empty">您还没有创建任何钱包</p>
<?phpelse:?>
<?phpforeach($walletsas$wallet):?>
<divclass="wallet-card"data-id="<?=e($wallet['id'])?>">
<h3><?=e($wallet['name'])?></h3>
<pclass="address"><?=e($wallet['address']?:'未设置地址')?></p>
<pclass="balance">余额:<?=$wallet['balance']?>TRX</p>
<divclass="actions">
<buttonclass="btnrefresh-balance">刷新余额</button>
<ahref="send.php?id=<?=e($wallet['id'])?>"class="btn">转账</a>
</div>
</div>
<?phpendforeach;?>
<?phpendif;?>
</div>
</section>
</main>
<footer>
<p>©<?=date('Y')?>简易TronLink钱包-基于TRON区块链</p>
</footer>
<scriptsrc="assets/js/app.js"></script>
</body>
</html>
5.创建钱包页面(create.php)
<?php
require_once(__DIR__.'/includes/functions.php');
if($_SERVER['REQUEST_METHOD']==='POST'){
$name=trim($_POST['name']??'');
if(empty($name)){
$error='请输入钱包名称';
}else{
$id=createWallet($name);
header("Location:index.php?created=$id");
exit;
}
}
?>
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>创建新钱包-简易TronLink钱包</title>
<linkrel="stylesheet"href="assets/css/style.css">
</head>
<body>
<header>
<h1>创建新钱包</h1>
<ahref="index.php"class="back">返回</a>
</header>
<main>
<formmethod="POST">
<?phpif(isset($error)):?>
<divclass="alerterror"><?=e($error)?></div>
<?phpendif;?>
<divclass="form-group">
<labelfor="name">钱包名称</label>
<inputtype="text"id="name"name="name"required>
</div>
<buttontype="submit"class="btn">创建钱包</button>
</form>
</main>
<scriptsrc="assets/js/app.js"></script>
</body>
</html>
6.转账页面(send.php)
<?php
require_once(__DIR__.'/includes/functions.php');
$walletId=$_GET['id']??'';
$wallet=getWallet($walletId);
if(!$wallet){
header("Location:index.php");
exit;
}
if($_SERVER['REQUEST_METHOD']==='POST'){
$to=trim($_POST['to']??'');
$amount=floatval($_POST['amount']??0);
if(empty($to)){
$error='请输入接收地址';
}elseif($amount<=0){
$error='请输入有效的金额';
}else{
//转账将由前端JavaScript处理
$success='转账请求已提交,请确认交易';
}
}
?>
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>转账-简易TronLink钱包</title>
<linkrel="stylesheet"href="assets/css/style.css">
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/TronWeb.js"></script>
</head>
<body>
<header>
<h1>转账</h1>
<ahref="index.php"class="back">返回</a>
</header>
<main>
<formid="send-form"method="POST">
<?phpif(isset($error)):?>
<divclass="alerterror"><?=e($error)?></div>
<?phpelseif(isset($success)):?>
<divclass="alertsuccess"><?=e($success)?></div>
<?phpendif;?>
<divclass="form-group">
<label>从钱包</label>
<pclass="wallet-info"><?=e($wallet['name'])?>(<?=e($wallet['address'])?>)</p>
<pclass="balance">可用余额:<?=$wallet['balance']?>TRX</p>
</div>
<divclass="form-group">
<labelfor="to">接收地址</label>
<inputtype="text"id="to"name="to"requiredplaceholder="输入TRON地址">
</div>
<divclass="form-group">
<labelfor="amount">金额(TRX)</label>
<inputtype="number"id="amount"name="amount"step="0.000001"min="0.000001"required>
</div>
<buttontype="submit"class="btn">发送</button>
</form>
</main>
<scriptsrc="assets/js/app.js"></script>
<script>
//转账处理
document.getElementById('send-form').addEventListener('submit',asyncfunction(e){
e.preventDefault();
consttoAddress=document.getElementById('to').value;
constamount=parseFloat(document.getElementById('amount').value);
constwalletAddress='<?=$wallet['address']?>';
if(!window.tronWeb){
alert('请安装TronLink扩展并解锁');
return;
}
try{
consttx=awaitwindow.tronWeb.transactionBuilder.sendTrx(
toAddress,
amount1000000,//TRXtosun
walletAddress
);
constsignedTx=awaitwindow.tronWeb.trx.sign(tx);
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTx);
alert(`交易已发送!TXID:${result.txid}`);
window.location.href='index.php';
}catch(error){
alert('转账失败:'+error.message);
}
});
</script>
</body>
</html>
7.CSS样式(assets/css/style.css)
/基础样式/
:root{
--primary-color:1e88e5;
--secondary-color:26c6da;
--error-color:f44336;
--success-color:4caf50;
--background-color:f5f5f5;
--card-color:ffffff;
--text-color:333333;
--border-radius:8px;
--box-shadow:02px10pxrgba(0,0,0,0.1);
}
{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;
line-height:1.6;
color:var(--text-color);
background-color:var(--background-color);
padding:20px;
}
header{
margin-bottom:30px;
text-align:center;
}
headerh1{
color:var(--primary-color);
margin-bottom:10px;
}
main{
max-width:1000px;
margin:0auto;
}
/按钮样式/
.btn{
display:inline-block;
background-color:var(--primary-color);
color:white;
padding:10px20px;
border:none;
border-radius:var(--border-radius);
cursor:pointer;
text-decoration:none;
font-size:16px;
transition:background-color0.3s;
}
.btn:hover{
background-color:1565c0;
}
.back{
display:inline-block;
margin-top:10px;
color:var(--primary-color);
text-decoration:none;
}
/钱包卡片/
.wallets{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:20px;
margin-top:20px;
}
.wallet-card{
background-color:var(--card-color);
padding:20px;
border-radius:var(--border-radius);
box-shadow:var(--box-shadow);
transition:transform0.3s;
}
.wallet-card:hover{
transform:translateY(-5px);
}
.wallet-cardh3{
color:var(--primary-color);
margin-bottom:10px;
}
.address{
font-family:monospace;
word-break:break-all;
margin-bottom:10px;
color:666;
}
.balance{
font-weight:bold;
margin-bottom:15px;
}
.actions{
display:flex;
gap:10px;
}
/表单样式/
form{
max-width:500px;
margin:0auto;
background-color:var(--card-color);
padding:30px;
border-radius:var(--border-radius);
box-shadow:var(--box-shadow);
}
.form-group{
margin-bottom:20px;
}
.form-grouplabel{
display:block;
margin-bottom:5px;
font-weight:bold;
}
.form-groupinput{
width:100%;
padding:10px;
border:1pxsolidddd;
border-radius:var(--border-radius);
font-size:16px;
}
.wallet-info{
margin-bottom:5px;
}
/提示信息/
.alert{
padding:15px;
margin-bottom:20px;
border-radius:var(--border-radius);
}
.error{
background-color:ffebee;
color:var(--error-color);
border-left:4pxsolidvar(--error-color);
}
.success{
background-color:e8f5e9;
color:var(--success-color);
border-left:4pxsolidvar(--success-color);
}
.empty{
text-align:center;
padding:20px;
color:666;
}
/响应式设计/
@media(max-width:768px){
.wallets{
grid-template-columns:1fr;
}
form{
padding:20px;
}
}
8.JavaScript(assets/js/app.js)
//初始化TronWeb
lettronWeb;
//检测TronLink是否安装
functioncheckTronLink(){
if(window.tronWeb&&window.tronWeb.defaultAddress.base58){
tronWeb=window.tronWeb;
returntrue;
}
returnfalse;
}
//页面加载完成后执行
document.addEventListener('DOMContentLoaded',function(){
//检查URL参数
consturlParams=newURLSearchParams(window.location.search);
constcreatedWalletId=urlParams.get('created');
if(createdWalletId){
//新创建的钱包,需要设置地址
setupNewWallet(createdWalletId);
}
//绑定刷新余额按钮事件
document.querySelectorAll('.refresh-balance').forEach(button=>{
button.addEventListener('click',function(){
constwalletCard=this.closest('.wallet-card');
constwalletId=walletCard.dataset.id;
constaddress=walletCard.querySelector('.address').textContent;
if(address&&address!=='未设置地址'){
refreshBalance(walletId,address);
}else{
alert('钱包地址未设置');
}
});
});
});
//设置新钱包地址
asyncfunctionsetupNewWallet(walletId){
if(!checkTronLink()){
alert('请安装TronLink扩展并解锁以设置钱包地址');
return;
}
try{
constaddress=tronWeb.defaultAddress.base58;
//发送到后端保存地址
constresponse=awaitfetch('update_address.php',{
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded',
},
body:`id=${encodeURIComponent(walletId)}&address=${encodeURIComponent(address)}`
});
if(response.ok){
//刷新页面显示新地址
location.reload();
}else{
alert('保存地址失败');
}
}catch(error){
console.error('设置钱包地址错误:',error);
alert('设置钱包地址时出错');
}
}
//刷新余额
asyncfunctionrefreshBalance(walletId,address){
if(!checkTronLink()){
alert('请安装TronLink扩展并解锁以刷新余额');
return;
}
try{
//获取余额(单位:sun)
constbalanceSun=awaittronWeb.trx.getBalance(address);
//转换为TRX(1TRX=1,000,000sun)
constbalanceTrx=balanceSun/1000000;
//
转载请注明出处: TronLink官网下载-TRON-TRX-波场-波比-波币-波宝|官网-钱包-苹果APP|安卓-APP-下载
本文的链接地址: https://tianjinfa.org/post/3174
扫描二维码,在手机上阅读
文章作者:
文章标题:原创TronLink钱包实现(不使用MySQL)
文章链接:https://tianjinfa.org/post/3174
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 !
文章标题:原创TronLink钱包实现(不使用MySQL)
文章链接:https://tianjinfa.org/post/3174
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 !
打赏
如果觉得文章对您有用,请随意打赏。
您的支持是我们继续创作的动力!
微信扫一扫
支付宝扫一扫
您可能对以下文章感兴趣
-
TronLink钱包集成开发指南
10小时前
-
原创TronLink钱包HTML5实现方案-SEO优化版
10小时前
-
TronLink钱包集成开发指南:使用PHP+CSS+JS+HTML5+JSON实现
10小时前
-
使用Go语言构建TronLink钱包:完整源码与实现指南
12小时前
-
TronLink钱包Web版实现(无MySQL)
12小时前
-
TronLink钱包集成指南:使用JavaScript连接TRON区块链
2小时前
-
使用JavaScript开发TRONLink钱包集成指南
6小时前
-
使用JavaScript开发TRONLink钱包集成指南
9小时前
-
TRONLink钱包简易实现(PHP+CSS+JS+HTML5+JSON)
9小时前
-
TronLink钱包网页版实现(PHP+CSS+JS+HTML5+JSON)
9小时前