如何在 ionic 3 中使用 URL Scheme

最新推荐文章于 2024-04-09 09:59:39 发布

转载最新推荐文章于 2024-04-09 09:59:39 发布 · 896 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a746d9c6fb9a0634c26438f

文章标签：

本文介绍如何在Ionic项目中配置和使用URL Scheme实现应用间跳转。通过安装cordova-plugin-customurlscheme插件并设置特定的URL Scheme，可以在浏览器或其他应用中通过特定链接直接启动并传递参数给Ionic应用。

第一次在掘金写东西，有点紧张。

我为啥写这个，是因为我最近用 ionic 开发一个 app ，需要用 URL Scheme 。搞这个 URL Scheme 折腾了一下，所以写下此文，并分享给需要的朋友。?

简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。列如：微信的 URL Scheme 就是 weixin://，在浏览器中打开 weixin://scanqrcode 可以跳转到微信的扫一扫功能。

更多 URL Scheme ：www.zhihu.com/question/19…

我们就用ionic的tabs模板构建一个demo吧

 ionic start myApp tabs
复制代码

我们需要的安装的 URL Scheme Cordova 插件是cordova-plugin-customurlscheme

ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp-mak
复制代码

在根目录使用此命令进行安装,URL_SCHEME=myapp-mak我定义的协议名称是myapp-mak。名称随便起，只要不跟其他app冲突就好。?

如果安装后想修改协议名称的，可以去改config.xml和package.json。打开就能看到之前定义的协议名称了

ionic cordova run ios
复制代码

编译安装完成后，可以通过这个协议myapp-mak://随便写打开此app。如：在浏览器打开myapp-mak://test

    //获取url并显示在页面上
    (window as any).handleOpenURL = (url: string) => {
      console.log(url);
      this.url = url;
    };
复制代码

这句代码是获取是哪个URL打开的app了。

注意：handleOpenURL函数必须是全局唯一，否则无法正常接收

<allow-intent href="myapp-mak:*" />
复制代码

这里必须写上这句话，这句是允许我们定义的协议可以传递。否则handleOpenURL也无法接收到URL

ionic cordova run ios
复制代码

获取URL有啥作用呢？获取URL之后，我们可以判断URL的不同进行不同的操作，例如：打开指定页面、分享、支付……

第一次写文，写得不是很好。?

除了通过URL Scheme方式来打开app。其实可以使用Universal Links && Deep Linking 来打开app。

分享一个 Universal Links && Deep Linking Cordova 插件给大家github.com/nordnet/cor…

转载于:https://juejin.im/post/5a746d9c6fb9a0634c26438f