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

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

文章目录

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

准备阶段

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

html

Ganache与metamask连接

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

前端

前端页面

未完成，由于遇到bug了
在truffle console里面使用的语句到了前端js里面就彻底失效，真的已经无语了。这个破东西整了一天，各类百度最后仍是没有成功。但愿有明白怎么回事的大佬评论区留言(估计不会有人回答的)
ps:等之后再回来作这部分

java

仍是先说一下菜鸡这一天在整的东西吧， 但愿你们帮忙看一看，bug在文末说明jquery

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

而后就编写前端代码网络

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

今日总结

学区块链迟早得学傻了！ide