愿码ChainDesk-【以太坊钱包开发 十】浅出：如何实现以太币转账

1. 获取以太币

本章主要内容是以太币转账交易，所以前提条件是要拥有以太币（才能转账）。

以太币数量是记录在账号地址上的，账号在不同网络间的以太币余额是不同步的，主要包含：

主网

Kovan测试网络

Ropsten测试网络

Rinkeby测试网络

本地私有网路

比如你的账号

0xbb5c219853cd0c8b86f463f9b7b480447bcfb57e

在Ropsten测试网络上拥有100ETH，而它在主网上的ETH可能为0，也就是说其它网络上的ETH余额与Ropsten上拥有100ETH没有一点关系，他们之间的资源不会共享，当然，也就在不同网络间不能转账。

但是账号在各个网络中都是可用的，账号的公钥私钥在各个网络也不会发生变化。比如您在Kovan测试网络创建的账号，在主网和Ropsten测试网络中也能向这个账号地址进行交易。

回到我们问题，如何获取以太币？主要有以下三种方式：

别人给您的账号地址转账获得

挖矿获得

测试网络：主动索取

在本教程中我们学习的重点是钱包开发，因此我们使用其中的Kovan测试网络获取以太币（因为私网没有搭建，在主网交易需要花费gas），采用最后种途径：主动索取。在Kovan测试网络下索取以太币的操作步骤在MetaMask章节作出了详情说明，若还未获取到ETH请先查看该章节内容。

2. 官方：发送签名后的交易

image.png 

image.png 

image.png 

image.png 

二、项目源码一：显示账号信息以及以太币信息

先将账号信息显示在前端页面再实现转账业务功能，即先实现之前注释的解锁账号完成后调用的

configAccountInfo()

方法，同时取消注释（通过三种方式解锁成功后都有调用，都需取消注释）。

1. transaction.html

编辑views文件夹下的transaction.html文件，实现显示账号信息。

image.png 

2. wallet.js

编辑static文件夹下的wallet.js文件，前端解锁账号成功后设置显示账号信息的元素。

image.png 

三、项目源码二：以太币转账

在前面的教程中我们通过了三种方式去解锁账号，解锁账号后就可以来实现下面的转账交易，首先转以太币。

1. transaction.js

编辑controllers文件夹下的transaction.js文件，后端实现以太币转账。

image.png 

2. router.js

将发送转账交易的接口绑定到路由。

image.png 

3. transaction.html

编辑views文件夹下的transaction.html文件，实现前端发送转账交易的页面，转账完成后显示交易hash。

image.png 

4. wallet.js

编辑static文件夹下的wallet.js文件，前端处理以太币转账交易的网络请求，另外需要设置提交表单时传递的address、privatekey。

image.png 

四、项目运行效果

image.png 

项目源码Github地址

版权声明：博客中的文章版权归博主所有，未经授权禁止转载，转载请联系作者（微信：lixu1770105）取得同意并注明出处。

本文地址: https://chaindesk.cn/witbook/1/16

愿码(ChainDesk.CN)——连接每个程序员的故事

“愿码”以线上社区线下实战型人才加速器相结合，立志打造全球最大的IT实战型多元化复合型人才生态圈。

免费技术交流群：263270946

技术提升、快速转型请关注微信公众号：愿码