要做到這一點，使用者將需要使用支援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>Send Money!</button>
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()
如此而已！
要做到這一點，使用者將需要使用支援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>Send Money!</button>
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()
}
如此而已！