移动端MetaMask DeepLink连接钱包跳转应用商店无法连接问题

问题根因 #

该问题和所连接的公链类型无关，核心是DeepLink拼接规则错误、缺少运行环境判断，导致MetaMask内置浏览器无法正确加载DApp地址，触发默认的应用商店跳转逻辑。

对应修复方案 #

• 修正DeepLink地址拼接规则
  MetaMask的DeepLink格式要求https://metamask.app.link/dapp/后拼接的DApp地址不能携带http://或https://协议前缀，带协议的地址会被识别为非法路径，直接触发跳转商店的兜底逻辑。
  正确代码示例：

  // 错误写法：dappUrl带协议前缀
  // const dappUrl = 'https://your-dapp.com';
  // 正确写法：去掉协议前缀
  const dappUrl = 'your-dapp.com';
  const metamaskAppDeepLink = 'https://metamask.app.link/dapp/' + dappUrl;
  

  本地调试注意：不要直接拼接localhost:端口或内网IP，这类本地地址MetaMask无法通过公网访问，需要先用内网穿透工具生成公网HTTPS域名，再按上述规则拼接。

• 增加运行环境判断，避免重复跳转
  点击连接钱包前需要先判断当前是否已经处于MetaMask移动端内置浏览器环境，如果已经在MetaMask内打开页面，直接初始化provider发起连接即可，重复触发DeepLink跳转也会导致异常跳转到应用商店。
  参考实现代码：

  // 判断是否为MetaMask移动端环境
  const isInMetaMaskMobile = window.ethereum?.isMetaMask && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  
  if (isInMetaMaskMobile) {
    // 已在MetaMask环境内，直接走和桌面端一致的连接逻辑
    const _provider = new ethers.providers.Web3Provider(window.ethereum);
    store.provider = _provider;
    // 发起钱包连接请求
    await _provider.send('eth_requestAccounts', []);
  } else {
    // 外部浏览器环境才跳转DeepLink唤起MetaMask
    const dappUrl = 'your-dapp.com';
    const metamaskAppDeepLink = 'https://metamask.app.link/dapp/' + dappUrl;
    window.location.href = metamaskAppDeepLink;
  }
  

验证标准 #

修复后完整流程为：移动端第三方浏览器点击连接钱包按钮 -> 正常唤起MetaMask App -> MetaMask内置浏览器自动加载目标DApp -> 弹出钱包连接授权弹窗，不会再跳转至应用商店。

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