开启Ganache，搭建好本地的测试链
ganache链接到metamask
要注意这个搭建过程是把ganache链接到metamask而不是连接到remix 具体来说就是ganache链接到metamask上，然后remix通过injected web3的方式又把metamask的账户链接remix上
remix里的run设置里改成injected web3，表示用metamask注入的web3
remix里编辑简单的智能合约并部署
pragma solidity ^0.4.23; contract InfoContract { string name; uint age; function setInfo(string _name, uint _age) public { name = _name; age = _age; } function getInfo() public view returns (string, uint) { return (name, age); } }把编译后的abi复制一下到infocontract_abi.js文件里 文件内容var infoContractABI = 复制的json格式的abi
编辑index.css
body { background-color: #F0F0F0; } #info { padding: 20px; background-color: #FFF; } #button { width: 100px; }前端代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>First Dapp demo</title> <link rel="stylesheet" type="text/css" href="index.css"> <script src="infocontract_abi.js"></script> <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script> <script src="jquery.js"></script> </head> <body> <div class="content"> <h1>First Dapp demo</h1> <h2 id="info"></h2> <br /> <label>姓名: </label> <input id="name" type="text"> <br /> <label>年龄: </label> <input id="age" type="text"> <br /><br /> <button id="button">更新</button> </div> <script type="text/javascript"> 这里还有一部分代码，因为这这部分代码卡了4天，猜猜是什么 console.log(web3); var infoContract = web3.eth.contract(infoContractABI); var info = infoContract.at('0x4594bede91b5353c6ee1b1cd7f8179750fe7844b'); info.getInfo(function(error, result) { if (!error) { $('#info').html(result[0] + '(' +result + ') years old'); } }) $('#button').click(function() { var name = $('#name').val(); var age = $('#age').val(); info.setInfo(name, age, function(error, result) { if (!error) { console.log('set ok'); } }) }) </script> </body> </html>然后运行apache服务器。 访问页面就会显示合约的状态，也可以通过表单来修改合约的状态，但是要付gas。
