创建移动端 App 内通用链接#

为了使用户能够在移动端 APP 内轻松交互你的 DApp，你需要在移动浏览器中为你的 DApp 创建 deeplink，实现直接导向 OKX App 的发现页中打开你的 DApp。

本教程将使用 JavaScript 引导你完成这个过程。

步骤 1：定义深度链接参数#

打开你的 JavaScript 文件或脚本，定义你想作为深度链接参数传递的 URL：

const dappUrl = "https://app.uniswap.org/";

将 https://app.uniswap.org/ 替换为你 DApp 的实际 URL。

步骤 2：编码 deeplink 参数#

使用 encodeURIComponent 对 dappUrl 进行编码：

const encodedDappUrl = encodeURIComponent(dappUrl);

这确保了 URL 中的特殊字符会被正确处理，以便包含在网页链接中。

步骤 3：构建 deeplink#

将编码的参数组合起来形成深度链接：

const deepLink = "okx://wallet/dapp/url?dappUrl=" + encodedDappUrl;

这创建了特定于你 DApp 的深度链接，适用于 OKX 平台。

步骤 4：编码整个URL#

编码整个 URL，包括深度链接，以确保在 Web 应用程序中有正确的格式：

const encodedUrl = "https://www.okx.com/download?deeplink=" + encodeURIComponent(deepLink);

这产生了用户将要与之交互的最终可供跳转的 deeplink。

步骤 5：输出或使用#

你可以将 encodedUrl 打印到控制台或根据需要在你的应用程序中使用：

console.log(encodedUrl);

这一行是为了演示目的；在你的实际应用程序中，你将根据需要使用 encodedUrl。

测试：#

这段 JavaScript 代码是一个客户端脚本，用于检查用户的设备和环境，以确定用户是否从移动设备(特别是 iOS 或 Android 设备)访问网页，并且是否正在使用 OKX 应用。

const ua = navigator.userAgent;
const isIOS = /iphone|ipad|ipod|ios/i.test(ua);
const isAndroid = /android|XiaoMi|MiuiBrowser/i.test(ua);
const isMobile = isIOS || isAndroid;
const isOKApp = /OKApp/i.test(ua);

if (isMobile && !isOKApp){
  const encodedUrl = "https://www.okx.com/download?deeplink=" + encodeURIComponent("okx://wallet/dapp/url?dappUrl=" + encodeURIComponent(location.href));
  window.location.href = encodedUrl;
} else if (window.okxwallet) {
  const accounts = await window.okxwallet.request({
        method: "eth_requestAccounts",
    }); 
}

总结：#

通过遵循这些步骤，你已成功为你的 DApp 在发现页应用中创建了 deeplink 深度链接。这个链接在使用时会无缝地将用户引导到你的 DApp，从而为您的 DApp 开辟 OKX Web3 的百万流量通道。