既然需要使用Web3.js API 在页面中进行转账, 首先应该检查在浏览器环境有没有安装好钱包,并且钱包应该是解锁状态。6 k# b! _% k6 _- f# n- |1 u9 C
先检查是否安装了MetaMask钱包:8 I5 e+ J+ ], C5 h" E5 `
- window.addEventListener('load', function() {; @3 g$ n: P+ Y; K) {. y x
- if (typeof web3 !== 'undefined') {8 k! j# Z; ^2 k5 I! u
- web3 = new Web3(web3.currentProvider);! o1 j* `7 F3 |9 N5 e7 u
- if (web3.currentProvider.isMetaMask == true) {+ f6 \9 @6 k" B* C$ {" u
- // "MetaMask可用"# ~% O1 N: O' G# O3 ? }' [
- } else {
- // "非MetaMask环境"# ~7 ~! ^5 Q) a w7 C( H
- }% W4 F, ?/ {. M5 f, I
- } else {
- $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");
- }
- }
MetaMask推荐在window加载时,进行MetaMask的检查,当然在没有安装MetaMask时,也可以指定一个节点Provider来创建web33 s b0 |/ r- t5 `& n
检查是否钱包已经解锁:
我们在发送交易之前应该先首先检查一下当前钱包的一个状态,检查钱包是否解锁(是否输入了密码进入了MetaMask),通常使用eth下面的getAccounts来进行检查,getAccounts是会返回账号的一个列表,如果当前账号列表里面有数据的话,说明钱包已经解锁可以获得到账号,如果账号拿到的列表是空的话,那么说明钱包没有解锁。
可以把下面的代码加到上面的监听函数中:9 Z5 y" W# `; u, C( h) L1 m- _
- web3.eth.getAccounts(function (err, accounts) {1 {8 M2 X2 ~# k& D1 k
- if (accounts.length == 0) {
- $("#account").html("请检查钱包是否解锁");6 e: j8 @) g& q6 n) z
- } ! _8 n, [4 e6 u# q& G( ^
- });
发送交易6 e/ v/ ^ u+ @* H" w/ U
如果MetaMask钱包是解锁的,我们就可以来发送交易,发送交易使用sendtransaction这个方法。" }+ R; _ i! W* S
web3.eth.sendTransaction(transactionObject [, callback])& M/ y7 \3 z" \
第二个参数是回调函数用来获得发送交易的Hash值。
第一个参数是一个交易对象,交易对象里面有几个字段:
from : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格
; g. z2 v) C- s$ H
如果from没有的话,他就会用当前的默认账号, 如果是转账to和value是必选的两个字段。
在发送交易的时候弹出来MetaMask的一个授权的窗口,如果我们gas和gasPrice没有设置的话,就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话,MetaMask就会使用我们设置的gas。. k; K8 ]8 o, S1 {& \$ h
因此在发送交易的时候,关键是构造这样一个交易对象,JavaScrpt代码如下:
- // 这里使用Metamask 给的gas Limit 及 gas 价
- var fromAccount = $('#fromAccount').val();
- var toAccount = $('#toAccount').val();
- var amount = $('#amount').val();
- // 对输入的数字做一个检查" D8 b$ F1 b' `! b) h% P
- if (web3.isAddress(fromAccount) &&2 T" e3 ]: Y+ l- V6 q. j) O4 t3 O
- web3.isAddress(toAccount) &&
- amount != null && amount.length > 0) {* p, J F4 J* j+ s2 ~) |% k
- var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};! _( X# U6 M: E7 s& Z; n" R
- web3.eth.sendTransaction(message, (err, res) => {5 q$ F; l' L# Q4 k X, k
- var output = "";+ Q' }; `/ L q' C7 S! {
- if (!err) {
- output += res;" m! d2 f6 }+ w6 K
- } else {) m m# M2 q* q6 g9 w
- output = "Error";0 ~4 j6 N L% P
- }# w* `4 C+ \1 S, n( z. E
- }
- }
补充说明:$('#fromAccount').val()是使用JQuery用来获取用户输入内容,其次应该在实际构造发送交易之前对输入的参数做一个判断,web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账,消耗的gas 是固定的21000。# I' ]( G4 A/ G/ x
& d, q/ S, U# d! s6 K0 F
运行测试# M0 }& k3 b% d% c, v$ P
需要注意一点的是,由于安全原因,MetaMask只支持站点方式访问的页面,即通过http:// 来访问页面,在浏览器中通过file:// + 文件地址的方式是不行的。
因此需要把编写的代码放置到web服务器的目录下,自己试验下。