admin 管理员组

文章数量: 887016

uniapp连接到MetaMask钱包插件

首先第一步，我们需要检测用户是否安装了MetaMask这个插件

我们这里需要安装一个包，叫做@metamask/detect-provider

这个可以百度一下用npm安装到对应的项目中就可以了

将这个包引入 ：

import detectEthereumProvider from "@metamask/detect-provider"

检测是否安装了MetaMask插件

            async setPeovider() { // 检测提供者uni.showLoading({title: '检测授权中...',mask: true});const provider = await detectEthereumProvider();if (provider) {this.startApp(provider); // Initialize your app} else {uni.showToast({title: '请先安装MetaMask插件',icon: 'none',duration: 3500});return false;}},

 这一步可以看成检测插件

           startApp(provider) {if (provider !== window.ethereum) {uni.showToast({title: '安装了多个钱包，加载失败',icon: 'none',duration: 3500});return false} else {uni.showLoading({title: '登录中...',mask: true});}this.login_metamask()},

然后就调起登录框，登录相应的账号

对应的还有一些事件的回调，下面的代码中也都写了注释

          login_metamask() {this.eth_requestAccounts(); // 拿到账户对应的账号ethereum.on('accountsChanged', (accounts) => { // 地址修改时收到通知localStorage.clear()this.setPeovider(); // 重新登录});ethereum.on('connect', (connectInfo) => { // 当 MetaMask 提供者第一次能够向链        提交 RPC 请求时，它会发出此事件。uni.clearStorage();// Time to reload your interface with accounts[0]!this.loginDapp();});ethereum.on('disconnect', (error) => { // 如果 MetaMask 提供者无法向任何链提        交 RPC 请求，它会发出此事件。// 这里可以打印一下error});// ethereum.on('message', (message) => { // MetaMask 提供者在收到一些应该通知消费者的消息时发出此事件。// 	console.log(message.data.result.hash)// })},eth_requestAccounts() { // 链接到MetaMaskethereum.request({method: 'eth_requestAccounts'}).then((account) => {this.$storemit('accounts/connect_wallet', account[0]);localStorage.setItem('accounts', account)this.loginDapp();});},loginDapp() { // 登录dapp (获取dapp信息)this.$appReq.post("login/registerByDapp", {'tuiguang_address': this.other.tuiguang_address,'username': this.accounts.current_address}, (res) => {if (res.data.code == 1) {if (!this.accounts.user) {this.$storemit('accounts/login', res.data.data);}this.asyncUser(res.data.data);} else {this.is_mm = false;this.tips = res.data.msg;uni.showToast({title: res.data.msg,icon: 'none'});}});},asyncUser(userMsg) {let that = thisthis.$appReq.post("user/asyncUser", {}, (res) => {// console.log("=================user==============");that.third_login(userMsg)if (res.data.code == 1) {setTimeout(() => {this.getTeamPerson();}, 600);} else {uni.showToast({title: res.data.msg,icon: 'none'});}});},third_login(userMsg) { // 登录let name = userMsg.namelet head = userMsg.headlet account = userMsg.addresslet that = thisglobal.$http.request({url: '/api/login/third_login',data: {name,head,account,}}).then(res => {res.data.data.address = accountlet data = JSON.stringify(res.data.data)localStorage.setItem('userMsg', data)uni.showToast({title: res.data.msg,icon: 'none',duration: 3500});localStorage.setItem('token', res.data.data.token)uni.$emit('userMsgToken')});},getTeamPerson() {this.$appReq.post("user/getTeamPerson", {}, (res) => {// console.log("=================getTeamPerson==============");// console.log(res);if (res.data.code == 1) {this.$storemit('other/setTeamPerson', res.data.data);this.$forceUpdate();} else {this.$storemit('other/setTeamPerson', false);/* uni.showToast({title:res.data.msg,icon:'none'});	 */}});this.$appReq.post("user/getTeamPerson2", {}, (res) => {// console.log("=================getTeamPerson2==============");// console.log(res);if (res.data.code == 1) {this.$storemit('other/setTeamPerson2', res.data.data);this.$forceUpdate();} else {this.$storemit('other/setTeamPerson2', false);/* uni.showToast({title:res.data.msg,icon:'none'});	 */}});},

本文标签： uniapp连接到MetaMask钱包插件

版权声明：本文标题：uniapp连接到MetaMask钱包插件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732354819h1534129.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。