用户环境检查
7 s+ D5 l) E- a+ B既然需要使用Web3.js API 在页面中进行转账， 首先应该检查在浏览器环境有没有安装好钱包，并且钱包应该是解锁状态。
; E/ k. E/ O. z2 W8 W  Z! [先检查是否安装了MetaMask钱包：
$ z4 w$ v# K6 `  v! [! `" z. L

1. window.addEventListener('load', function() {
   9 `% `% i& \. t1 B' ]
2.         if (typeof web3 !== 'undefined') {
   4 ]& T1 E! W8 u4 l
3.             web3 = new Web3(web3.currentProvider);
   9 Q* t7 l4 I" Y2 g* D& ~
4.             if (web3.currentProvider.isMetaMask == true) {
   * [% L( [0 x$ t+ v" ]
5.                 // "MetaMask可用"
   & ?0 F+ t$ L# e' p* W
6.             } else {
   . {0 G6 F' A; I7 B0 h5 _( G$ W
7.                 // "非MetaMask环境"( t, B! ?8 p7 z$ v$ |
   
8.             }
   ' D' J! M8 S8 _" }# [8 z0 |, S  X
9.         } else {; T: e) ^0 }7 A# W2 H& L) d: p
   
10.             $("#env").html("No web3? 需要安装<a href="https://metamask.io/" target="_blank">MetaMask</a>!");0 j; \! _6 C% Y* ~0 C8 W. F
    
11.         }
    6 C+ G6 N5 R3 I5 \! k
12. }

复制代码

/ k) Z' y: }! g- R% p
MetaMask推荐在window加载时，进行MetaMask的检查，当然在没有安装MetaMask时，也可以指定一个节点Provider来创建web3
9 s. Z/ s! }/ O! U, J. b7 k检查是否钱包已经解锁：
, _* `8 j; H1 S- `0 T3 z# t/ O我们在发送交易之前应该先首先检查一下当前钱包的一个状态，检查钱包是否解锁(是否输入了密码进入了MetaMask)，通常使用eth下面的getAccounts来进行检查，getAccounts是会返回账号的一个列表，如果当前账号列表里面有数据的话，说明钱包已经解锁可以获得到账号，如果账号拿到的列表是空的话，那么说明钱包没有解锁。3 H) C0 K3 ?. c: a) ~( b3 c; K7 H3 y
可以把下面的代码加到上面的监听函数中：) b9 Q1 `0 ]1 ~; {! X1 Z/ c

1. web3.eth.getAccounts(function (err, accounts) {# Q7 y! x0 M5 R- Y  a1 G% b3 m5 j
   
2.             if (accounts.length == 0) {
   ; ^3 Y4 [( ^: a9 q$ Z
3.                 $("#account").html("请检查钱包是否解锁");
   & b; \, }! F! d  b3 a) Z; h
4.             } - X5 z* V& M8 m% E  i" X
   
5.             });

复制代码

4 H5 D# @& R0 o+ }1 }发送交易
# {  Y4 L, u5 H; r' U6 J如果MetaMask钱包是解锁的，我们就可以来发送交易，发送交易使用sendtransaction这个方法。
- C7 g# a+ C0 {7 ]0 Z9 ?- ]7 \web3.eth.sendTransaction(transactionObject [, callback])! X( i+ q4 V; b" N, I/ W. {
第二个参数是回调函数用来获得发送交易的Hash值。) H8 v1 Q1 \/ J/ I% ?9 b
第一个参数是一个交易对象，交易对象里面有几个字段：$ P5 R/ K( ?  ?1 P9 f- r- h
from : 就是从哪个账号发送金额to : 发动到到哪个账号value 是发送的金额gas: 设置gas limitgasPrice: 设置gas 价格$ t/ l# ~, m, [" b; n/ `

3 S% p' m* W% [: h9 V( R如果from没有的话，他就会用当前的默认账号， 如果是转账to和value是必选的两个字段。: w# Q/ u" T0 S$ A7 [
在发送交易的时候弹出来MetaMask的一个授权的窗口，如果我们gas和gasPrice没有设置的话，就可以在MetaMask里面去设置。如果这两个gas和gas Price设置了的话，MetaMask就会使用我们设置的gas。$ ?+ Z! ~5 |0 m. m3 @# V
因此在发送交易的时候，关键是构造这样一个交易对象，JavaScrpt代码如下：$ `7 j6 u. M5 A, V  C

1. //  这里使用Metamask 给的gas Limit 及 gas 价) c: ?4 I9 y, C$ k6 o1 j5 M( y
   
2. var fromAccount = $('#fromAccount').val();$ u( s3 j0 B; s
   
3. var toAccount = $('#toAccount').val();
   : A. i, }- I3 L' `0 a  ]% K
4. var amount = $('#amount').val();! \% N; I+ O. a
   
5. // 对输入的数字做一个检查1 w" ]9 r( p3 @! U8 {) b
   
6. if (web3.isAddress(fromAccount) &&
   / k, h6 i. ~& h6 j; m) b  w
7.             web3.isAddress(toAccount) &&
   % a* Z7 r* I- r* d3 k
8.             amount != null && amount.length > 0） {6 b' l' z" V7 j, O+ W
   
9.     var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};1 b5 w$ `4 H1 O: y% A8 {
   
10.     web3.eth.sendTransaction(message, (err, res) => {
    3 N* T. h' t. N; i& q2 ]
11.         var output = "";5 ^# F9 D. w/ ~0 m
    
12.         if (!err) {
    + a0 o) B2 }( f; e/ @3 g2 M$ W+ U
13.             output += res;
    " y7 ^2 G: }  Z& H' g& j
14.         } else {: ?% I5 l  K/ d
    
15.             output = "Error";
    9 H9 M& U$ B5 Z) r" l5 K
16.         }
    ; I( H' g1 f9 v% ~+ L( w* k
17.     }
    % d: @+ J( P9 o8 I1 D9 l
18. }

复制代码

5 m  M: T% p1 s1 U6 v5 f% r
补充说明：$('#fromAccount').val()是使用JQuery用来获取用户输入内容，其次应该在实际构造发送交易之前对输入的参数做一个判断，web3.isAddress用来检查字符串是不是地址。另外对于一个向普通外部地址账号的转账，消耗的gas 是固定的21000。; T4 U) Z3 p9 m/ r" I+ [6 b

+ }  S+ O! j0 K1 ^! g& ?2 p. J运行测试& }3 o* k9 X7 I# H& t
需要注意一点的是，由于安全原因，MetaMask只支持站点方式访问的页面，即通过http:// 来访问页面，在浏览器中通过file:// + 文件地址的方式是不行的。
! e9 D( \' L5 [( Z1 r# c/ v  [. r
' l  ]4 {% F3 Z9 u因此需要把编写的代码放置到web服务器的目录下，自己试验下。" y$ T* l: n! |" ^3 ~