随着移动应用的普及，自定义 URL Scheme 在移动开发中也变得越来越常见。在前端开发中，为了方便自定义 URL Scheme，我们可以使用 @yci/custom-url-scheme 这个 npm 包。
安装 @yci/custom-url-scheme
要使用 @yci/custom-url-scheme，需要先安装它。可以在终端中输入以下命令：
npm install @yci/custom-url-scheme --save
使用 @yci/custom-url-scheme
在安装完成后，就可以使用 @yci/custom-url-scheme 了。
基本用法
下面是一个简单的例子，展示了如何使用 @yci/custom-url-scheme 创建一个自定义的 URL Scheme，并监听它的打开事件。
-- -------------------- ---- -------
------ --------------- ---- -------------------------
----- ----------- - -----------------
----- ------ - --- -----------------------------
-------------------------- -- -
------------------------ -- ----------
---这个例子中，我们首先引入了 @yci/custom-url-scheme 包，并创建了一个名为 myUrlScheme 的自定义 URL Scheme。然后，我们使用 addSchemeHandler 方法添加了一个打开事件处理程序，当我们打开 myUrlScheme 时，就会在控制台输出 myUrlScheme is opened!。
带参数的 URL Scheme
有时，我们需要通过 URL Scheme 传递参数。@yci/custom-url-scheme 也可以实现这个需求。
下面是一个例子，展示了如何使用 @yci/custom-url-scheme 创建一个带参数的 URL Scheme，并从 URL Scheme 中获取参数。
-- -------------------- ---- -------
------ --------------- ---- -------------------------
----- ----------- - -----------------
----- ------ - --- -----------------------------
-------------------------------- -- -
--------------------- ----------- ------------
---
----- --------------------- - -------- -- -
----- --- - --------------------------
-------------------- - ----
--
-------------------------------在这个例子中，我们创建了一个名为 myUrlScheme 的 URL Scheme，并使用 addSchemeHandler 方法添加了一个打开事件处理程序。这个处理程序接收一个参数，我们在打开 URL Scheme 时将参数传递给它。然后，我们使用 navigateToMyUrlScheme 方法打开 URL Scheme，并传递了一个名为 hello 的参数。
过滤 URL Scheme
有时，我们需要过滤掉一些 URL Scheme。例如，我们可能只对特定的 URL Scheme 有兴趣，其他的则不关心。@yci/custom-url-scheme 也支持这个功能。
下面是一个例子，展示了如何使用 @yci/custom-url-scheme 过滤掉一些 URL Scheme。
-- -------------------- ---- -------
------ --------------- ---- -------------------------
----- ----------- - -----------------
----- ---------------- - ----------------------
----- ------ - --- -----------------------------
-------------------------------- -- -
--------------------- ----------- ------------
---
------------------------------------------
----- --------------------- - -------- -- -
----- --- - --------------------------
-------------------- - ----
--
----- -------------------------- - -- -- -
----- --- - ----------------------
-------------------- - ----
--
-------------------------------
-----------------------------在这个例子中，我们创建了一个名为 myUrlScheme 的 URL Scheme，并使用 addSchemeHandler 方法添加了一个打开事件处理程序。我们还在 scheme 对象上使用了 addIgnoredScheme 方法，忽略了名为 ignoredurlscheme:// 的 URL Scheme。
然后，我们使用 navigateToMyUrlScheme 方法打开 URL Scheme，并传递了一个名为 hello 的参数。接下来，我们使用 navigateToIgnoredUrlScheme 方法打开了另一个名为 ignoredurlscheme:// 的 URL Scheme。我们可以看到，控制台只输出了 Received parameters: hello，而没有输出关于 ignoredurlscheme:// 的信息。
总结
@yci/custom-url-scheme 是一个方便的 npm 包，可以帮助前端开发人员轻松创建和管理自定义 URL Scheme。使用它，可以快速创建带参数的 URL Scheme，并从 URL Scheme 中获取参数。此外，它还支持过滤 URL Scheme，以便更好地管理它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce181e8991b448e6941