Previous We deployed a test network contracts Ropsten
We do this contract can only be accessed by remix
So how do we create a Web page to interact with this contract it Eth
We need to use Web3
node of a packet is web3
So we need to use node, install it yourself
Let's write a small test project
Any user can query Ropsten balance
Create a folder
Then npm init
Initialization is complete,
Generated file package.json
Then we install web3
npm install web3 --save
Installed
Then we have to write a simple html page
<!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>
We just installed a web3,
Now the introduction of what web3
<script src="node_modules/web3/dist/web3.min.js"></script>
Then we have to write a js, operation 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;
})
}
Such balance inquiries things our ropsten network was written
very simple
Now to test
Then just find a user's address
such as
0xaFad1D75b685C14d8B48006286E5da00234F96F8
Then check what
success