2018-4-20 技术文章
Web3.js是以太坊官方的Javascript API，可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合，主要包括下面几个库：
-
web3-eth用来与以太坊区块链和智能合约交互 -
web3-shh用来控制whisper协议与p2p通信以及广播 -
web3-bzz用来与swarm协议交互 -
web3-utils包含了一些Dapp开发有用的功能
搭建测试链
在开发初期，我们并没有必要使用真实的公链，为了开发效率，一般选择在本地搭建测试链。在本文我们选择的Ganache（在此之前使用的是testrpc，Ganache属于它的升级版），一个图形化测试软件（也有命令行版本），可以一键在本地搭建以太坊区块链测试环境，并且将区块链的状态通过图形界面显示出来，Ganache的运行界面如下图所示。
Ganache
从图中可以看到Ganache会默认创建10个账户，监听地址是http://127.0.0.1:7545，可以实时看到Current Block、Gas Price、Gas Limit等信息。
创建智能合约
目前以太坊官方全力支持的智能合约开发环境是Remix IDE，我们在合约编辑页面编写如下代码：
pragma solidity ^0.4.21;
contract InfoContract {
string fName;
uint age;
function setInfo(string _fName, uint _age) public {
fName = _fName;
age = _age;
}
function getInfo() public constant returns (string, uint) {
return (fName, age);
}
}
接下来切换到 run 的 tab 下，将Environment切换成Web3 Provider，并输入我们的测试链的地址http://127.0.0.1:7545。
安装Web3
在这之前，先在终端创建我们的项目：
> mkdir info
> cd info
接下来使用 node.js 的包管理工具 npm 初始化项目，创建package.json 文件，其中保存了项目需要的相关依赖环境。
> npm init
一路按回车直到项目创建完成。最后，运行下面命令安装web.js：
> npm install web3
编写代码
在项目目录下创建index.html，在这里我们将创建基础的 UI，功能包括name和age的输入框，以及一个按钮，这些将通过 jQuery 实现：
<!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="main.css">
<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 {
// 连接端口如果不一样请自行更改
web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
}
web3.eth.defaultAccount = web3.eth.accounts[0]; //设置默认调用账户
//下面是定义AIP接口
var infoContract = web3.eth.contract([{"constant":true,"inputs":[],"name":"getInfo","outputs":[{"name":"","type":"string"},{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_fName","type":"string"},{"name":"_age","type":"uint256"}],"name":"setInfo","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}]);
var info = infoContract.at('/*部署合约的地址，自行填写*/');
info.getInfo(function(error, result){ //定义异步get请求
if(!error)
{
$("#info").html(result[0]+' ('+result[1]+' years old)');
console.log(result);
}
else
console.error(error);
});
$("#button").click(function() {
info.setInfo($("#name").val(), $("#age").val());
});
</script>
</body>
</html>
以上的代码就简单地实现了对合约中两个函数的调用，分别读取和显示name和age变量。
到此我们就完成了全部的代码，完整代码可以在 github 中找到。在浏览器中打开index.html测试效果如下图（输入名字和年龄后刷新）。
以上就是如何使用 Web3 在浏览器中与智能合约进行交互的简单示例，目的是理解前端代码是如何与智能合约进行交互的。