用户环境检查
! I, i) x# ~  F- @- M' Q既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。
$ Z  t% g& x! L# Z先检查是否安装了MetaMask钱包：
: F: K# w9 _% b0 W, b4 C0 W- v

1. window.addEventListener('load', function() {2 U2 Z0 Q: ]9 ]; r- @& k0 a  R3 E
   
2.         if (typeof web3 !== 'undefined') {
   8 n* c2 _3 C- v1 w; h) [
3.             web3 = new Web3(web3.currentProvider);
   6 c- t- R3 R5 I9 ]
4.             if (web3.currentProvider.isMetaMask == true) {; ~: @  Z$ }/ U+ C  ^# Y9 Q
   
5.                 // "MetaMask可用"- {* w6 O. I6 }* u; z
   
6.             } else {" Y6 B) m: Z& ^
   
7.                 // "非MetaMask环境"3 i" D* }7 l  M# a  f! @4 t& L2 V
   
8.             }: C+ y8 V( J8 h4 m! T
   
9.         } else {
   & L% _$ Y* D* @( c
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");9 Q. B6 S+ ?/ P+ T) c) c" y
    
11.         }
    - d( u; |' f7 B8 u3 @
12. }

复制代码

* ~/ `+ b" O- |3 l* iMetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web35 @- n# G% \* U% L6 [
检查是否钱包已经解锁：
- v* K. x+ t( p5 g$ M1 H我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。& k+ @* ]5 ^. m
可以把下面的代码加到上面的监听函数中：/ n6 X" D$ a1 v! A0 x

1. web3.eth.getAccounts(function (err, accounts) {6 y+ A5 g+ L, D) J3 m2 h
   
2.             if (accounts.length == 0) {
   ( R- Y) a0 v0 j5 @4 o
3.                 $("#account").html("请检查钱包是否解锁");
   * \1 p' E# H' ~( ~6 V6 s
4.             } 8 Z3 f  y2 F# B5 y- B) K
   
5.             });

复制代码

. K* F  `* k; r发送交易) F; D0 X3 d* G" w$ i9 e
如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。
7 G5 o/ l) O' D$ Y# Gweb3.eth.sendTransaction(transactionObject [, callback])% b' z" O  h% ~1 u7 w* `6 U- B
第二个参数是回调函数用来获得发送交易的Hash值。
5 V( ?) u: l* s8 {第一个参数是一个交易对象，交易对象里面有几个字段：
4 [& Z8 X6 Z+ z$ vfrom : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格
1 o1 B, @% R6 U$ A1 g) h/ H$ h
& o# C7 \3 o, j7 W: O( Q如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。  \2 P" w  n8 E8 z9 L
在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。) X- z0 Q: p# o2 l. Y+ i
因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：
5 m% @9 j( w# K$ x* W

1. //  这里使用Metamask 给的gas Limit 及 gas 价0 Q1 N; M5 ^5 ^! [
   
2. var fromAccount = $('#fromAccount').val();/ S$ V7 I% G" W4 e1 u
   
3. var toAccount = $('#toAccount').val();! S: _' G; c: j6 T6 k5 n
   
4. var amount = $('#amount').val();
   7 M* C  u1 x; a( X4 Y. y! k' k9 M
5. // 对输入的数字做一个检查2 ^" w, I1 @4 R8 Y- Q! _
   
6. if (web3.isAddress(fromAccount) &&8 R# P2 ^) q: |9 O+ V
   
7.             web3.isAddress(toAccount) &&
   + z1 A* P: j+ Y, R9 G! t/ s+ z, C2 ~
8.             amount != null && amount.length > 0） {
   / S8 q2 Q3 V1 L6 m, I! r9 P
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
   ( q9 v+ X7 H9 G2 P0 Y4 \& p6 y3 Q
10.     web3.eth.sendTransaction(message, (err, res) => {& e9 ?2 @" j0 n/ ^; U, _+ }& c1 {  Y
    
11.         var output = "";
    & D/ N  X9 R! k% e; e( w( E2 r
12.         if (!err) {
    6 c/ h3 p. U, y) p* ]( A! x
13.             output += res;
    4 L4 U8 V7 A; @3 r8 a. D9 m
14.         } else {: r0 L3 N" }: @8 @: g# n
    
15.             output = "Error";! J2 [" N2 ]% U% q" z) V" A
    
16.         }8 y3 T3 |8 f, _4 g7 n
    
17.     }
    # d% {' c, w( H: e3 u# \8 F
18. }

复制代码

& a+ V! i' f6 `) \& s% i补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。% S: s2 @" ]  \) z
# ^+ ~7 l6 i3 e
运行测试
5 R8 B) v6 y* l1 ~* U需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。5 l1 k! t) g+ |( @2 h

! u* c1 p* H3 H5 U因此需要把编写的代码放置到web服务器的目录下，自己试验下。
# i4 B8 }% H" V# P* X0 V8 S