虾扯蛋🥚
第一次在掘金写东西，有点紧张。
我为啥写这个，是因为我最近用 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
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
测试 ⚙
- 重新编译安装
ionic cordova run ios
- 在浏览器打开
myapp-mak://test
获取URL有啥作用呢？获取URL之后，我们可以判断URL的不同进行不同的操作，例如：打开指定页面、分享、支付……
结束 😁
第一次写文，写得不是很好。😜
除了通过URL Scheme方式来打开app。其实可以使用Universal Links && Deep Linking 来打开app。
分享一个 Universal Links && Deep Linking Cordova 插件给大家github.com/nordnet/cor…
