如何从Web应用打开MetaMask移动端应用并实现钱包连接？

你的代码仅适配了桌面端的MetaMask浏览器扩展，移动端浏览器没有扩展环境，所以需要通过深度链接唤起或WalletConnect协议来实现移动端连接，具体操作如下：

方案1：使用MetaMask深度链接直接唤起 #

当检测不到provider时，针对移动端设备构造MetaMask的深度链接，引导用户跳转至MetaMask应用完成授权，之后再返回你的Web应用。

修改后的代码示例：

<script>
import detectEthereumProvider from '@metamask/detect-provider'

export default {
  name: 'metaProvider',
  methods: {
    async checkMetamask() {
      const provider = await detectEthereumProvider()
      if (provider) {
        // 桌面端逻辑不变
        console.log('Metamask detected!')
        const accounts = await provider.request({ method: 'eth_requestAccounts' })
        console.log(accounts)
      } else {
        // 判断是否为移动端设备
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        if (isMobile) {
          // 构造MetaMask深度链接，唤起移动端应用
          // 替换为你的Web应用地址，用于授权后返回
          const appUrl = window.location.href
          const deepLink = `metamask://connect?uri=${encodeURIComponent(appUrl)}`
          window.location.href = deepLink
          // 若深度链接唤起失败，引导用户手动操作
          setTimeout(() => {
            alert('请手动打开MetaMask应用并搜索你的Web应用进行连接')
          }, 1000)
        } else {
          console.log('Metamask not detected')
          alert('请安装MetaMask浏览器扩展')
        }
      }
    }
  }
}
</script>

<template>
  <button @click="checkMetamask">Connect to MetaMask</button>
</template>

方案2：集成WalletConnect（推荐） #

WalletConnect是跨设备的钱包连接标准，支持MetaMask移动端通过扫码连接，兼容性更强，步骤如下：

1. 安装WalletConnect依赖：

npm install @walletconnect/client @walletconnect/qrcode-modal

2. 修改代码实现扫码连接：

<script>
import detectEthereumProvider from '@metamask/detect-provider'
import WalletConnect from '@walletconnect/client'
import QRCodeModal from '@walletconnect/qrcode-modal'

export default {
  name: 'metaProvider',
  data() {
    return {
      connector: null
    }
  },
  methods: {
    async checkMetamask() {
      const provider = await detectEthereumProvider()
      if (provider) {
        // 桌面端逻辑
        console.log('Metamask detected!')
        const accounts = await provider.request({ method: 'eth_requestAccounts' })
        console.log(accounts)
      } else {
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        if (isMobile) {
          // 移动端使用WalletConnect扫码连接
          this.connector = new WalletConnect({
            bridge: 'https://bridge.walletconnect.org',
            qrcodeModal: QRCodeModal
          })

          // 检查是否已连接
          if (!this.connector.connected) {
            // 发起连接请求
            await this.connector.createSession()
          }

          // 监听连接成功事件
          this.connector.on('connect', (error, payload) => {
            if (error) throw error
            const { accounts } = payload.params[0]
            console.log('Connected accounts:', accounts)
          })

          // 监听断开事件
          this.connector.on('disconnect', (error, payload) => {
            if (error) throw error
            console.log('Disconnected')
          })
        } else {
          alert('请安装MetaMask浏览器扩展')
        }
      }
    }
  },
  beforeUnmount() {
    // 组件销毁时断开连接
    if (this.connector?.connected) {
      this.connector.killSession()
    }
  }
}
</script>

<template>
  <button @click="checkMetamask">Connect to MetaMask</button>
</template>

注意事项 #

• 深度链接方式需要确保你的Web应用支持HTTPS，MetaMask移动端仅信任HTTPS站点。
• WalletConnect方式依赖官方桥接服务，若需自定义桥接可自行部署。
• 移动端测试需在真实设备上进行，模拟器可能无法正确唤起MetaMask应用。

内容的提问来源于stack exchange，提问作者Sharvin