如何实现Web一键调用以太坊智能合约

今天有人问如何用按钮调用智能合约，我不知道在哪里找，因此我决定写这个，很快就能够。

在这篇文章中，我将给出一个简单但有但愿有效的演示，说明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语言工程师快速入门区块链开发的最佳选择。

汇智网原创翻译，转载请标明出处。这里是原文如何实现一键调用以太坊智能合约