用户环境检查
0 z' }! {: z8 _  z( W5 ^- `/ E既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。5 U* f/ W) O2 ^& C3 V0 _& a
先检查是否安装了MetaMask钱包：
' o$ \* S) h5 h6 X# S9 K- u/ ?5 [! X8 ]

1. window.addEventListener('load', function() {2 F% ?( w* l- h; w) F$ @
   
2.         if (typeof web3 !== 'undefined') {! `8 \1 Q# B4 ^3 n
   
3.             web3 = new Web3(web3.currentProvider);: ]8 d. P( f; \6 F# _# W3 P) I4 h
   
4.             if (web3.currentProvider.isMetaMask == true) {0 x$ U/ m+ [3 l, P8 l! N
   
5.                 // "MetaMask可用"
   % Q, g- b' c1 t( \1 B4 r6 w0 L: Z. n! m
6.             } else {
   ' J1 Z+ X9 K- N5 Z3 P6 R
7.                 // "非MetaMask环境"6 z8 E) S! c7 p. H
   
8.             }
   * S( Y$ |, v! H" @# ~- w
9.         } else {
   . Y( X$ i9 A) {& D3 \
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");
    5 s7 A7 h5 T6 y( z- y: F
11.         }
    * r! ]) R2 T/ S; ~8 H
12. }

复制代码

0 F2 `2 ]$ ~8 k4 L2 w2 GMetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web3: a( u& A! F1 b$ j5 v: K; G) S! |
检查是否钱包已经解锁：, O8 S: d: Q! u& O5 n& R
我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。
8 {3 a% p( h7 h0 @( F; s可以把下面的代码加到上面的监听函数中：- [8 t1 a. |" q  U% n; u+ R

1. web3.eth.getAccounts(function (err, accounts) {6 s! l! C. @$ ^3 ?- r" C
   
2.             if (accounts.length == 0) {' x3 Y' Y9 D7 I2 l* }, Z, H
   
3.                 $("#account").html("请检查钱包是否解锁");
   ; c( i2 w! Z9 c  S, L$ g4 c' w" l
4.             }
   9 U6 f1 a2 T( V9 I* O( B* b1 M
5.             });

复制代码

1 w. V" y; i5 v
发送交易9 U' m' {! L1 h7 Y* \: _
如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。( b# J: E! o! y* n  Y
web3.eth.sendTransaction(transactionObject [, callback])  p" J, v( `' a7 _6 U! ?( a# z$ W
第二个参数是回调函数用来获得发送交易的Hash值。
. ^3 y: x/ {* [+ L" b1 W第一个参数是一个交易对象，交易对象里面有几个字段：/ ~+ F  i* O5 ]. E4 e5 e& ~
from : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格) @6 x( i( m5 p; m, @

, b1 ]) ]3 Q" R" z4 J如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。, _/ A  a: C! B; y% [/ D
在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。
0 b4 v5 R- W$ z: B: J$ q6 m: X因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：  b8 R& H' S- S* N/ x

1. //  这里使用Metamask 给的gas Limit 及 gas 价! M" b% P/ N: g1 q( l
   
2. var fromAccount = $('#fromAccount').val();
   - H$ k; {/ o  S: v% G# g! @
3. var toAccount = $('#toAccount').val();* R% G) ^) p2 N: W9 m6 b
   
4. var amount = $('#amount').val();) m& X, q/ A0 Q1 ~9 M
   
5. // 对输入的数字做一个检查. \. v; j1 _2 L& a# f, a; G  D% B
   
6. if (web3.isAddress(fromAccount) &&8 p2 C9 }0 J3 \
   
7.             web3.isAddress(toAccount) &&8 [* I6 a- T2 ^4 {/ z; ^
   
8.             amount != null && amount.length > 0） {
   ! m) Q# l# r3 ]# H2 g! K! b
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};. l1 A. d$ j( J% y5 l3 a5 Y
   
10.     web3.eth.sendTransaction(message, (err, res) => {
    . {* a2 y; k; e4 f! O
11.         var output = "";
    ; s$ o2 k" X! {8 n  i7 d; h
12.         if (!err) {
    ; N/ ~+ X) x6 e
13.             output += res;8 W. j/ ^3 d* L, I0 c9 f8 X
    
14.         } else {
    : Z' g& i9 b' s5 f
15.             output = "Error";$ f. L9 V: Z/ K' \" T6 c
    
16.         }
    ! R& Z% f, k2 E$ y
17.     }
    % G, Z# _' w; }) o' S
18. }

复制代码

% x4 H, F$ \, ]. R/ V* U补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。
! l0 l8 V3 R3 N4 ^
% j0 b9 A4 x6 k4 z运行测试  s* ~  ^; u+ J; h1 n
需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。
. m4 @& O; _; C8 M, Q
, |! ^5 W- o9 A& e- L4 h+ T因此需要把编写的代码放置到web服务器的目录下，自己试验下。, F/ ^, y! g$ ?3 x. H3 F( ]