npm包 cordova-plugin-queries-schemes-okit 使用教程

介绍

这篇文章是为前端开发者写的,主要介绍使用npm包 cordova-plugin-queries-schemes-okit来解决iOS 9及以下版本应用打开外部链接的问题。

cordova-plugin-queries-schemes-okit是一个 Apache Cordova/PhoneGap 插件,用于解决 iOS 9 及更低版本下应用打开外部链接的问题。iOS 9 引入了一种叫做“应用间 URL 调用(Universal Links)”的新特性,这一特性使得应用可以与 Web 相互跳转,但这种跳转行为会破坏之前的应用间链接拦截机制,会导致应用调用失败。

安装

  1. 安装cordova-plugin-queries-schemes-okit
------- ------ --- -----------------------------------
  1. 在config.xml文件中设置白名单,并将需要支持打开的链接添加到Queries Schemes中,如:
--------
  ------- ------------
  ----------------- ----------
  ------------- ----------
  -----------------
    ----- --------------------
  ------------------
  --------- -----------
    ------------- ---------------
    ------------- --------------------
    ------------- -----------------
    ------------- --------------
    ------------- --------------
    ------------- --------------
    ------------- ---------------
    -------- ----------------------
      ------ ------------------ ------------------------
    ----------
  -----------
---------

需要注意的是,Queries Schemes是限制iOS版本在9.0以下的设备使用的,因此需要根据自己的需求进行选择和添加。

使用

  1. 配置外部链接响应函数

在 JavaScript 中,通过 window.handleOpenURL(url) 可以定义所有外部链接的响应函数:

-------------------- - ----- -- -
  ----------------- - - -----
--
  1. 打开外部链接
---------------- -----------

此时会弹出系统默认浏览器打开外部链接,同时也会调用之前设置的响应函数。

示例代码

---------------------------------------- -------------- -------

-------- --------------- -
  -------------------- - -------- ----- -
    ----------------- - - -----
  --

  --- --- - -------------------------
  ---------------- -----------
-

总结

在 iOS 9 以前的版本中,应用打开外部链接有相应的机制进行拦截和判断,但是 iOS 9 引入了新特性 Universal Links,使得应用间可以相互调用,但也破坏了之前的拦截机制,导致应用打开外部链接失败的问题。npm包 cordova-plugin-queries-schemes-okit就是专门为解决这个问题而开发的一个插件,使用非常方便,只需要通过白名单和queries schemes来添加需要支持打开的链接,并设置相应的响应函数即可。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60056ccd81e8991b448e658c


