用户环境检查! t9 S, y+ h* C3 ~- F9 @2 b5 m
既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。
6 |  P9 R1 h* x& \$ K; ?, Q! ^/ E先检查是否安装了MetaMask钱包：$ R6 J: q2 `& N3 A% C8 V: t3 X

1. window.addEventListener('load', function() {
   ! P( o) H9 i7 H
2.         if (typeof web3 !== 'undefined') {) w5 z2 _! D% c" R
   
3.             web3 = new Web3(web3.currentProvider);
   0 Y+ @6 j; p% h9 O0 s5 U, T2 U2 a' K, m
4.             if (web3.currentProvider.isMetaMask == true) {
   $ i2 a$ M" M  t) H9 c9 Q7 [
5.                 // "MetaMask可用"
   ( t& Y6 q& O& S) A- a! b
6.             } else {, n' O6 U+ j4 {# J0 j6 a+ Z- Q
   
7.                 // "非MetaMask环境", |0 i7 u$ P( s6 _
   
8.             }
   , t4 F4 {5 o; r8 I2 D
9.         } else {! e6 i0 _5 @9 \1 M9 ~( Y
   
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");& f9 |' q  u6 e3 o
    
11.         }
    : C! L) v% P0 I- |8 w
12. }

复制代码

& o& t. L# ]( n; T* B( N
MetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web36 a0 p) E8 J$ j) S
检查是否钱包已经解锁：
4 K" n; K% X1 z7 J3 B* P3 K' K; V我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。
2 E! `1 a! T6 U% t2 X4 c可以把下面的代码加到上面的监听函数中：" v6 o$ ]# m" I. D+ y0 t/ j$ R: e

1. web3.eth.getAccounts(function (err, accounts) {
   . Q, Q: e: e$ L
2.             if (accounts.length == 0) {8 k* c# N2 e6 q$ E  n( S( a- r
   
3.                 $("#account").html("请检查钱包是否解锁");
   / {5 Z9 H8 r* M6 g3 t7 r
4.             } / u+ A( I3 z& p! e0 J
   
5.             });

复制代码

  ]2 ~2 ]  A$ `! T8 N* |( Z2 U
发送交易* A& _2 n2 _2 T: Q8 w
如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。
+ ^9 O; k2 E- A- iweb3.eth.sendTransaction(transactionObject [, callback])
  l9 [5 ?4 n) y' Q7 q第二个参数是回调函数用来获得发送交易的Hash值。6 j. R: n2 f7 C/ V
第一个参数是一个交易对象，交易对象里面有几个字段：7 K5 h! X% M8 Q
from : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格! h9 P3 l* C$ x, a7 [0 k

3 d& t7 L% p0 [/ j. ]; ^" s如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。. [5 W2 k9 @% @. N. g
在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。
" h8 v" D/ e) c& L4 \0 C因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：: w3 r7 R9 G5 K, F+ u

1. //  这里使用Metamask 给的gas Limit 及 gas 价
   ) \6 u9 g4 P/ H4 R- }) n3 ^
2. var fromAccount = $('#fromAccount').val();, V4 s2 I- [  s9 S) @) T( `- ?
   
3. var toAccount = $('#toAccount').val();. E. f+ V1 F& w/ W9 }- ~% ?+ v1 t: w
   
4. var amount = $('#amount').val();( V' i- X  g* S( T+ L
   
5. // 对输入的数字做一个检查
   6 `, X7 }3 L; T6 W! l' z  R& b: }
6. if (web3.isAddress(fromAccount) &&9 C% A3 b- D- N' V+ f1 s  I
   
7.             web3.isAddress(toAccount) &&
   6 f0 f3 h" d; T& R( M5 W0 j( o1 Z
8.             amount != null && amount.length > 0） {
   / ?/ j4 e$ p) ~9 ]: J7 z
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
   ! M" m' A& l" f" c, |
10.     web3.eth.sendTransaction(message, (err, res) => {
    3 U+ q! z4 s6 v/ e, I/ P: x$ z, J
11.         var output = "";
    8 q1 f+ |0 [; x+ M" L5 b
12.         if (!err) {
    4 J7 w! `/ L8 Y5 I
13.             output += res;
    , O0 B6 n  k; |# L% c$ O5 A4 J5 S
14.         } else {
    . e+ [; a( q  c7 \0 M; h
15.             output = "Error";0 y3 z5 m6 y: A  C; v
    
16.         }
      Y& ^" K3 l" z1 _. e
17.     }) q- Q; [( C! e$ L, V$ Z0 T0 s, S
    
18. }

复制代码

( A9 Q. a4 T3 g' t2 O  y
补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。
( _* h& c1 d  C: L8 a$ D0 ]$ l, m  C, {- `( V4 r
运行测试% N: Y$ \, l6 s6 w) B4 `$ k) J
需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。3 q; X8 E' [  T3 \4 o" g( I% D

9 g- k5 T8 n  [因此需要把编写的代码放置到web服务器的目录下，自己试验下。
3 C- N7 }* D9 I- A