如何用Web3.jsAPI在页面中进行转账

本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明。

写在前面

阅读本文前,你应该对以太坊、智能合约、钱包的概念有所了解,如果你还不了解,建议你先看以太坊是什么 除此之外,你最好还了解一些HTML及JavaScript知识。

转账UI 页面的编写

转账UI主体的界面如图:

实现这个界面很简单,这里就不代码了。大家可以打开Demo,右击查看页面源码。

用户环境检查

既然需要使用Web3.js API 在页面中进行转账, 首先应该检查在浏览器环境有没有安装好钱包,并且钱包应该是解锁状态。

  1. 先检查是否安装了MetaMask钱包:

MetaMask推荐在window加载时,进行MetaMask的检查,当然在没有安装MetaMask时,也可以指定一个节点Provider来创建web3,可以参考Web3.js 文档引入web3

  1. 检查是否钱包已经解锁:

我们在发送交易之前应该先首先检查一下当前钱包的一个状态,检查钱包是否解锁(是否输入了密码进入了MetaMask),通常使用eth下面的getAccounts来进行检查,getAccounts是会返回账号的一个列表,如果当前账号列表里面有数据的话,说明钱包已经解锁可以获得到账号,如果账号拿到的列表是空的话,那么说明钱包没有解锁。

可以把下面的代码加到上面的监听函数中:

发送交易

如果MetaMask钱包是解锁的,我们就可以来发送交易,发送交易使用sendtransaction这个方法。

第二个参数是回调函数用来获得发送交易的Hash值。

第一个参数是一个交易对象,交易对象里面有几个字段:

  • from : 就是从哪个账号发送金额
  • to : 发动到到哪个账号
  • value 是发送的金额
  • gas: 设置gas limit
  • gasPrice: 设置gas 价格

如果from没有的话,他就会用当前的默认账号, 如果是转账to和value是必选的两个字段。 在发送交易的时候弹出来MetaMask的一个授权的窗口,如果我们gas和gasPrice没有设置的话,就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话,MetaMask就会使用我们设置的gas。

因此在发送交易的时候,关键是构造这样一个交易对象,JavaScrpt代码如下:

补充说明:$('#fromAccount').val()是使用JQuery用来获取用户输入内容,其次应该在实际构造发送交易之前对输入的参数做一个判断,web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账,消耗的gas 是固定的21000。

运行测试

需要注意一点的是,由于安全原因,MetaMask只支持站点方式访问的页面,即通过http:// 来访问页面,在浏览器中通过file:// + 文件地址的方式是不行的。 因此需要把编写的代码放置到web服务器的目录下,自己试验下。

线上的Demo地址为:https://web3.learnblockchain.cn/transDemo.html

想好好系统学习以太坊DApp开发,这门视频课程以太坊DAPP开发实战不容错过。

深入浅出区块链 - 系统学习区块链,打造最好的区块链技术博客。

原文发布于微信公众号 - 深入浅出区块链技术(blockchaincore)

原文发表时间:2018-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏又建一梦

——HyperLeger Fabric智能合约(链码)

在Fabric中,智能合约也称为链码(chaincode),分为用户链码和系统链码。系统链码用来实现系统层面的功能,包括系统的配置,用户链码的部署、升级,用户交...

1420
来自专栏区块链入门

第二十八课 区块链应用DAPP如何探测MetaMask的账号和登录状态?

目前PC版区块链DAPP应用中,大部分程序都是使用MetaMask作为去中心话钱包进行交易操作。 那么,作为程序员,如何实现类似的功能呢?通过本文学习,你可以...

2333
来自专栏极客编程

java开源库web3j的以太坊过滤器(filter)和智能合约事件(event)教程

web3j过滤器提供以太坊网络发生的某些事件的通知,对java和安卓程序员来说很有用。在Ethereum以太坊中支持三类过滤器:

2434
来自专栏猛牛哥的博客

门罗币WINDOWS版挖矿软件缺失DLL文件下载

1663
来自专栏黑白安全

ARP断网攻击 针对网吧

1261
来自专栏信安之路

Red Team 工具集之攻击武器库

上图是一个 Red Team 攻击的生命周期,整个生命周期包括:信息收集、攻击尝试获得权限、持久性控制、权限提升、网络信息收集、横向移动、数据分析(在这个基础上...

1880
来自专栏极客编程

web3j开发java或android以太坊智能合约快速入门

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成...

1483
来自专栏吴柯的运维笔记

以太通道的配置原则

以太通道-Etherchannel -配置以太通道实现端口捆绑增加带宽和可靠性。 以太通道的作用: -多条线路负载均衡,提高带宽; -容错,当一条线路失效时,...

3444
来自专栏沈唁志

PHP开发规范之使用phpcbf脚本自动修正代码格式

在前段时间的文章:在PhpStorm中安装使用PHP_CodeSniffer编码规范检查工具中提到过phpcbf脚本

2331
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯TMQ】Google 是如何做 Chrome 浏览器的性能测试的?

近期研究了一下chrome的强大的性能测试工具telemetry,收获颇丰,现简单介绍一下telemetry的测试框架。telemetry中的很多方法都正在逐步...

5690

扫码关注云+社区

领取腾讯云代金券