应用跳转——Ionic1篇

需求

• 需求为其他应用能够跳转至我方应用，并且能够实现自动登陆。

开发环境

• 对方为Android/IOS原生应用，我方为Ionic1的WebApp。

分析

• 对方app点击某一按钮后能够打开我方app。
• 通过对方app跳转过来的需要自动登录，这就需要传递用户名/密码，跳转后走登陆方法。

对方app跳转至我方app

customurlscheme

基于cordova-plugin-customurlscheme插件实现

• 安装插件

  cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=xxxxscheme
  

  URL_SCHEME为定义的scheme值，供外部应用跳转使用。
  安装完插件后，通过调用<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

基于ionic-plugin-deeplinks实现

• 安装插件

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);
            });
        });
    })
    

2. 1. 以上配置会接受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");
        });
}