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

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

文章目录

准备阶段
Ganache与metamask链接
前端页面
第1个bug
第2个bug
今日总结

准备阶段

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;
	}
}

今日总结

学区块链早晚得学傻了！