如何在 ionic 3 中使用 URL Scheme

虾扯蛋🥚

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

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

什么是 URL Scheme❓

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

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

开始撸代码 💻

构建demo 🐒

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

ionic start myApp tabs
复制代码

安装 URL Scheme Cordova 插件 🔧

咱们须要的安装的 URL Scheme Cordova 插件是cordova-plugin-customurlscheme

插件地址：github.com/EddyVerbrug…

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

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

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

编译安装app到手机上📱

ionic cordova run ios
复制代码

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

如何知道是哪一个URL打开的App❓

• 获取url

  

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

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

注意：handleOpenURL函数必须是全局惟一，不然没法正常接收

• 修改config.xml

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

这里必须写上这句话，这句是容许咱们定义的协议能够传递。不然handleOpenURL也没法接收到URL

测试 ⚙

1. 从新编译安装

ionic cordova run ios
复制代码

2. 在浏览器打开myapp-mak://test

获取URL有啥做用呢？获取URL以后，咱们能够判断URL的不一样进行不一样的操做，例如：打开指定页面、分享、支付……

结束 😁

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

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

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