React页面自动唤起移动端App实现问题求助

你遇到的这个情况太常见了——浏览器出于安全机制，会拦截非用户主动触发的window.location跳转自定义协议（比如你的myapp://），但用户手动点击按钮或a标签的操作会被判定为合法交互，所以我们可以通过模拟用户点击隐藏的a标签来实现自动唤起的需求。

可行的代码实现方案 #

直接修改你的组件，通过创建隐藏a标签并模拟点击来完成唤起逻辑，同时加上失败后的网页跳转 fallback：

export default class Share extends Component {
  componentDidMount() {
    // 创建一个隐藏的a标签，用来模拟用户点击
    const appInvokeLink = document.createElement('a');
    appInvokeLink.href = 'myapp://redirect/acceptShare/12345';
    // 设置样式让标签彻底隐藏，不影响页面布局
    appInvokeLink.style.position = 'absolute';
    appInvokeLink.style.left = '-9999px';
    appInvokeLink.style.top = '-9999px';
    document.body.appendChild(appInvokeLink);

    setTimeout(() => {
      // 模拟用户点击这个隐藏链接
      appInvokeLink.click();

      // 检测唤起是否失败：如果1秒后页面还在前台，说明App没唤起，跳网页版
      setTimeout(() => {
        window.location.href = 'http://www.myapp.com/share/12345';
      }, 1000);
    }, 500);
  }

  render() {
    return (
      <div>
        <button type="button" id="but" name="nbut" onClick={(e): void => {
          e.preventDefault();
          window.location.href='myapp://redirect/acceptShare/12345';
        }}> Click here</button>
        <a name='nhid2' id='hid2' href='myapp://redirect/acceptShare/12345' >click2</a>
      </div>
    )
  }
}

关键逻辑说明 #

1. 为什么模拟点击有效：创建真实的a标签并触发click()，这个操作会被浏览器识别为“用户主动交互”，从而允许跳转自定义协议，绕过window.location的拦截限制。
2. Fallback 跳转逻辑：第二个定时器的作用是兜底——如果App成功唤起，当前页面会被切换到后台，定时器的跳转代码不会执行；如果唤起失败（用户没装App），1秒后就会自动跳转到网页版链接。
3. 注意事项：
   • 定时器的时间可以根据实际情况调整，500ms-1s是比较稳妥的范围，给App足够的唤起时间。
   • 一定要把创建的a标签添加到DOM中再执行点击，否则模拟点击会无效。
   • 部分严格的浏览器可能要求页面先有过用户交互（比如用户点击过页面）才能自动唤起，这种情况可以在页面加载时加个提示，让用户先点击页面再触发唤起逻辑。

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