如何使用Web3在浏览器中与智能合约进行交互

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 实现：

    
    
    
    

    

    



    


        
Info Contract

        


        Name
        

        Age
        

        Update Info


    

    

    

以上的代码就简单地实现了对合约中两个函数的调用，分别读取和显示name和age变量。

到此我们就完成了全部的代码，完整代码可以在 github 中找到。在浏览器中打开index.html测试效果如下图（输入名字和年龄后刷新）。

---

以上就是如何使用 Web3 在浏览器中与智能合约进行交互的简单示例，目的是理解前端代码是如何与智能合约进行交互的。

---

转载于:https://www.cnblogs.com/tokenpai/p/9109623.html