說明

本系列內容目錄：專欄：區塊鏈入門到放棄查看目錄

如果你還沒有創建好項目請先查看：《DApp實戰篇：先用前端起個項目》，如果你還不知道web3.js是什么請先查看：《DApp實戰篇：前端技術棧一覽》。

安裝

點此查看web3.js官方文檔

打開項目根目錄，并喚起終端：

鍵入web3.js安裝命令：

npm install web3

之后回車安裝即可。

再運行項目：

運行成功后會在瀏覽器中默認打開項目，如下：

開始開發

為了方便調試和可視化，我們先在頁面上寫一個連接合約按鈕，代碼如下：

<template><q-page class="flex flex-center"><q-btn color="primary" label="點擊連接合約"></q-btn></q-page>
</template><script setup>
//
</script>

運行效果如下：

按鈕思路

現在我們需要完成的是點擊按鈕就實現合約連接，如果報錯則顯示在按鈕下面，如果連接成功則則按鈕上面顯示個連接成功。

修改UI

<template><q-page class="flex flex-center"><q-card class="text-center main-card"><q-card-section class="text-positive"><q-icon name="check" size="4em"></q-icon><h5 class="text-h5 font-weight-bold">連接成功</h5></q-card-section><q-card-section><q-btn size="lg" glossy push color="primary" label="點擊連接合約"></q-btn></q-card-section><q-card-section class="text-small text-negative"> 連接失敗，錯誤原因： </q-card-section></q-card></q-page>
</template><script>
import { defineComponent } from 'vue'
export default defineComponent({name: 'IndexPage',
})
</script>
<style>
.main-card {width: 450px;
}
</style>

運行如圖：

定義兩個變量來控制顯示

目前我們的所有元素都是全部顯示的，我們要實現的應該是如果連接成功則顯示連接成功和隱藏按鈕，如果連接失敗則顯示連接失敗以及錯誤原因，因此再改一下：

<template><q-page class="flex flex-center"><q-card class="text-center main-card"><q-card-section class="text-positive" v-if="isConnected"><q-icon name="check" size="4em"></q-icon><h5 class="text-h5 font-weight-bold">連接成功</h5></q-card-section><q-card-section v-if="!isConnected"><q-btn size="lg" glossy push color="primary" label="點擊連接合約"></q-btn></q-card-section><q-card-section class="text-small text-negative" v-if="errorMessage !== ''">連接失敗，錯誤原因：</q-card-section></q-card></q-page>
</template><script>
import { defineComponent } from 'vue'
export default defineComponent({name: 'IndexPage',data: function () {return {isConnected: false, //是否連接成功errorMessage: '', //是否報錯}},
})
</script>
<style>
.main-card {width: 450px;
}
</style>

修改完成運行如圖：

連接合約

我們先定義一個連接合約的函數，并將其綁定到按鈕上：

<template><q-page class="flex flex-center"><q-card class="text-center main-card"><q-card-section class="text-positive" v-if="isConnected"><q-icon name="check" size="4em"></q-icon><h5 class="text-h5 font-weight-bold">連接成功</h5></q-card-section><q-card-section v-if="!isConnected"><!-- 點擊連接 --><q-btn @click="connect" size="lg" glossy push color="primary" label="點擊連接合約"></q-btn></q-card-section><q-card-section class="text-small text-negative" v-if="errorMessage !== ''">連接失敗，錯誤原因：</q-card-section></q-card></q-page>
</template><script>
import { defineComponent } from 'vue'
export default defineComponent({name: 'IndexPage',data: function () {return {isConnected: false, //是否連接成功errorMessage: '', //是否報錯}},methods: {// 定義連接函數connect: function () {},},
})
</script>
<style>
.main-card {width: 450px;
}
</style>

之后開始編碼連接：

web3方法：

new web3.eth.Contract(jsonInterface[, address][, options])

1.jsonInterface

ABI對象：至于什么是abi可以查看《基礎知識補充篇：認識智能合約的ABI》。

2.address

合約地址。

3.options

其他參數，目前用不到。

連接USDT合約

點此前往區塊鏈瀏覽器查看合約

這里我們連接eth鏈的usdt合約，參數如下：

address：0xdac17f958d2ee523a2206206994597c13d831ec7

abi json 如下：

[{"constant": true,"inputs": [],"name": "name","outputs": [{"name": "","type": "string"}],"payable": false,"stateMutability": "view","type": "function"},{"constant": false,"inputs": [{"name": "_upgradedAddress","type": "address"}],"name": "deprecate","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"},{"constant": false,"inputs": [{