上几节我们讲了如何通过Java后端完成链上交易、信息查询、以及如何使用web3插件实现开发自测。

这一节，我们来说说前端DAPP的开发实现。

1. MeteMask 🪜
Java对接（BSC）币安链 | BNB与BEP20的开发实践（三）水龙头 WEB3https://blog.csdn.net/t610654893/article/details/136606620?spm=1001.2014.3001.5501这一节中已经描述，这里不再赘述。

2. uniapp vue ethers @metamask/sdk

uniapp下载及vue项目的创建我们这里不提及。待我们前期的这些准备好了之后，我们需要给我们的工程导入 ethers @metamask/sdk俩个插件。

· @metamask/sdk 

https://docs.metamask.io/wallet/how-to/use-sdk/javascript/other-web-frameworks/

导入方法

yarn add @metamask/sdk
// or
npm install @metamask/sdk

·  ethers​​​​​​

npm install --save ethers
//安装指定版本
npm install ethers@5.*.*

到此，我们的前期工程部署差不多就完成了，但是我们如果是需要智能合约的支持，那么我们还得要有一个准备工作，就是获取到ABI.json，ABI是根据智能合约Solidity编译后生成的。

API 是程序与程序间互动的接口。这个接口包含程序提供外界存取所需的 functions、variables 等。ABI 也是程序间互动的接口，但程序是被编译后的 binary code。所以同样的接口，但传递的是 binary 格式的信息。所以 ABI 就要描述如何 decode/encode 程序间传递的 binary 信息。ABI.json示例：

[{
        "constant": true,
        "inputs": [],
        "name": "data",
        "outputs": [{"name": "","type": "uint256"}],
        "payable": false,
        "stateMutabㄒility": "view",
        "type": "function"
    },
    {
        "anonymous": false,
        "inputs": [{"indexed": true,"name": "_from","type": "address"},{"indexed": false,"name": "value","type": "uint256"}],
        "name": "Set",
        "type": "event"
    },
    {
        "constant": false,
        "inputs": [{"name": "x","type": "uint256"}],
        "name": "set",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
}]

那么怎么来获取到ABI呢？

其实很简单，我们在打开区块链浏览器后，找到需要支持的智能合约，下发会有一个智能合约的ABIJSON提供下载。（当然我们假如写了智能合约，还需要验证ABI后，智能合约ABI才会被记录）