阅读 1789

如何在 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
复制代码
  1. 在浏览器打开myapp-mak://test

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

结束 😁

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

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

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

关注下面的标签,发现更多相似文章
评论