[区块链笔记8] 前端js通过metamask的web3与智能合约交互

不羁岁月 提交于 2020-08-05 02:44:47

注意:这是一篇没有任何营养的笔记

准备阶段

truffle框架搭建
编写solidity代码
编辑迁移文件
编辑truffle-config.js文件
truffle编译
启动Ganache
truffle部署
ps:前几篇笔记里有搭建过程






Ganache与metamask链接

把ganache的12个单词复制到metamask里设置密码
设置metamask网络到http://127.0.0.1:7545
完成链接

前端页面

未完成,因为遇到bug了
在truffle console里面使用的语句到了前端js里面就完全失效,真的已经无语了。这个破东西整了一天,各种百度最后还是没有成功。希望有明白怎么回事的大佬评论区留言(估计不会有人回答的)
ps:等以后再回来做这部分

还是先说一下菜鸡这一天在整的东西吧, 希望大家帮忙看一看,bug在文末说明


先把solidity源码放到remix里面编译一下,拿到他的ABI,放到一个js文件里去。

然后就编写前端代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>front-web</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="web3.min.js"></script>
    <script type="text/javascript" src="testcontract_abi.js"></script>
</head>
<body>
	<h4>账号: <span id="account"></span></h4>
	<hr>
	<div id="content">
		<h4>智能合约: Test</b> </h4>
        <p>获取智能合约中的x值: <span id="value"></span></p>
        
        <form role="form">
        	<h4>设置x值</h4>
            <input id="newValue"  type="text"></input>
            <input type="button" name="submit" value="提交"/>
        </form>
	</div>

	<script type="text/javascript">
		var testContract;
		var userAccount;
		function startApp() {
			var TestAddress = 'xxxxxxxxxxxxxxxxxxxxxxxx';
			var test = web3.eth.contract(testContractABI);
			testContract = test.at(TestAddress);
			//userAccount = web3.eth.accounts[0];
			// var accountInterval = setInterval(function() {
			// 	// Check if account has changed
			// 	if (web3.eth.accounts[0] !== userAccount) {
			// 		alert('user account changed');
			// 	}
			// }, 100);
			updateValue();
		}
		function updateValue() {
			testContract.getX(function(err, result) {
				if (err) {
					alert('error');
				} else {
					$('#value').html(result);
				}
			});
		}
		window.addEventListener('load', function() {
			// Checking if Web3 has been injected by the browser (Mist/MetaMask)
        	if (typeof web3 !== 'undefined') {
        		// Use Mist/MetaMask's provider
          		web3 = new Web3(web3.currentProvider);
        	} else {
        		alert('please install MetaMask');
        	}
        	startApp();
		})
	</script>
</body>
</html>

第1个bug

web3.eth.accounts[0] 这个东西总是undefine。
百度了好多,有的说需要用异步调用,有的说要用函数来获取,都没有成功。
但是这个在truffle console下面就可以执行啊。难道这两个web3不是一个文件里的么。

第2个bug

想调用getX函数,结果总是返回一个对象,对象里面也没有返回值。又整了好久,还是没有整出来。
我想骂人了、。
我的solidity代码是这样的。。。。。。。。。。。。。。。。

pragma solidity ^0.4.23;
contract Test {
	int x = 5;	
	function getX() public view returns (int) {	
		return x;
	}
	function setX(int _x) public {
		x = _x;
	}
}

今日总结

学区块链早晚得学傻了!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!