今天有人問如何用按鈕呼叫智慧合約，我不知道在哪裡找，所以我決定寫這個，很快就可以。

在這篇文章中，我將給出一個簡單但有希望有效的演示，說明JavaScript開發人員如何建立一個能夠呼叫智慧合約的網頁，並通過單擊即可向其匯款（以太幣）。

要做到這一點，使用者將需要使用支援Web3的瀏覽器，因此可以使用像Parity或Mist這樣的可安裝瀏覽器，或者他們可以使用像MetaMask這樣的瀏覽器擴充套件。

此外，雖然我可以教你如何直接使用web3API，但我將教你如何使用一個新的很方便的庫與乙太網智慧合約EthJS互動。

你的網站需要等待ready事件，然後檢查全域性web3

window.addEventListener('load', function() {

  // Check if Web3 has been injected by the browser:
  if (typeof web3 !== 'undefined') {
    // You have a web3 browser! Continue below!
    startApp(web3);
  } else {
     // Warn the user that they need to get a web3 browser
     // Or install MetaMask, maybe with a nice graphic.
  }

})
 

從MetaMask開發人員指南中複製。

在這個例子中，我假設你正在使用像Browserify或Webpack這樣的JavaScript捆綁器，並且知道如何從NPM安裝模組。

在你的應用程式設定中，你將使用一些不同的ethjs模組，你將使用全域性web3物件的currentProvider屬性初始化它們，這就是它與區塊鏈的對話方式。

const Eth = require('ethjs-query')
const EthContract = require('ethjs-contract')

function startApp(web3) {
  const eth = new Eth(web3.currentProvider)
  const contract = new EthContract(eth)
  initContract(contract)
}
 

一旦例項化了合約，就可以使用它來建立對網路上實時合約的引用。要做到這一點，你需要兩件事：

• 合約地址。
• 合約ABI。

ABI是應用程式二進位制介面，它告訴你的JavaScript如何與智慧合約通訊。它只是描述合約方法的JSON資料。

通常，如果你釋出合約，你知道如何獲得ABI，如果你要與其他人簽訂合約，他們應該提供ABI，儘管有時候你可以找到與Etherscan等區塊瀏覽器的合約相匹配的ABI。

假設你有可用的ABI和地址，並瞭解我們現在如何建立合約物件。在這個例子中，我將使用僅包含Token標準中的transfer(to,value)方法的ABI：

const abi = [{
    "constant": false,
    "inputs": [
      {
        "name": "_to",
        "type": "address"
      },
      {
        "name": "_value",
        "type": "uint256"
      }
    ],
    "name": "transfer",
    "outputs": [
      {
        "name": "success",
        "type": "bool"
      }
    ],
    "payable": false,
    "type": "function"
  }]
const address = '0xdeadbeef123456789000000000000'
function initContract (contract) {
  const MiniToken = contract(abi)
  const miniToken = MiniToken.at(address)
  listenForClicks(miniToken)
}

現在我們已經為智慧合約初始化了一個JavaScript介面，所以我們只需要建立一個小HTML。

<button class="transferFunds">Send Money!</button>

還有一點JavaScript來響應點選，併發送這些資金：

function listenForClicks (miniToken) {
  var button = document.querySelector('button.transferFunds')
  button.addEventListener('click', function() {
    miniToken.transfer(toAddress, value, { from: addr })
    .then(function (txHash) {
      console.log('Transaction sent')
      console.dir(txHash)
      waitForTxToBeMined(txHash)
    })
    .catch(console.error)
  })
}

請注意，如果此交易也傳送以太，你將向包含from欄位的選項雜湊新增value：'10000'。該值以wei為單位，為1x10 ^ -18以太。轉換的簡單方法是這樣的：

var inWei = web3.toWei('10', 'ether')

對於普通的Web開發人員來說，一個奇怪的部分是交易響應並不意味著交易現在已經完成，它只是意味著它已經被傳輸到網路。它仍然需要被挖掘，而在以太坊中，平均需要大約14秒（阻斷時間，檢視EthStats.net上的統計資料）。

現在還沒有很好的訂閱方法可以等待挖掘交易，所以你需要用收到的txHash進行輪詢。是的，這很乏味，所以我會告訴你如何使用新的JavaScript async/await模式來減少痛苦：

async function waitForTxToBeMined (txHash) {
  let txReceipt
  while (!txReceipt) {
    try {
      txReceipt = await eth.getTransactionReceipt(txHash)
    } catch (err) {
      return indicateFailure(err)
    }
  }
  indicateSuccess()
}

如此而已！（我知道，這很多）我希望這足以向你展示如何通過以太坊區塊鏈與智慧合約進行互動。一旦你習慣它，它就非常棒，因為它是一種具有許可權的全域性API，所以當你必須做一些有趣的事情，比如等待交易被挖掘，你不必做令人討厭的事情，比如管理使用者帳戶和密碼，或自己管理後端伺服器！

======================================================================

分享一些以太坊、EOS、比特幣等區塊鏈相關的互動式線上程式設計實戰教程：

• java以太坊開發教程，主要是針對java和android程式設計師進行區塊鏈以太坊開發的web3j詳解。
• python以太坊，主要是針對python工程師使用web3.py進行區塊鏈以太坊開發的詳解。
• php以太坊，主要是介紹使用php進行智慧合約開發互動，進行賬號建立、交易、轉賬、代幣開發以及過濾器和交易等內容。
• 以太坊入門教程，主要介紹智慧合約與dapp應用開發，適合入門。
• 以太坊開發進階教程，主要是介紹使用node.js、mongodb、區塊鏈、ipfs實現去中心化電商DApp實戰，適合進階。
• C#以太坊，主要講解如何使用C#開發基於.Net的以太坊應用，包括賬戶管理、狀態與交易、智慧合約開發與互動、過濾器和交易等。
• EOS教程，本課程幫助你快速入門EOS區塊鏈去中心化應用的開發，內容涵蓋EOS工具鏈、賬戶與錢包、發行代幣、智慧合約開發與部署、使用程式碼與智慧合約互動等核心知識點，最後綜合運用各知識點完成一個便籤DApp的開發。
• java比特幣開發教程，本課程面向初學者，內容即涵蓋比特幣的核心概念，例如區塊鏈儲存、去中心化共識機制、金鑰與指令碼、交易與UTXO等，同時也詳細講解如何在Java程式碼中整合比特幣支援功能，例如建立地址、管理錢包、構造裸交易等，是Java工程師不可多得的比特幣開發學習課程。
• php比特幣開發教程，本課程面向初學者，內容即涵蓋比特幣的核心概念，例如區塊鏈儲存、去中心化共識機制、金鑰與指令碼、交易與UTXO等，同時也詳細講解如何在Php程式碼中整合比特幣支援功能，例如建立地址、管理錢包、構造裸交易等，是Php工程師不可多得的比特幣開發學習課程。
• tendermint區塊鏈開發詳解，本課程適合希望使用tendermint進行區塊鏈開發的工程師，課程內容即包括tendermint應用開發模型中的核心概念，例如ABCI介面、默克爾樹、多版本狀態庫等，也包括代幣發行等豐富的實操程式碼，是go語言工程師快速入門區塊鏈開發的最佳選擇。

匯智網原創翻譯，轉載請標明出處。這裡是原文如何實現一鍵呼叫以太坊智慧合約