用户环境检查
6 o" I9 r8 U. w- n( C  f' }既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。/ A& H4 Q, u* j$ A& v# p# _: W9 O
先检查是否安装了MetaMask钱包：/ ?" k6 {3 o% j* s

1. window.addEventListener('load', function() {
   0 A: g, p) T; R0 @2 x* C
2.         if (typeof web3 !== 'undefined') {% v0 q7 s+ H* j0 G8 K
   
3.             web3 = new Web3(web3.currentProvider);7 q& c( i- l0 q/ {- F3 D
   
4.             if (web3.currentProvider.isMetaMask == true) {3 j5 @' Q! v2 M  k" J6 m! V; ^0 B
   
5.                 // "MetaMask可用", o7 Y- }. U+ B& B: |( u( K
   
6.             } else {3 A( h/ W- J/ F+ z: N
   
7.                 // "非MetaMask环境"6 C, A- m/ D9 D2 H+ U* P
   
8.             }
   $ p5 D7 E4 Q0 R( i" y
9.         } else {
   7 I* V8 x0 k9 T4 X+ k" n: S
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");7 }- c+ ^/ [  n1 I, D
    
11.         }$ Y# e( K- u3 ^- g
    
12. }

复制代码

& H0 \4 I* t3 X) HMetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web3% [  c& {! v3 V$ a* \! w, q
检查是否钱包已经解锁：
" s7 d. y7 H+ X/ [; K我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。4 @; C, E4 \9 v8 D
可以把下面的代码加到上面的监听函数中：( ?8 m! x* X' g8 `8 [

1. web3.eth.getAccounts(function (err, accounts) {
   $ j3 U# U. \' H* K! R
2.             if (accounts.length == 0) {8 A' g+ V& d$ y; J- c2 Y
   
3.                 $("#account").html("请检查钱包是否解锁");
     y0 L2 n$ s1 G. y3 L
4.             }
   " n  m. _2 J  @$ W- S& @9 R
5.             });

复制代码

; y4 {3 n( E# [$ I- z% E
发送交易; ~+ q* S  }, c
如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。
8 `1 G5 ]3 N, X/ e* Y% j; zweb3.eth.sendTransaction(transactionObject [, callback])9 ~0 ]: ^- }+ L4 ]: ^' W8 ^/ h( P2 q
第二个参数是回调函数用来获得发送交易的Hash值。4 v1 J3 X  v1 _7 \9 Z" K2 e
第一个参数是一个交易对象，交易对象里面有几个字段：
+ M6 @8 n9 h, qfrom : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格
( j5 C6 q" o( T( N2 V9 T$ `* k( a6 m2 }( i( t1 Z
如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。
& B4 I9 F& \, X在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。- n6 U1 j. t7 w8 K/ [
因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：& ?3 b) V( x1 F0 A( m

1. //  这里使用Metamask 给的gas Limit 及 gas 价
   ; H# B! ?! p! u3 |! v6 Y, U% `
2. var fromAccount = $('#fromAccount').val();
   % y: V1 N" z9 a% `7 r" i
3. var toAccount = $('#toAccount').val();
   7 V, P5 S6 D. Q1 }4 K
4. var amount = $('#amount').val();
   ; Y% U2 K1 C/ N( E
5. // 对输入的数字做一个检查$ J$ \0 B5 l; S  O
   
6. if (web3.isAddress(fromAccount) &&& ]. d" _, C: x6 v0 ^$ S% E
   
7.             web3.isAddress(toAccount) &&
   0 b0 ?/ F3 C- V, S
8.             amount != null && amount.length > 0） {. }) b1 ?/ [  y, \
   
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
   5 |- V. i- k2 P+ I3 Y
10.     web3.eth.sendTransaction(message, (err, res) => {8 l5 \  l# `( L
    
11.         var output = "";' i- K  U1 R) M2 G
    
12.         if (!err) {
    3 ]# m8 A- c4 I2 F- U8 A& G3 e
13.             output += res;
    ' z+ H  c$ t$ ^0 a$ l
14.         } else {8 `& w: G: ^$ l$ e2 C7 P
    
15.             output = "Error";
    " @' e! z- W# E: c. j+ T3 _, f8 Z
16.         }
    ! L5 C5 d' a* h6 K  b
17.     }
    4 @% ~2 \& T% S8 K
18. }

复制代码

  T  W0 A" I! Z( Z4 Y
补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。
5 Z% v& @8 H, ~, a
) x7 f) s! U+ O; l1 G  U运行测试
$ G% Y9 g/ k$ `  K需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。# ^) p% X9 b: B8 ?8 t" G$ N
, }0 o( b+ E! W: t& C
因此需要把编写的代码放置到web服务器的目录下，自己试验下。) u4 Y% p" o; u! h: m* M4 J! ^6 s- }9 u