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 在瀏覽器中與智能合約進行交互的簡單示例，目的是理解前端代碼是如何與智能合約進行交互的。
