首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小狐狸(metamask)连接

小狐狸(metamask)连接

作者头像
高大北
发布2022-06-14 20:54:38
发布2022-06-14 20:54:38
1.7K00
代码可运行
举报
运行总次数:0
代码可运行

小狐狸钱包

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

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

代码语言:javascript
代码运行次数:0
运行
复制
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、前端页面调用

代码语言:javascript
代码运行次数:0
运行
复制
 <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",
        });
      }
    },
}

连接效果

所用依赖版本

代码语言:javascript
代码运行次数:0
运行
复制
"web3": "^0.20.7",
"web3-eth-abi": "^1.7.3",
"web3-utils": "^1.6.0",
"xhr2": "^0.2.1",
"keccak256": "^1.0.6",
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小狐狸钱包
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档