说明
本系列内容目录：专栏：区块链入门到放弃查看目录
如果你还没有创建好项目请先查看：《DApp实战篇：先用前端起个项目》，如果你还不知道web3.js是什么请先查看：《DApp实战篇：前端技术栈一览》。
安装
打开项目根目录，并唤起终端：
键入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": [
{