虾扯蛋🥚
第一次在掘金写东西,有点紧张。
我为啥写这个,是因为我最近用 ionic 开发一个 app ,需要用 URL Scheme 。搞这个 URL Scheme 折腾了一下,所以写下此文,并分享给需要的朋友。😝
什么是 URL Scheme❓
简单的说,URL Scheme就是一个可以让app相互之间可以跳转的协议。列如:微信的 URL Scheme 就是 weixin://
,在浏览器中打开 weixin://scanqrcode
可以跳转到微信的扫一扫功能。
更多 URL Scheme :https://www.zhihu.com/question/19907735
开始撸代码 💻
构建demo 🐒
我们就用ionic的tabs模板构建一个demo吧
1 | ionic start myApp tabs |
安装 URL Scheme Cordova 插件 🔧
我们需要的安装的 URL Scheme Cordova 插件是cordova-plugin-customurlscheme
插件地址:https://github.com/EddyVerbruggen/Custom-URL-scheme
1 | ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp-mak |
在根目录使用此命令进行安装,URL_SCHEME=myapp-mak
我定义的协议名称是myapp-mak
。名称随便起,只要不跟其他app冲突就好。😝
如果安装后想修改协议名称的,可以去改config.xml和package.json。打开就能看到之前定义的协议名称了
编译安装app到手机上📱
1 | ionic cordova run ios |
编译安装完成后,可以通过这个协议myapp-mak://随便写
打开此app。如:在浏览器打开myapp-mak://test
如何知道是哪个URL打开的App❓
- 获取url
1 | //获取url并显示在页面上 |
这句代码是获取是哪个URL打开的app了。
注意:handleOpenURL函数必须是全局唯一,否则无法正常接收
- 修改config.xml
1 | <allow-intent href="myapp-mak:*" /> |
这里必须写上这句话,这句是允许我们定义的协议可以传递。否则handleOpenURL也无法接收到URL
测试 ⚙
- 重新编译安装
1 | ionic cordova run ios |
- 在浏览器打开
myapp-mak://test
获取URL有啥作用呢?获取URL之后,我们可以判断URL的不同进行不同的操作,例如:打开指定页面、分享、支付……
结束 😁
第一次写文,写得不是很好。😜
除了通过URL Scheme方式来打开app。其实可以使用Universal Links && Deep Linking 来打开app。
分享一个 Universal Links && Deep Linking Cordova 插件给大家https://github.com/nordnet/cordova-universal-links-plugin