上一篇我们在Ropsten测试网络部署了一个合约
我们暂时只能通过remix来访问这个合约
那么我们如何创建Web网页来和这个Eth合约进行交互呢
我们需要用到Web3
web3是node的一个包
所以我们需要用到node,自己安装一下
我们先来写一个小的测试项目
可以查询Ropsten任何用户的余额
创建一个文件夹
然后npm init
初始化完成了,
生成了package.json文件
然后我们来安装web3
npm install web3 --save
安装完毕
然后我们来写一个简单的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="node_modules/web3/dist/web3.min.js"></script>
</head>
<body>
<div>欢迎来到Ropsten余额查询系统</div>
<input type="text" id="user_address" placeholder="请输入用户地址">
<input type="button" onclick="checkBalance()" value="查询">
<div>
<span>余额: </span>
<span id="text_balance"></span>
</div>
</body>
</html>
刚刚我们安装了web3,
现在引入一下web3
<script src="node_modules/web3/dist/web3.min.js"></script>
然后我们来写一个js,操作html
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/a1538f216f9f4f1480f97d160d9ecf67"));
}
function checkBalance() {
let inputUserAddress = document.getElementById("user_address");
let userAddress = inputUserAddress.value;
web3.eth.getBalance(userAddress).then(function (balance) {
console.log('balance:', balance)
let text_balance = document.getElementById("text_balance");
text_balance.textContent = balance;
})
}
这样我们的ropsten网络的查询余额的东西就写好了
非常简单
现在来测试一下
然后随便找一个用户地址
比如
0xaFad1D75b685C14d8B48006286E5da00234F96F8
然后查询一下
成功
注意:本文归作者所有,未经作者允许,不得转载