接到个新的需求,需要与其他app之间实现单点登陆,需要用到应用跳转,Google了下找到了 ionic 可以使用的 url scheme 插件
https://github.com/EddyVerbruggen/Custom-URL-scheme.git
一、在使用前先简单了解下什么是urlcheme:
简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。列如：微信的 URL Scheme 就是 weixin://，在浏览器中打开 weixin://scanqrcode 可以跳转到微信的扫一扫功能。
常见的一些url scheme,比如; sinaweibo:// , youku://, mqq:// ,weixin:// ,taobao:// , baidumap://等等,我们可以通过这些url 来直接打开应用以及调用一些相应的开放的功能。
二、插件使用:
- 创建一个demo工程
ionic start targetProject
2.创建成功后添加平台
ionic cordova platform add android
ionic cordova platform add ios
3.添加插件
ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mytargetapp
插件安装完成后,就可以通过url scheme 来打开该app了。
三、使用其他ionic app 打开当前应用
那么现在问题来了,比如我想通过另外一个ionic项目打开该工程
同样的我们创建一个新工程schemeTest,添加平台,这里就不再重复说明
实现打开应用的步骤有两个
1.添加代码,打开工程下页面,比如tab/tab1.page.html页面
在该文件中添加如下代码:
<button onclick="window.open('mytargetapp://somepath?foo=bar', '_system')">打开应用</button>
<a href="mytargetapp://somepath?foo=bar">打开应用</a>
这里采用了两种方式,一种是使用a标签,通过href属性来打开,另外一种方式是添加click时间,增加js代码来实现打开,两种方式都可以实现
2.找到工程下的config.xml文件并打开该文件
添加如下代码:
<allow-intent href="mytargetapp:*" />
href中的值,根据要打开的目标app来定义,比如要打开微信,那么值就是
weixin:*
至此就可以通过schemeTest app来打开 targetProject app了
四、最后还有遗留了一个问题,就是targetProject 要如何才能知道是通过其他app 的 url scheme打开它的?
这个也比较简单,打开targetProject工程下的app.component.ts文件
加入如下代码:
constructor() {
// 用于接收url scheme传入的参数
(window as any).handleOpenURL = (url: string) => {
setTimeout(() => {
this.handleOpenUrl(url);
}, 0);
};
}
/**
* 处理url scheme 的参数
* @author LiQun
* @date 2019-07-25
* @param url urlscheme 链接参数,如 mytargetapp://somepath?foo=bar
*/
private handleOpenUrl(url: string) {
console.log('url', url);
}
这样我们就可以根据接收到的参数,做出相应的处理了
