用户环境检查7 y& o# A4 {+ [/ D- S
既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。6 z! M3 X3 Y  q
先检查是否安装了MetaMask钱包：. y' w* e& N8 p$ I. v4 @

1. window.addEventListener('load', function() {
   ! _1 T( m7 _0 n+ f
2.         if (typeof web3 !== 'undefined') {
   # Y/ ]- P# J/ E% m
3.             web3 = new Web3(web3.currentProvider);
   3 V6 A% t; U  O% l* D
4.             if (web3.currentProvider.isMetaMask == true) {
   8 h: F  y% L& E5 \6 V, ~  k
5.                 // "MetaMask可用"
   ; Z5 v3 u# `" y9 a9 @% h8 T# j
6.             } else {5 v1 D- h$ Y$ B+ E$ y6 q
   
7.                 // "非MetaMask环境": ~" z0 j9 f' N; ~
   
8.             }
   ) X3 W* R/ V$ T- v4 }5 \; V9 P( ~& d
9.         } else {
   ( V8 Z' ^+ M% B+ q! w9 n& P' I. Y# R+ }
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");
    : q/ t5 {" K, D: ]& _. F2 ^
11.         }; g+ k' j. `; O+ B- |
    
12. }

复制代码

0 s8 p5 U/ o2 E3 I# P* O4 e$ WMetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web39 \+ G% M6 T% ]9 Z4 p6 k. _7 c4 h
检查是否钱包已经解锁：/ A: m3 [  P+ I
我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。
- s- _( z, h5 X& p( k% l可以把下面的代码加到上面的监听函数中：4 c# Q8 ]! X( k9 T( R8 W5 V, {

1. web3.eth.getAccounts(function (err, accounts) {
   # H/ J: G, A* `  Q$ f9 b  Y: @* P+ D6 {
2.             if (accounts.length == 0) {
   7 e9 d! z  m! X3 K. T. ~8 e" f
3.                 $("#account").html("请检查钱包是否解锁");8 W# X1 c1 T+ ^+ u5 ^# E; ]
   
4.             } 3 F& J" s# {" F6 ~
   
5.             });

复制代码

* A  ]' ]3 z; L; _, G, d+ Q
发送交易, j/ D! y' X9 a4 Z
如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。/ L+ H* E& j/ M
web3.eth.sendTransaction(transactionObject [, callback])9 C% B1 Y" r2 e( K& }3 \
第二个参数是回调函数用来获得发送交易的Hash值。8 V' N$ I" J# u% A
第一个参数是一个交易对象，交易对象里面有几个字段：- o9 D4 {  A5 q$ G7 o
from : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格
! p' r' j$ U/ i" ^7 n3 Z' S- S$ L/ l3 W) R
如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。
' B4 u" J. i8 S, H在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。
5 t) k1 F# ?3 M% }  W因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：- i+ C2 U* d# S. U

1. //  这里使用Metamask 给的gas Limit 及 gas 价
   1 o# H7 G, I& o
2. var fromAccount = $('#fromAccount').val();
     q* w& m$ S! j& w9 Z5 B
3. var toAccount = $('#toAccount').val();
   7 T' l) G% ~0 q
4. var amount = $('#amount').val();
   1 x& D2 v3 s2 k) ~/ F$ B
5. // 对输入的数字做一个检查
   5 S" ?& m, ^$ f, P+ ~
6. if (web3.isAddress(fromAccount) &&
   ( ]! a; E/ r1 A7 s$ J
7.             web3.isAddress(toAccount) &&
   5 A5 }4 e- m8 d7 T: S5 i$ i
8.             amount != null && amount.length > 0） {: I9 g2 o6 Q7 E" Z2 V4 [
   
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
   " ^" L6 V/ Y1 n' i# j
10.     web3.eth.sendTransaction(message, (err, res) => {
    . ]! W  }( K/ E+ Q; k; r1 q
11.         var output = "";
    3 W1 g& m. U# e/ m( S
12.         if (!err) {6 ?+ |, N  N! \% @( \+ D% Q! P
    
13.             output += res;
      Q$ R- E! L0 w& _. b& f
14.         } else {+ {: u/ A" x7 I7 g* D4 ?
    
15.             output = "Error";
    & w  V1 [" I* B' Z4 P5 o1 U: s: [
16.         }
    $ J# S: i( ]1 C" C
17.     }: N  t0 G1 b$ l8 V- g' B  h. Q
    
18. }

复制代码

! F- b2 D  ]. p  f! B$ z补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。
$ f; g# t! z8 @, f2 n2 @$ X; S& h4 S' m/ O- N# V' j# F- I
运行测试! u, `4 ]! p# o) `% b$ X  d8 H
需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。4 m+ }6 H0 f9 w2 C; f! a9 F' J+ H( d
. u$ F% J) A/ n, J1 Z+ y7 H) ~0 k! F
因此需要把编写的代码放置到web服务器的目录下，自己试验下。
1 f/ e  k( A" p! ?9 b9 t0 y$ i& y