接到個新的需求,需要與其他app之間實現(xiàn)單點登陸,需要用到應用跳轉,Google了下找到了 ionic 可以使用的 url scheme 插件
https://github.com/EddyVerbruggen/Custom-URL-scheme.git
一颖医、在使用前先簡單了解下什么是urlcheme:
簡單的說检激，URL Scheme就是一個可以讓app相互之間可以跳轉的協(xié)議晦闰。列如：微信的 URL Scheme 就是 weixin://，在瀏覽器中打開 weixin://scanqrcode 可以跳轉到微信的掃一掃功能磷箕。
常見的一些url scheme,比如; sinaweibo:// , youku://, mqq:// ,weixin:// ,taobao:// , baidumap://等等,我們可以通過這些url 來直接打開應用以及調用一些相應的開放的功能。
二阵难、插件使用:
- 創(chuàng)建一個demo工程
ionic start targetProject
2.創(chuàng)建成功后添加平臺
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 打開當前應用
那么現(xiàn)在問題來了,比如我想通過另外一個ionic項目打開該工程
同樣的我們創(chuàng)建一個新工程schemeTest,添加平臺,這里就不再重復說明
實現(xiàn)打開應用的步驟有兩個
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代碼來實現(xiàn)打開,兩種方式都可以實現(xiàn)
2.找到工程下的config.xml文件并打開該文件
添加如下代碼:
<allow-intent href="mytargetapp:*" />
href中的值,根據(jù)要打開的目標app來定義,比如要打開微信,那么值就是
weixin:*
至此就可以通過schemeTest app來打開 targetProject app了
四、最后還有遺留了一個問題,就是targetProject 要如何才能知道是通過其他app 的 url scheme打開它的?
這個也比較簡單,打開targetProject工程下的app.component.ts文件
加入如下代碼:
constructor() {
// 用于接收url scheme傳入的參數(shù)
(window as any).handleOpenURL = (url: string) => {
setTimeout(() => {
this.handleOpenUrl(url);
}, 0);
};
}
/**
* 處理url scheme 的參數(shù)
* @author LiQun
* @date 2019-07-25
* @param url urlscheme 鏈接參數(shù),如 mytargetapp://somepath?foo=bar
*/
private handleOpenUrl(url: string) {
console.log('url', url);
}
這樣我們就可以根據(jù)接收到的參數(shù),做出相應的處理了
