需求
- 需求为其他应用能够跳转至我方应用,并且能够实现自动登陆。
开发环境
- 对方为Android/IOS原生应用,我方为Ionic1的WebApp。
分析
- 对方app点击某一按钮后能够打开我方app。
- 通过对方app跳转过来的需要自动登录,这就需要传递用户名/密码,跳转后走登陆方法。
对方app跳转至我方app
customurlscheme
基于cordova-plugin-customurlscheme插件实现
- 安装插件
URL_SCHEME为定义的scheme值,供外部应用跳转使用。cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=xxxxscheme
安装完插件后,通过调用<a href="xxxxscheme://">打开应用</a>(xxxxscheme为应用定义的scheme)确实能够跳转至我方app。
这就成功了一半,只剩下接收参数。。。 - 监听应用跳转后的url值,从中获取对应的参数
由于我方app为Ionic1应用,所以监听写在了app.js中,需要在$ionicPlatform.ready方法中实现具体的方法function handleOpenURL(url) { alert("url-11--" + url); setTimeout(function () { alert("received url: " + url); }, 1000); }
但是实现了该方法后,发现依旧无法接收到相应的参数,github搜了一波发现遇到该问题的也不在少数,但都未解决。Github插件地址。
所以该插件只适合应用间的跳转,不适合传递参数
但在查询解决方法的同时也看到另外一种实现跳转的插件deeplink。
deepLink
- 安装插件
cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=xxxscheme--variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=xxx.cn --variable ANDROID_PATH_PREFIX=/
参数 | 说明 |
---|---|
URL_SCHEME | 外部启动当前app的url scheme |
DEEPLINK_SCHEME | the scheme to use for universal/app links. Defaults to ‘https’ in 1.0.13. 99% of the time you’ll use https here as iOS and Android require SSL for app links domains. |
DEEPLINK_HOST | 该插件响应的域名,按照示例,外部访问时链接必须以xxxscheme://xxx.cn/开头,才会被当前插件匹配 |
ANDROID_PATH_PREFIX | 可选参数,更多信息 |
- 配置config.xml,在ios平台部分添加配置:
<platform name="ios">
...
<config-file parent="com.apple.developer.associated-domains" target="*-Debug.plist">
<array>
<string>applinks:xxx.cn</string>
</array>
</config-file>
<config-file parent="com.apple.developer.associated-domains" target="*-Release.plist">
<array>
<string>applinks:xxx.cn</string>
</array>
</config-file>
</platform>
- 添加ionic-native组件并引用至当前工程
bower install ionic-native
<script src="lib/ionic-native/ionic.native.js"></script> - 参数处理方法
- 在app.js中添加ionic-native模块的引用
angular.module('starter', ['ionic', 'ionic.native'])
- 引入$cordovaDeeplinks对象
.run(function(...,$cordovaDeeplinks) {
- 具体处理
.run(function($ionicPlatform,$cordovaDeeplinks,$timeout) { $ionicPlatform.ready(function() { $cordovaDeeplinks.route({ '/product': { target: 'product', parent: '' } }).subscribe(function(match) { // One of our routes matched, we will quickly navigate to our parent // view to give the user a natural back button flow $timeout(function() { document.getElementById('iValue').innerHTML = match.$args.productId; console.log(match,match.$route.parent, match.$args); // $state.go(match.$route.parent, match.$args); // Finally, we will navigate to the deeplink page. Now the user has // the 'product' view visibile, and the back button goes back to the // 'products' view. $timeout(function() { document.getElementById('iValue').innerHTML = match.$args.productId; console.log('222',match,match.$route.parent, match.$args); //$state.go(match.$route.target, match.$args); }, 800); }, 100); // Timeouts can be tweaked to customize the feel of the deeplink }, function(nomatch) { console.warn('No match', nomatch); }); }); })
- 在app.js中添加ionic-native模块的引用
-
以上配置会接受url为 xxxscheme://xxx.cn/product?arg0=value0&arg1=value1…链接的信息,并进行处理。
需要注意的是路由的路径中不要在末尾添加/,否则容易造成android可以正常匹配处理,ios不能匹配的问题。
-
我方app跳转至对方app
这个就非常简单了,只需跳到对方app,传对应的参数,其他的让对方处理就好了。。。
- 插件准备
- cordova-plugin-appavailability 检测目标app是否安装
- com.lampa.startapp 启动目标app
- 具体实现
var scheme;
// 不同的平台实现方式是不同的
if (ionic.Platform.isAndroid()) {
//第三方应用的包名
scheme = 'com.xxxxx.xxx.xx';
appAvailability.check(scheme, function () {
//配置跳转
var sApp = startApp.set({
"component": ["com.xxxxx.xxx.xx", "com.xxxxx.xxx.xx.business.basic.ui.WelcomeActivity"]
}, {
//跳转时传递的参数
"loginid": appUser.loginid,
"password": appUser.password
});
sApp.start(function () {
}, function (error) {
console.log(error);
});
}, function () {
toastService.showShortCenter("请安装xxxAPP");
});
} else {
// ios
scheme = 'xxxscheme://';
appAvailability.check(scheme,
function () {
var sApp = startApp.set("xxxscheme://" + appUser.loginid + "-" + appUser.password);
sApp.start(function () {
}, function (error) {
console.log(error);
});
}, function () {
toastService.showShortCenter("请安装xxxAPP");
});
}