咸鱼

咸鱼是以盐腌渍后，晒干的鱼

0%

7.2、基于H5通过web3.js交易代币

发表于 更新于 分类于

后来看到这篇文章 合约交互 摘录：

标准的与以太坊网络交互的方法是通过以太坊官方构建的Web3库。尽管这个库非常有用，但使用其提供接口与合约交互有些困难，特别是以太坊的新手。为降低学习曲线，Truffle使用Ether Pudding库，它也是基于Web3的基础之上，目的是为了让交互更简单。

环境

基于《6.1、基于truffle框架部署完整合约(发布Token代币).md》的环境，启动Ganache-Gui，并且用truffle编译和部署好合约。

拷贝出 abi 和 合约地址 生成 合约实例，就可以通过 web3.js 调用合约的函数。

代码

以下是js部分代码，其实就是一个空的html，只要引入web3.js就可以运行了。

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script>
	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());
    }

	//合约的 abi 信息
	var abi =[太长了，不写];
    //合约的地址
    var contractAddress = '0x78fa7e19c947457396b9300133e68a8783d5cc87';

    var Mycontract = web3.eth.contract(abi).at(contractAddress);
    var coinbase = web3.eth.coinbase;

    Mycontract.totalSupply(function(error, result){
        if(!error){
            console.log("查询发行量:"+result.toNumber());
        }else console.error(error);
    });
    var accout0 = '0x08b3142691c5cfbf78857cef6c971fffeb7b78cf';
    Mycontract.balanceOf(accout0,function(error, result){
        if(!error){
            console.log("accout0 余额:"+result.toNumber());
        }else console.error(error);
    });

    web3.eth.defaultAccount= coinbase;

    var toaddress = '0x3d2eed83e5ca9c254734c7c642ef1c805c07a40a';

    Mycontract.balanceOf(toaddress,function(error, result){
        if(!error){
            console.log("accout1 余额:"+result.toNumber());
        }else console.error(error);
    });

    web3.eth.defaultAccount= web3.eth.coinbase;

    var mon = '10000000000000000000';
    if(web3.isAddress(toaddress)){

        console.log("交易");
        Mycontract.transfer(toaddress, mon ,function(error, result){

            console.log("交易回调");
            if(!error){
                console.log("交易成功");
                console.log("transfer:"+result);
            }else{
                console.log("交易错误");
                console.error(error);
            }
        });
    }else {
        console.log("非法地址");
    }
</script>

调用对应关系

1
2
Mycontract.balanceOf 对应着合约上的函数 function balanceOf(address _owner)
Mycontract.transfer 对应着合约上的函数 function transfer(address _to, uint256 _value)

运行结果分析

  1. 根据我们的合约，部署合约时的初始发行代币是存入到执行部署合约的账号下（默认是 accout[0]）

  2. Mycontract.transfer居然需要MetaMask确认交易（登录了accout[0]），这是什么情况，肯定哪里不对？退出登录就一直报错：invalid address

  3. MetaMask 登录了 accout[0] 确认提交交易之后，ganache-cli 打印以下log，但是币一直转不过去，MetaMask也一直提示错误Taking too long? Retry with a higher gas price here

    1
    2
    3
    4
    5
    6
    #ganache-cli  
    eth_sendRawTransaction
    Transaction: 0xc64173b80b34e946438d2502e778baf4a3af300d9c4cb0aebd74a5acb5c4f499
    Gas usage: 36511
    Block Number: 7
    Block Time: Fri Jun 08 2018 22:58:03 GMT+0800 (中国标准时间)

  4. 换一个浏览器打开该页面，成功打印以下log，看来MetaMask 影响了呀。

    1
    2
    3
    4
    5
    6
    7
    8
    #web控制台
    交易
    查询发行量:1e+22
    accout0 余额:9.98e+21
    accout1 余额:20000000000000000000
    交易回调
    交易成功
    transfer:0x7832f4c0c251ee2072d4f20619988436807589a9c4159385364b597b9d727836

  5. 至此已完成一个Demo。

  6. 基于以上代码，稍微改造一下，就实现了一个拨币的页面了

    代码：tag v1.0

    效果如图：

    拨币.png