说明

本系列内容目录：专栏：区块链入门到放弃查看目录

如果你还没有创建好项目请先查看：《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": [{