需求

• 需求為其他應用能夠跳轉至我方應用，并且能夠實現(xiàn)自動登陸。

開發(fā)環(huán)境

• 對方為Android/IOS原生應用，我方為Ionic1的WebApp。

分析

• 對方app點擊某一按鈕后能夠打開我方app。
• 通過對方app跳轉過來的需要自動登錄，這就需要傳遞用戶名/密碼，跳轉后走登陸方法。

對方app跳轉至我方app

customurlscheme

基于cordova-plugin-customurlscheme插件實現(xiàn)

• 安裝插件

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

  URL_SCHEME為定義的scheme值，供外部應用跳轉使用。
  安裝完插件后，通過調用<a href="xxxxscheme://">打開應用</a>(xxxxscheme為應用定義的scheme)確實能夠跳轉至我方app。
  這就成功了一半，只剩下接收參數(shù)。。。
• 監(jiān)聽應用跳轉后的url值，從中獲取對應的參數(shù)
  由于我方app為Ionic1應用，所以監(jiān)聽寫在了app.js中，需要在$ionicPlatform.ready方法中實現(xiàn)具體的方法

        function handleOpenURL(url) {
                alert("url-11--" + url);
                setTimeout(function () {
                    alert("received url: " + url);
                }, 1000);
            }
  

但是實現(xiàn)了該方法后，發(fā)現(xiàn)依舊無法接收到相應的參數(shù)，github搜了一波發(fā)現(xiàn)遇到該問題的也不在少數(shù)，但都未解決。Github插件地址。
所以該插件只適合應用間的跳轉，不適合傳遞參數(shù)
但在查詢解決方法的同時也看到另外一種實現(xiàn)跳轉的插件deeplink。

deepLink

基于ionic-plugin-deeplinks實現(xiàn)

• 安裝插件

cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=xxxscheme--variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=xxx.cn --variable 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>
• 參數(shù)處理方法
  • 在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，傳對應的參數(shù)，其他的讓對方處理就好了。。。

• 插件準備
  • cordova-plugin-appavailability 檢測目標app是否安裝
  • com.lampa.startapp 啟動目標app
• 具體實現(xiàn)

var scheme;
// 不同的平臺實現(xiàn)方式是不同的
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"]
        }, {
            //跳轉時傳遞的參數(shù)
            "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");
        });
}