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

有人问如何用按钮调用智能合约，在这篇文章中，我将给出一个简单但有希望有效的演示，说明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)

initCon

一旦实例化了合约，就可以使用它来创建对网络上实时合约的引用。要做到这一点，你需要两件事：

合约地址。

合约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="420a-f17a-be97-ea71 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()

如此而已！