环境和工具

win10
Remix
VScode
Ganache-cli
web3

实现步骤

Remix上编译和部署合约

创建新合约InfoContract.sol并写入以下内容：

pragma solidity ^0.5.0;

contract InfoContract {
    
   string fName;
   uint age;
   
   function setInfo(string memory _fName, uint _age) public {
       fName = _fName;
       age = _age;
   }
   
   function getInfo() public view returns (string memory, uint) {
       return (fName, age);
   }   
}

写好合约内容之后，按照ganache-cli连接Metamask钱包里面步骤的内容操作。
在remix中进入Deploy&Run模块，选择Enviroment为Injected Web3，让部署的地址是第二步设置的账户的metamask钱包的地址，整个步骤就是：
a.修改环境Enviroment
b.编译合约
c.部署合约

在这里插入图片描述

VScode编写html界面和web3库调用合约

需要确保项目里面有web3库，如果没有则按照这篇文章描述的以下步骤进行安装：

进入项目，打开项目终端使用 node.js 的包管理工具 npm 初始化项目，创建package.json 文件，其中保存了项目需要的相关依赖环境。
npm init
一路按回车直到项目创建完成。最后，运行下面命令安装web.js：
npm install web3
注意：在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件，这个问题在 issue#1041中有体现，但官方好像一直没解决。不过可以在这里下载所需的文件，解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。

也可以使用npm list -g --depth 0命令查看是否全局安装过web3，如果有就直接开始下面的步骤：

在项目根目录下新建一个index.html文件，里面写入以下内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link rel="stylesheet" type="text/css" href="index.css">
//导入web3
  <script src="./node_modules/web3/dist/web3.min.js"></script>

</head>

<body>
  <div class="container">

    <h1>Info Contract</h1>

    <h2 id="info"></h2>

    <label for="name" class="col-lg-2 control-label">Name</label>
    <input id="name" type="text">

    <label for="name" class="col-lg-2 control-label">Age</label>
    <input id="age" type="text">

    <button id="button">Update Info</button>


  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

  <script>
//这里开始是用web3来调用合约的内容
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
    } else {
      // set the provider you want from Web3.providers
      web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));//这里填写你的ganache-cli/ganache监听地址
    }

    var contractABI = ;//你的合约ABI地址
    var contractAddress = "";//你的合约地址
    
	//创建合约实例
    var contract = new web3.eth.Contract(contractABI, contractAddress);

    $("#button").click(function () {
    //调用合约的写方法setInfo
      contract.methods.setInfo($("#name").val(), $("#age").val())
        .send({ from: '0x2f917e9aC2e0E73e056D3C0Ea250Bf8C68240333' })
        .then(console.log);
        
    //调用合约的读方法getInfo 
      contract.methods.getInfo().call((err, result) => {
        if (!err) {
          $("#info").html(result[0] + ' (' + result[1] + ' years old)');
          console.log(result);
        }
        else {
          console.log(err);
        }
      })
    });

  </script>

</body>

</html>

在index的同级目录下新建一个index.css，里面写：

body {
  background-color:#F0F0F0;
  padding: 2em;
  font-family: 'Raleway','Source Sans Pro', 'Arial';
}
.container {
  width: 50%;
  margin: 0 auto;
}
label {
  display:block;
  margin-bottom:10px;
}
input {
  padding:10px;
  width: 50%;
  margin-bottom: 1em;
}
button {
  margin: 2em 0;
  padding: 1em 4em;
  display:block;
}

#info {
  padding:1em;
  background-color:#fff;
  margin: 1em 0;
}