用户环境检查
, p# m4 i) w- F- w; l8 Y* w- L既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。
/ y! q( v4 i0 a1 ^- Q& G4 ~先检查是否安装了MetaMask钱包：- k: w8 c, D" Y) L

1. window.addEventListener('load', function() {
   7 I$ m) s  ?6 u% R* r+ v$ ]0 V
2.         if (typeof web3 !== 'undefined') {/ w3 X. a% s" g; B1 t6 N- `# o
   
3.             web3 = new Web3(web3.currentProvider);: w7 c5 d+ v" e0 |' U  C
   
4.             if (web3.currentProvider.isMetaMask == true) {
     @, m) t# r/ Q$ e( y, q
5.                 // "MetaMask可用"
   $ F4 t: l, a( ?9 |9 f+ m5 W
6.             } else {
   + D6 n" f; o( {' U' x" `
7.                 // "非MetaMask环境"" A, z, l- x' H8 A7 `) t  M: q
   
8.             }
   ( k* |" c+ `: q6 x8 T+ a: c' y: \
9.         } else {, z7 v2 d+ j, U2 L/ v, z
   
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");
    / w- r) d2 N, g6 m0 Q0 E
11.         }
    , R6 U/ o- c: W/ u
12. }

复制代码

/ m' M  l$ _% ?
MetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web3& \' v1 \7 j+ X6 P
检查是否钱包已经解锁：
  P  L; x. _, d% t$ X- e我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。7 X  ~+ E# C9 I; \
可以把下面的代码加到上面的监听函数中：" K3 |  ?+ z7 R8 K" v8 t

1. web3.eth.getAccounts(function (err, accounts) {
   9 q3 a4 q/ l( u; d: _' k
2.             if (accounts.length == 0) {- A  v. R, _6 Q3 D2 h1 |8 X
   
3.                 $("#account").html("请检查钱包是否解锁");0 T: c3 X9 `1 k6 X0 c1 i
   
4.             }
   % o, B, r1 a% J1 j
5.             });

复制代码

& y4 ?3 i* E, [. L3 [9 }) |/ ~! v, n
发送交易
, }4 t( ]5 _! s, {7 B如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。% N1 s# K7 ?9 S; H- j9 q9 v
web3.eth.sendTransaction(transactionObject [, callback])0 T- ?1 i5 i0 z0 N: n& G9 ~9 J( l8 o
第二个参数是回调函数用来获得发送交易的Hash值。
- a8 x5 F' u( C+ D- E第一个参数是一个交易对象，交易对象里面有几个字段：
7 l& r) `2 X: [6 x, H  vfrom : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格0 A/ i) K( e+ Y* k5 t

6 p) e# h5 P9 h4 n5 [如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。/ i$ q+ S& j) W, b) x
在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。# ^- L1 P2 v( s) U
因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：
, I3 E* q2 j+ y9 {* a4 [$ E

1. //  这里使用Metamask 给的gas Limit 及 gas 价
   1 V/ G( f  I& g9 m2 d; b& a
2. var fromAccount = $('#fromAccount').val();
   9 ?) B8 G6 J) T' n7 j
3. var toAccount = $('#toAccount').val();4 T+ z2 g  D% P) d; R0 y
   
4. var amount = $('#amount').val();* t% E4 k7 G! v9 K! g6 [
   
5. // 对输入的数字做一个检查& A: s9 `  |# d) }/ ]
   
6. if (web3.isAddress(fromAccount) &&
   % h+ m* Q* N  y0 J! }' e7 I
7.             web3.isAddress(toAccount) &&
   + ]  H% s/ D- F; p
8.             amount != null && amount.length > 0） {
   7 o2 h' J: L+ }7 k
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
   8 G+ }3 {, n% s( P2 u1 L! }
10.     web3.eth.sendTransaction(message, (err, res) => {
    5 J' R+ M  q0 h0 c  M
11.         var output = "";- E! O: F1 W/ U5 z) R/ K+ n' N
    
12.         if (!err) {
    7 ^% C7 }) {2 S+ a4 n" d
13.             output += res;( I8 Y& h+ F+ y/ M5 L) K- S* g
    
14.         } else {9 R3 v6 a- o' a5 c' I. z
    
15.             output = "Error";
    " M$ |7 e& Q: x! M$ Z- X6 C
16.         }
    : [8 y; R5 j6 E  @' A! D
17.     }( c( y) h* }( [! v9 C1 C
    
18. }

复制代码

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

! q  t) C( a, A. x运行测试2 n8 i" Q( G) t3 q. e; I6 s4 A
需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。
$ r9 X: L+ }" D- D: M
: y& ~# r# o/ x4 R8 y4 d因此需要把编写的代码放置到web服务器的目录下，自己试验下。/ ^+ ]: a5 O1 y2 s