[區塊鏈筆記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