猜你喜欢

  • npm 包 nodetest-xing 使用教程

    简介 nodetest-xing 是一个用来测试 Node.js 应用的 npm 包。它可以帮助您方便地进行单元测试和集成测试,提高应用程序的可靠性和稳定性。 安装 在终端中运行以下命令来安装 nod...

    3 年前
  • npm 包 react-native-progress-bar-animated 使用教程

    简介 react-native-progress-bar-animated 是一种使用简单且高度可定制的 React Native 进度条动画组件。该组件在显示进度时可以提供动画效果,使其更具有吸引力...

    3 年前
  • npm 包 poi-error-overlay 使用教程

    前言 在开发过程中,我们常常会遇到错误的情况,为了更好地排查问题,我们需要一个能够友好地展示错误信息的工具。poi-error-overlay 就是一个很好的选择。

    3 年前
  • npm 包 sinhala-words 使用教程

    英文不是全球共通语言,因此世界上有很多人在使用不同的语言进行交流。Sinhala 是斯里兰卡的主要语言,拥有超过 1.5 亿的使用者。作为前端开发人员,我们应该积极学习和适应各种语言,并提供良好的用户...

    3 年前
  • npm 包 aor-language-croatian 使用教程

    在前端开发中,通常会使用各种 npm 包来帮助我们快速构建和开发应用程序。这篇文章将介绍一个非常实用的 npm 包 aor-language-croatian,它可以帮助我们在 React-Admin...

    3 年前
  • npm 包 cordova-plugin-deviceinformation-xmk 使用教程

    介绍 cordova-plugin-deviceinformation-xmk 是一个用于获取设备信息的 Cordova 插件。它可以获取设备的品牌、型号、系统版本、网络类型、屏幕尺寸等信息。

    3 年前
  • npm 包 rxclipboard 使用教程

    前言 在开发前端应用程序时,我们经常需要与剪贴板进行交互。虽然浏览器提供了一些 API 来实现这种交互,但我们也可以使用 npm 包来帮助我们更容易地管理剪贴板。本文将介绍如何使用一个名为 rxcli...

    3 年前
  • npm 包 clscroll 使用教程

    前言 在前端页面开发过程中,我们经常会遇到需要实现页面滚动效果的需求,例如:页面滚动时实时更新导航栏高亮、滚动无限加载等等。而这些功能背后总离不开 JavaScript 的支持,我们可以使用一些现成的...

    3 年前
  • npm 包 fancy-protractor-reporter 使用教程

    前言 在前端自动化测试中,Protractor 是一个流行的测试框架,而在测试结果展示方面,fancy-protractor-reporter 是一个很好用的插件,它将测试结果以图表和概览的形式呈现,...

    3 年前
  • npm 包 @cspanring/ember-font-awesome 使用教程

    在前端开发中,常常需要使用图标来增加页面的视觉效果。其中,Font Awesome 是一套非常流行的图标库,提供了丰富的图标选择和定制方式。而 @cspanring/ember-font-awesom...

    3 年前
  • npm 包 vuewheelmlyon 使用教程

    介绍 vuewheelmlyon 是一个基于 Vue.js 的框架组件,它提供了一系列轮播组件、幻灯片等前端界面组件。这个组件是专门为实现炫酷前端页面而设计的,而且它还具有高度的可定制性。

    3 年前
  • npm 包 logbang 使用教程

    在前端开发中,如何进行良好的日志记录是非常重要的,一方面可以帮助我们在调试时快速定位问题,另一方面也可以方便我们跟踪用户行为及其反馈。而 npm 包 logbang 可以帮助我们实现这一目的。

    3 年前
  • npm 包 masks2-js 使用教程

    介绍 masks2-js 是一个用于处理数据脱敏的 JavaScript 库。它可以将给定的数据使用特定的脱敏规则进行处理,以保护敏感信息的泄露。 masks2-js 适用于 Web 前端开发,可以在...

    3 年前
  • NPM包redux-tiles 使用教程

    前言 前端开发中,状态管理是一个一直被讨论的话题。Redux作为一个流行的状态管理库,其设计思想不仅在React生态圈内得到广泛应用,也在Vue和Angular的生态圈内得到了很好的推广。

    3 年前
  • 使用 npm 包 guided-editor 进行前端开发

    介绍 在前端开发中,我们经常需要进行文本编辑的操作。而 guided-editor 就是一个非常好用的 npm 包,它可以提供给我们一个强大的文本编辑器,使我们能够快速而且方便地进行文本编辑。

    3 年前
  • npm 包 unact 使用教程

    如果你是一位前端开发者,那么你一定会遇到使用 React 来构建页面的情况。而近几年在 React 生态圈中,有一种叫做 unact 的 npm 包也出现在我们的视野中,它被称为是一款 React-l...

    3 年前
  • npm 包 material-ui-notifications 使用教程

    介绍 在前端开发中,通知是一个很重要的部分,特别是在 Web 应用程序中,以便及时向用户提供有关系统状态的及时信息。material-ui-notifications 是一个基于 Material-U...

    3 年前
  • npm 包 nativescript-fonepaisa 使用教程

    前言 nativescript-fonepaisa 是一款基于 Nativescript 和 Fonepaisa 的移动支付平台的 npm 包,可以帮助开发者通过移动App实现在线支付功能。

    3 年前
  • npm 包 webpack-md5-manifest-plugin 使用教程

    如果你是一名前端开发者,那么你一定知道 webpack 版本管理的重要性。特别是在项目打包的过程中,能够正确地管理资源文件版本和文件名是非常重要的。今天,我们将介绍一款非常实用的 webpack 插件...

    3 年前
  • npm 包 @razvanz/service-error 使用教程

    在前端开发过程中,错误处理是一项必不可少的工作。@razvanz/service-error 是一个整合了各种错误处理机制的 npm 包,可以快速、简单地实现错误处理的功能,特别是在连接到远程服务时。

    3 年前

相关推荐

    暂无文章