更多资源
创建移动端 App 内通用链接

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

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

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

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

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

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

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

使用 encodeURIComponentdappUrl 进行编码:

const encodedDappUrl = encodeURIComponent(dappUrl);

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

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

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 的百万流量通道。