合约外部访问

华天下之大软

已于 2024-05-27 23:43:51 修改

阅读量857

点赞数 3

分类专栏：区块链文章标签：区块链

于 2024-05-25 21:24:08 首次发布

本文链接：https://blog.csdn.net/qq_37117521/article/details/139187427

版权

区块链专栏收录该内容

18 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    合约外部调用的原理 
ABI ：Application Binary Interface（应用二进制接口）
读操作与写操作的不同调用方式
 
web3js 
浏览器调用合约的js库
官方文档：https://web3js.readthedocs.io
两种方式：直接引用和nodejs方式
 
开发过程 
环境搭建
MetaMask初始化
ABI数据
读操作
写操作
 
工具与环境 
HFS web服务器（启动服务）
Gannache-cli
VSCode
 
代码参考，引用的是Remix官方示例的Owner.sol的合约 
login.html （合约地址可以通过Remix获取）<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">

	<title>Insert title here</title>
	<script src="web3.min.js"></script>
	<script src="owner.js"></script>
	<style>
		body {
			background-color: #5544aa;
			background-image: url('images/b9.jpg');
			text-align: center;
		}

		.div {
			margin: 0 auto;

			border: 1px solid #F00;
			position: absolute;
			top: 50%;
			left: 40%;
		}

		.button {
			background-color: #4CAF50;
			/* Green */
			border: 3;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 24px;
			margin: 4px 2px;
			cursor: pointer;
			align: center;
		}
	</style>
</head>

<body>

	<script type="text/javascript">
		var myaccounts;
		window.addEventListener('load', function () {
			if (!window.web3) {//用来判断你是否安装了metamask
				window.alert('Please install MetaMask first.');
				return;
			}
			if (window.ethereum) {
				ethereum.enable().then(function (accounts) {
				myaccounts = accounts;
				window.web3 = new Web3(ethereum);
				// window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
				})
					.catch(function (error) {
						// Handle error. Likely the user rejected the login
						console.error(error)
					});
			}
		});

		function getOwner() {
			var contractAddress = "0x157AA1c65518D6e1f2d00Ea75593B73A4CD41dE2";

			var OwnerFactory = new web3.eth.Contract(owner_abi, contractAddress);
			var getOwner = OwnerFactory.methods.getOwner();
			getOwner.call(function (err, res) {
				if (err) {
					console.log("An error occured", err)
					return
				}
				alert("The owner is: " + res)
			});
		}

		function changeOwner() {
			alert("changeOwner")
			var newowner = document.getElementById("newowner").value;
			var contractAddress = "0x157AA1c65518D6e1f2d00Ea75593B73A4CD41dE2";
			var OwenerContract = new web3.eth.Contract(owner_abi,contractAddress);
	    	var trans = OwenerContract.methods.changeOwner(newowner);

		   	var me = myaccounts[0];
			trans.send({from:me}).on('transactionHash', function(hash){
                console.log(hash);
			})
			.on('receipt', function(receipt){
			   console.log(receipt);
			})
			.on('confirmation', function(confirmationNumber, receipt){
				alert(confirmationNumber)
				  console.log(confirmationNumber);
			})
			.on('error', function(error, receipt) {
				console.log(error);
			});
		}
		function sign() {
			alert("sign")

		}
	</script>
	<div class="div">
		<input type="button" onclick="javascropt:sign()" class="button" value="签名"></input>
		<input type="button" onclick="javascropt:getOwner()" class="button" value="读合约数据"></input><br />
		<input type="button" onclick="javascropt:changeOwner()" class="button" value="改变owner"></input>
		<input type="text" id="newowner"></input>

	</div>
</body>

</html>
 
owner.js (Owner的BalanceManager_metadata.json里获取)
	    var owner_abi = [
		{
			"inputs": [],
			"stateMutability": "nonpayable",
			"type": "constructor"
		},
		{
			"anonymous": false,
			"inputs": [
				{
					"indexed": true,
					"internalType": "address",
					"name": "oldOwner",
					"type": "address"
				},
				{
					"indexed": true,
					"internalType": "address",
					"name": "newOwner",
					"type": "address"
				}
			],
			"name": "OwnerSet",
			"type": "event"
		},
		{
			"inputs": [
				{
					"internalType": "address",
					"name": "newOwner",
					"type": "address"
				}
			],
			"name": "changeOwner",
			"outputs": [],
			"stateMutability": "nonpayable",
			"type": "function"
		},
		{
			"inputs": [],
			"name": "getOwner",
			"outputs": [
				{
					"internalType": "address",
					"name": "",
					"type": "address"
				}
			],
			"stateMutability": "view",
			"type": "function"
		}
	];

	var abi =  [

		{
			"inputs": [],
			"stateMutability": "nonpayable",
			"type": "constructor"
		},
		{
			"anonymous": false,
			"inputs": [
				{
					"indexed": true,
					"internalType": "address",
					"name": "oldOwner",
					"type": "address"
				},
				{
					"indexed": true,
					"internalType": "address",
					"name": "newOwner",
					"type": "address"
				}
			],
			"name": "OwnerSet",
			"type": "event"
		},
		{
			"inputs": [
				{
					"internalType": "address",
					"name": "newOwner",
					"type": "address"
				}
			],
			"name": "changeOwner",
			"outputs": [],
			"stateMutability": "nonpayable",
			"type": "function"
		},
		{
			"inputs": [],
			"name": "getOwner",
			"outputs": [
				{
					"internalType": "address",
					"name": "",
					"type": "address"
				}
			],
			"stateMutability": "view",
			"type": "function"
		}
	]
 
web3.min.js

                

华天下之大软

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
合约外部访问

合约外部调用的原理ABI ：Application Binary Interface（应用二进制接口）读操作与写操作的不同调用方式web3js浏览器调用合约的js库官方文档：https://web3js.readthedocs.io两种方式：直接引用和nodejs方式开发过程环境搭建MetaMask初始化ABI数据读操作写操作
复制链接

扫一扫