怎么使用Web3.js API 在页面中进行转账

技术怎么使用Web3.js API 在页面中进行转账这期内容当中小编将会给大家带来有关怎么使用Web3.js API 在页面中进行转账,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。如何

本期,边肖将在页面上为大家带来如何使用Web3.js API转账的信息。文章内容丰富,从专业角度进行分析和叙述。看完这篇文章,希望你能有所收获。

如何在页面中使用Web3.js API转账?

边肖在页面中介绍了如何使用Web3.js API进行转账,这是文档Web3.js 0.2x中文版和Demo在区块链全栈-Ethereum DAPP实际开发中的文章描述。

写在前面

在阅读本文之前,您应该了解Ethereum、智能合约和钱包的概念。如果你不懂,建议你先看看什么是以太琴。另外,你最好了解一些HTML和JavaScript的知识。

00-1010,实现这个接口非常简单,所以这里没有代码。您可以打开演示并右键单击以查看页面的源代码。

00-1010既然需要在页面中使用Web3.js API转账,那么首先要检查钱包是否安装在浏览器环境中,是否应该解锁。

首先检查是否安装了元掩码钱包:

window.addEventListener('load ',function(){ 0

if(typeofweb3!=='未定义'){ 0

web 3=new web 3(web 3 . current provider);

if(web 3 . CurrentProvider . IsMetaMask==true){ 0

//“元掩码可用”

}else{

//“非元掩码环境”

}

}else{

$('#env ')。html('Noweb3?需要安装https://metamask.io/'metamask/a!'。);

}

}MetaMask建议在加载窗口时检查MetaMask。当然,在没有安装MetaMask的时候,也可以指定一个节点Provider来创建web3,可以参考Web3.js文档来介绍Web3。

检查钱包是否解锁:在发送交易之前,我们应该首先检查当前钱包的一个状态,并检查钱包是否解锁(密码是否输入到元掩码中)。通常,我们使用eth下的getAccounts来检查,这将返回一个帐户列表。如果活期账户列表中有数据,说明钱包已经解锁,可以获取账户。如果账户获取的列表为空,则表示钱包未解锁。

您可以将以下代码添加到上述侦听器函数中:

web3.eth.getAccounts(函数(err,accounts){ 0

if(accounts . length==0){ 0

nbsp;            $("#account").html("请检查钱包是否解锁");
            } 
            });

发送交易

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

web3.eth.sendTransaction(transactionObject [, callback])

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

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

  • from : 就是从哪个账号发送金额

  • to : 发动到到哪个账号

  • value 是发送的金额

  • gas: 设置gas limit

  • gasPrice: 设置gas 价格

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

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

//  这里使用Metamask 给的gas Limit 及 gas 价
var fromAccount = $('#fromAccount').val();
var toAccount = $('#toAccount').val();
var amount = $('#amount').val();
// 对输入的数字做一个检查
if (web3.isAddress(fromAccount) &&
            web3.isAddress(toAccount) &&
            amount != null && amount.length > 0) {
    var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
    web3.eth.sendTransaction(message, (err, res) => {
        var output = "";
        if (!err) {
            output += res;
        } else {
            output = "Error";
        }
    }
}

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

运行测试

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

上述就是小编为大家分享的怎么使用Web3.js API 在页面中进行转账了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/65914.html

(0)

相关推荐

  • sqlserver手动执行计划(sqlserver的执行计划)

    技术怎样浅析SQL Server中执行计划的相关机制以及常见问题怎样浅析SQL Server中执行计划的相关机制以及常见问题,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能

    攻略 2021年12月20日
  • 精益求精是什么意思,精益求精的益是什么意思

    技术精益求精是什么意思,精益求精的益是什么意思精益求精精益求精是什么意思,比喻已经很好了,还要求更好。《论语·学而》“《诗》云:如切如磋,如琢如磨” 宋 朱熹 集注:“言治骨角者,既切之而复磋之;治玉石者,既琢之而复磨之

    生活 2021年10月20日
  • 如何在Android进行代理设置

    技术如何在Android进行代理设置这篇文章给大家介绍如何在Android进行代理设置,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Android代理设置步骤:1.打开你的Android设置。2.点

    攻略 2021年11月11日
  • 怎么使用flutter中Checkbox复选框的全选与删除

    技术怎么使用flutter中Checkbox复选框的全选与删除本篇内容介绍了“怎么使用flutter中Checkbox复选框的全选与删除”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大

    攻略 2021年10月29日
  • 馒头冷冻能保存多久,馒头一般保存多久还可以吃

    技术馒头冷冻能保存多久,馒头一般保存多久还可以吃你好!我是美食领域创作者娜小厨 ,很高兴可以为你解答问题馒头冷冻能保存多久。馒头属于发面类面食,内部结构宣软蓬松 气孔较多 。特别容易滋生细菌 。尤其是黄曲霉菌 。曲霉特别

    生活 2021年10月22日
  • 传输层协议与路由器

    技术传输层协议与路由器 传输层协议与路由器1、 TCP协议:
    面向连接的,可靠的进程到进程通信的协议
    TCP提供全双工服务
    2、UDP协议:
    无连接的不可靠的协议
    效率高
    3、TCP报文段U R G :

    礼包 2021年12月2日