用户环境检查
# p, L7 j" h7 d4 N5 A/ W; Q8 M% C既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。
* c) [% {8 B+ O* r先检查是否安装了MetaMask钱包：
* ?4 B/ m3 q8 s0 d! g

1. window.addEventListener('load', function() {! B2 t* d. W/ K1 _, ?' W5 c8 s
   
2.         if (typeof web3 !== 'undefined') {7 K3 m: ?# c! `( g! y) l- h: z: X
   
3.             web3 = new Web3(web3.currentProvider);, e0 q) e: H* M3 @6 e
   
4.             if (web3.currentProvider.isMetaMask == true) {
   4 ~* `3 B, s/ l. b
5.                 // "MetaMask可用"' d* L. G( w( I% f; ~5 G0 i
   
6.             } else {
   3 y1 v4 V+ f% j' t' j4 I' y- o
7.                 // "非MetaMask环境"9 [: u8 X; O; S4 J1 W
   
8.             }
   + K# P. F& a, U
9.         } else {$ e- r: L9 u0 i4 z8 S% w. @
   
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");
    + p5 K1 D9 N  {7 ^# O; c$ {  N
11.         }, L1 r9 N/ Y1 G9 }# N
    
12. }

复制代码

& W& B6 L* k0 d% J, n2 j% T
MetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web3
2 \, P6 d7 k# W检查是否钱包已经解锁：
3 f9 a/ c1 X3 v: x  ^- E" W我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。3 {: }8 j; e1 t6 R# j& [6 p) z# e
可以把下面的代码加到上面的监听函数中：  V. L& m# s" n5 A

1. web3.eth.getAccounts(function (err, accounts) {
   ! `% K4 D0 @' k# \
2.             if (accounts.length == 0) {& p# P$ _3 ~8 `5 ~, I+ J' l; G) e
   
3.                 $("#account").html("请检查钱包是否解锁");5 S) w- ?$ ~4 M9 |1 H' K
   
4.             } 1 g8 w+ X2 J9 J5 n
   
5.             });

复制代码

8 e2 t& k# ]1 A- m8 W2 ~发送交易- l% q8 C; ~% i) ~! S/ `
如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。+ J% B1 C! O; G; t
web3.eth.sendTransaction(transactionObject [, callback])3 R3 B# C3 s* {
第二个参数是回调函数用来获得发送交易的Hash值。
# w8 D& S3 `/ j! M, R6 `! @& a第一个参数是一个交易对象，交易对象里面有几个字段：
% M# U! l( S0 n4 l# Ofrom : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格; n0 O9 q/ m4 j' R7 z& z
" t5 c' `8 l2 e: D- ]5 x/ g4 _) F$ u
如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。
' Z: B( S: r0 }1 A& u在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。
3 p0 N% ]0 ]" e  c因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：; ^; J2 c6 f) K

1. //  这里使用Metamask 给的gas Limit 及 gas 价5 k3 n! S3 O8 r" |
   
2. var fromAccount = $('#fromAccount').val();
   2 ~3 m' V0 x3 b2 q+ w6 A
3. var toAccount = $('#toAccount').val();
   - M$ P% G/ Y, L+ C! ~9 `' E
4. var amount = $('#amount').val();- y/ I: A: l+ }4 R  }+ R
   
5. // 对输入的数字做一个检查: j, z$ ?/ Q2 P' N
   
6. if (web3.isAddress(fromAccount) &&
   & i7 p9 c# t- @# i8 s9 Y
7.             web3.isAddress(toAccount) &&& z! B! e2 d2 `3 k% h4 W) M
   
8.             amount != null && amount.length > 0） {
   ; \* k- ?5 I6 i, W: f+ o
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};
   7 [4 g6 J' V( ?/ ~, o' s2 K/ B
10.     web3.eth.sendTransaction(message, (err, res) => {5 m$ M. Y2 A8 g: ~, Z2 p- m, |$ Z
    
11.         var output = "";! f; x. K/ Z* q: @" D3 t1 @2 A8 r
    
12.         if (!err) {  {! k: Q0 l7 B
    
13.             output += res;
    3 k' `4 D+ U: [6 w% J! S
14.         } else {
    ; M5 R8 S1 d  x0 R, r
15.             output = "Error";, p" V4 o6 _; }2 R; h
    
16.         }
    2 w2 G! @" Z6 i, _: r2 d/ \6 i& I
17.     }
    ( m/ w! i6 Q0 ?
18. }

复制代码

! U* y1 O8 i2 V% O7 c( M8 n补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。/ _2 N! o/ C3 P. r6 J: H8 g+ k

# l+ H/ Q5 S3 V运行测试( j# D! [* H2 G
需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。. \$ U- z$ v& u5 m; f2 J

( M6 E' s* a) b9 `' K, k因此需要把编写的代码放置到web服务器的目录下，自己试验下。4 e  w. E! c/ W# ]