Flutter中通过Deep Link实现钱包未安装时跳转应用商店

核心思路 #

当尝试通过钱包专属Deep Link唤起应用失败时，立即根据用户设备系统（iOS/Android）重定向至对应平台的应用商店。

1. 提前收集钱包的关键链接 #

每个主流钱包都有专属的Deep Link协议和应用商店地址，你需要提前整理目标钱包的两类链接：

• MetaMask
  • Deep Link协议：metamask://
  • App Store地址：https://apps.apple.com/us/app/metamask/id1438144202
  • Play Store地址：https://play.google.com/store/apps/details?id=io.metamask
• Trust Wallet
  • Deep Link协议：trust://
  • App Store地址：https://apps.apple.com/us/app/trust-crypto-bitcoin-wallet/id1288339409
  • Play Store地址：https://play.google.com/store/apps/details?id=com.wallet.crypto.trustapp

2. 实现唤起失败的检测逻辑 #

通过定时器判断Deep Link是否唤起成功，若超时则跳转应用商店：

function handleWalletRedirect(walletDeepLink, appStoreUrl, playStoreUrl) {
  const start = Date.now();
  // 尝试唤起钱包应用
  window.location.href = walletDeepLink;

  // 检测唤起是否成功，超时则跳转商店
  setTimeout(() => {
    const elapsed = Date.now() - start;
    // 1000ms为经验阈值，可根据测试调整
    if (elapsed > 1000) {
      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      window.location.href = isIOS ? appStoreUrl : playStoreUrl;
    }
  }, 100);
}

3. 结合Wallet Connect的连接流程 #

以Wallet Connect v2为例，将生成的连接URI转成钱包Deep Link，再调用上述检测函数：

// 假设已通过Wallet Connect获取到连接uri
const wcUri = "wc:xxxxxx...";
// 生成MetaMask的Deep Link（将wc uri编码后拼接）
const metamaskDeepLink = `metamask://wc?uri=${encodeURIComponent(wcUri)}`;
const appStoreLink = "https://apps.apple.com/us/app/metamask/id1438144202";
const playStoreLink = "https://play.google.com/store/apps/details?id=io.metamask";

// 用户点击连接按钮时触发
document.getElementById('connect-wallet-btn').addEventListener('click', () => {
  handleWalletRedirect(metamaskDeepLink, appStoreLink, playStoreLink);
});

关键注意事项 #

• 浏览器拦截问题：部分移动浏览器（如Safari）禁止自动跳转，必须通过用户主动点击按钮触发逻辑，避免被拦截。
• 参数编码：传递wc uri到Deep Link时，必须用encodeURIComponent编码，防止参数解析错误。
• 阈值调整：不同设备的唤起响应时间有差异，需根据实际测试调整定时器的延迟和判断时长。

内容的提问来源于stack exchange，提问作者Ximena Díaz