侧边栏壁纸
博主头像
高大北博主等级

所有的再见中,我最喜欢明天见

  • 累计撰写 208 篇文章
  • 累计创建 151 个标签
  • 累计收到 20 条评论
标签搜索

目 录CONTENT

文章目录

小狐狸(metamask)连接【web3.0】

高大北
2022-06-13 / 0 评论 / 2 点赞 / 380 阅读 / 238 字 / 正在检测是否收录...

小狐狸钱包

官方文档 https://learnblockchain.cn/docs/web3js-0.2x/index.html?highlight=sig

1、添加js文件,名字metamaskApi.js

import {Message} from "element-ui";

const matemask = () => {
    let accounts = [];
    const sendEthButton = document.querySelector('.sendEthButton');
    sendEthButton.addEventListener('click', () => {
        getAccount().then((res) => {
            accounts = res[0]
            let wallet = accounts.slice(0, 6) + "..." + accounts.slice(-4)
           sessionStorage.setItem("address",accounts)
           Message({
                message: "login successfully!",
                type: "success"
            });
        });
    });
    function getAccount() {
        accounts = ethereum.request({method: 'eth_requestAccounts'});
        return accounts
    }
}
export default {
    matemask
};

2、前端页面调用

 <div @click="login()">
    <div >连接钱包</div>
</div> 

import restApi from "../service/web3/metamaskApi.js";  //在第二步的js

methods: {
login() {
			//验证电脑上是否安装小狐狸  
      if (typeof window.ethereum !== "undefined") {
        metamaskApi.matemask();
      } else {
        this.$message({
          message: "MetaMask is uninstalled!",
          type: "error",
        });
      }
    },
}

连接效果
metamask

所用依赖版本

"web3": "^0.20.7",
"web3-eth-abi": "^1.7.3",
"web3-utils": "^1.6.0",
"xhr2": "^0.2.1",
"keccak256": "^1.0.6",
2

评论区