单击移动浏览器中的按钮后如何打开移动应用程序（使用javascript / react）[深度链接]

Question

所以基本上我想要的是当用户点击移动浏览器上的按钮时：

如果该应用程序已安装在用户的手机上，则会打开该应用程序。
如果未安装该应用程序，我想将用户重定向到用户可以安装该应用程序的 Play 商店应用程序/苹果商店。

任何解决方案/概述/想法/来源都将受到高度赞赏。

注意：我想使用 JavaScript 或 React 而不是 java

非常感谢您的提前帮助！

Answer 1

您尝试执行的操作称为deeplinking ，您可以通过访问您的 android 应用程序拥有的URI protocol来实现这一点，例如：

example://www.myapp.com/anystring

将您的应用设置为可用于 URI 打开。 将此接收器添加到您的 android 清单中：

<receiver android:name=".DeepLinkReceiver">
    <intent-filter >
        <data android:scheme="example" android:host="www.myapp.com" />
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE"/>
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>
</receiver>

在浏览器端调用这个方法：

window.open('example://www.myapp.com/anystring');

它将打开包含此字符串作为 url 的窗口，因此浏览器将自动要求用户重定向到您的应用程序

Answer 2

我为此找到了 javaScript 解决方案，它适用于 Instagram 应用程序。

但我面临的问题是此处为 Instagram 提供的“意图 URL”，我在网上找到了它，但我无法找到 Play 商店中其他应用程序的“意图 URL”。

任何有关如何在 Play 商店中查找其他应用程序的意图 URL 的帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Deep Learning</title>
  </head>
  <body>
    <div class="container">
      <p id="case"></p>
      <button onclick="openApp()">Open App</button>
    </div>
    <script>
      var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
      (function () {
        if (isMobile) {
          document.getElementById("case").textContent =
            "I am using Mobile browser";
        } else {
          document.getElementById("case").textContent =
            "I am using Desktop/Web browser";
        }
      })();
      function openApp() {
        if (isMobile) {
          const url =
            "intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end";

          window.location.replace(url);
        } else {
          window.location.replace("https://www.instagram.com");
        }
      }
    </script>
  </body>
</html>

单击移动浏览器中的按钮后如何打开移动应用程序（使用javascript / react）[深度链接]

问题描述

2 个解决方案

解决方案1
0 2022-07-11 22:13:54

解决方案2
0 2022-07-16 10:09:15

单击移动浏览器中的按钮后如何打开移动应用程序（使用javascript / react）[深度链接]

问题描述

2 个解决方案

解决方案1 0 2022-07-11 22:13:54

解决方案2 0 2022-07-16 10:09:15

解决方案1
0 2022-07-11 22:13:54

解决方案2
0 2022-07-16 10:09:15