智能合约开发笔记--html页面使用ethers.js与合约交互

本文提供一个例子，演示在html页面中如何使用ethers.js，并通过metamask钱包连接，与区块链进行交互。包含的内容有：

1.查询metamask钱包的账户地址，账户金额；

2.与样例合约 Greeter进行交互， 调用查询方法；调用修改状态变量的方法； 监听事件，对修改后的状态进行回调。

直接上代码：

示例合约： Greeter.sol #选用hardhat项目的默认示例，加了一个event

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
        emit SetGreet(_greeting,msg.sender);
    }

    event SetGreet(string _greeting,address sender);
}

html页面代码：

  
  
  
  



  
    连接metamask钱包


    账户地址：


    账户余额：

  
  


  
    Greeter合约greet函数


    Greeter合约setGreeting



    
  

演示方法说明：

1.使用hardhat 开启一个本地节点；  不熟悉的可以看我的上一篇hardhat使用入门

2.将上面的合约发布到本在环境；

3.在chrome中打开metamask 连接到本地环境；

4.将上面的html代码保存成html文件,放到本地web服务器根目录下，然后在chrome打开；  可以在页面中进行测试；