像素格子

ganache安装

全局安装ganche

npm install -g ganache

启动本地以太坊环境

ganache -p 8545

可以看到，ganache给我们提供了一些测试账号

关闭网络的命令

ctrl + c

remix 连接ganache

选择部署里面的custom external http provider

选择ganache端口

打开sol文件部署

Metamask添加测试网

导入账户钱包

将之前启动网络提供的账户私钥导入

核心代码编写

引入web3js

 <!-- 引入 Web3.js -->
    <script src="https://cdn.jsdelivr.net/npm/web3@1.8.0/dist/web3.min.js"></script>

检测metamask是否安装

if (typeof window.ethereum !== "undefined") {
      console.log("MetaMask已安装!");
    } else {
      console.log("请安装MetaMask!");
    }

连接用户钱包

const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    userAccount = accounts[0];

创建web3实例

url为本地的ganache地址，也可以是其他rpc

// 创建web3实例
    web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545"));

创建合约实例

// 创建合约实例
    contract = new web3.eth.Contract(contractABI, contractAddress);

abi是从remix compiler中复制的

合约的地址

备注

重启ganache并重新部署， 合约地址也要修改，用户的账户也要重新导入