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 是 Application Binary Interface，它告诉你的 JavaScript 如何与智能合约进行通信。 它只是描述合同方法的 JSON 数据。

通常，如果你发布一个合约，你知道如何获得 ABI，如果你要与其他人签订合约，他们应该提供 ABI，尽管有时你可以从一个区块中找到与合约匹配的 ABI像 Etherscan 这样的浏览器。

假设您有可用的 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。

Send Money!

还有一点 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)
  })
}

请注意，如果此交易还发送以太币，您将添加 value: '10000' 到包含 from 字段的选项散列。 该值以 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、比特币等区块链相关的交互式在线编程实战教程：