如何创建将受邀用户发送到我的离子应用程序上特定页面的链接?

时间:2019-05-04 20:26:21

标签: firebase cordova ionic-framework deep-linking

我目前正在使用Firebase数据库在ionic v1应用程序上完成其他功能的开发。

我已经添加了cordova社交共享插件。现在,我可以将链接发送给各种平台的朋友(WhatsApp,Messenger等)。

我遇到的主要问题是我无法弄清楚如何创建一个链接,以将受邀用户引导到我想要的页面。我已经阅读了很多有关StackOverflow和其他平台上的潜在解决方案以及firebase深度链接解决方案的文章。但没有找到满足我需求的解决方案(适用于离子V1)。 我得到的最接近的答案是这个:https://dev.to/hitman666/how-to-use-deep-linking-in-ionic-1-apps-with-ionic-native-deeplinks-plugin

基本上,我需要受邀用户才能按照以下路径访问可以手动访问的页面: 用户通过其Facebook帐户登录该应用程序->用户将我添加为朋友->用户在其朋友列表中单击我的个人资料->最后,用户可以在我想要的页面上看到我的产品列表带领他去。

如果你们能给我一些有关实现这种解决方案的线索,我将不胜感激。

欢呼

编辑

@ Karan,非常感谢您的回答。 我实际上已经修改了我的应用程序的体系结构,以使整个过程变得更加容易。 我创建了一个myproducts页面,希望与朋友分享。基本上,此页面显示用户有关其uid的产品。为了成功传递我需要的数据,我需要获取要共享其产品页面(uidsharer)的用户的uid。 然后在点击链接并打开应用后立即将其获取。我想我的链接看起来像这样:myappname // :: myproducts?uidshaer = XXXXXXXXXXX。

我不太了解如何获取uidsharer的值并将其用作我的js文件中变量uidsharer的值。这是我的myproducts.js控制器的摘录:

var uidsharer = '';
    Product.allMyProductsToShare(uidsharer).$loaded().then(function (data2) {

                for (var j = 0; j < data2.length; j++) {
                    var item2 = data2[j]

                    Auth.getProduct(item2.$id).$loaded().then(function (product2) {
                        matc.ratings.push(product2);

                    });
                }
            });

在我的代码中,uidsharer没有定义,需要通过我的url链接中传递的参数来定义。

让我们假设我的uid是ABCDEFG,然后发送邀请链接,例如:myappname // :: myproducts?uidshaer = ABCDEF

当受邀用户单击邀请链接并在应用程序上的应用程序/我的产品页面上显示时,如何使uidsharer变量“ ABCDEF”的值?

谢谢:-)。

编辑2

非常感谢Karan的贡献。不幸的是,我不知道如何实施您向我提出的建议。你能看看我的代码吗?

这是我的myproducts页面上来自app.js的.state代码:

.state('app.myproducts', {
    url: '/myproducts',
    views: {
      'menuContent': {
        templateUrl: 'templates/myproducts.html',
        controller: 'MyProductsCtrl as prod',
        resolve: {
          history: function($ionicHistory){
            $ionicHistory.nextViewOptions({
              disableBack: true
            });
          },

          auth: function($state, Auth){
            return Auth.requireAuth().catch(function(){
              $state.go('login');
            });
          },

          uid: function(Auth){
            return Auth.requireAuth().then(function(auth){
              Auth.setOnline(auth.uid);
              return auth.uid;
            });
          },

          profile: function(Auth){
            return Auth.requireAuth().then(function(auth){
              return Auth.getProfile(auth.uid).$loaded();
            });
          }


        }
      }
    }
  })

当我使用以下网址结构时,如何修改app.js中的.state函数以获取我的控制器文件中uidsharer的传递值: myappname:// myproducts?uidsharer = XXXXXXXX

此外,这是我的myproducts.js控制器:

'use strict'

app.controller('MyProductsCtrl', function(Product, $ionicLoading, $ionicPopup, Auth, uid, profile, $scope, Like, Likeproducts, $ionicModal, $timeout){
    var prod = this;


    var currentUid = uid;
    var uidsharer = '**THIS IS THE VALUE I WANT TO FETCH FROM MY CUSTOM URL**';



    $scope.show = function(){
        $ionicLoading.show({
            template: '<ion-spinner icon="bubbles"><ion-spinner>'
        });
    };

    $scope.hide = function(){
        $ionicLoading.hide();
    };


    function init(){
        $scope.show();


        prod.ratings = [];

        prod.username = profile.name;



        Product.allMyProductsToShare(uidsharer).$loaded().then(function (data2) {

            for (var j = 0; j < data2.length; j++) {
                var item2 = data2[j]
                console.log(uidsharer)
                Auth.getProduct(item2.$id).$loaded().then(function (product2) {
                    prod.ratings.push(product2);

                });
            }
        });



        $scope.hide();


        ;




    };



    $scope.$on('$ionicView.enter', function(e){
        init();
    });

这是myproducts.html页面的html模板:

<ion-content class="padding">

    <td-cards>
        <td-card id="td-card" class="card-{{$index}}" 
        ng-repeat="item in prod.ratings">
                <div class="image">
                        <div class="no-text overlayBox"><div class="noBox boxed">BYE</div>
                        </div>
                        <img ng-src="{{item.imgurl}}">
                        <div class="yes-text overlayBox"><div class="yesBox boxed">BUY</div></div>
                    </div>
                    <div class="card-text">
                            <h4 class="centered">{{item.title}}
                            </h4>

                            <br>
                            <p class="centered">

                                Price: {{item.price}}.-€.<br>(inkl. MwSt.)</p><br><br><br><br>

                        </div>
                    <br>


        </td-card>
    </td-cards>

    <p>{{profile}}</p>
</ion-content>

我很迷路,我的应用程序已经准备就绪,我只需要最后一个深链接共享功能即可结束我的项目。

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

您可以使用Custom URL Scheme插件。

您唯一的问题是管理Auth。 用户->朋友->配置文件->产品假定已通过身份验证的用户已登录。 来自链接的用户可能会

  • 没有身份验证凭据的新用户
  • 现有用户已注销
  • 未安装App的用户(由Play商店处理)
  • 用户登录

您将必须在app.run中实现handleUrl。根据您的Auth要求,您将不得不使用收到的URL编写和管理逻辑。

如果这是一个公共页面,无需Auth即可访问,那么您将不得不管理该页面的历史记录。

网址将类似于 就像是 app:// pagename?user = username&profileid = 2&moreparams = params

  • 从网址重定向中获取状态名称,并使用params表示状态。
  • 确保状态已准备好从外部接收数据。
  • 确保您具有唯一的应用名称。
  • 如有必要,重定向到登录名。

编辑1 忘记了有关Ionic 1的很多知识,但是,请忍受我。

尝试一下, 1)确保此路线有效

$state.go("myproducts", { "uidsharer":"customuid"});

安装此插件 https://github.com/EddyVerbruggen/Custom-URL-scheme

在app.js中,模块外部粘贴此代码。

function handleOpenURL (url) {
  localStorage.setItem("url","url");
let uidsharer = url.split("?")[1]("=")[1];
localStorage.setItem("uidsharer",uidsharer)

};

.run内

if(localStorage.getItem("uidsharer")){
let uidsharer = localStorage.getItem("uidsharer");
$state.go("myproducts", { "uidsharer":"customuid"});
}

// OR 

if(localStorage.getItem("uidsharer")){
let uidsharer = localStorage.getItem("uidsharer");
$state.go("myproducts");
}


var uidsharer = $stateParams.uidsharer ; // OR 
var uidshare = localStorage.getItem("uidsharer")
localStorage.removeItem('uidsharer );

这几乎是一个黑客。

一种更优雅的方法是使用您共享的the link

假设您已成功安装本机插件,并且可以访问$ cordovaDeeplinks。

$cordovaDeeplinks.route({    
    '/myproducts': {
        target: 'app.myproducts',
        parent: 'app.myproducts'
    }
}).subscribe(function(match) {
    console.log('matching');
    console.dir(match);
    $timeout(function() {
        $state.go(match.$route.parent, match.$args);

        if (match.$route.target != match.$route.parent) {
            $timeout(function() {
                $state.go(match.$route.target, {uidshaer: match.$args.uidshaer});
            }, 800);
        }
    }, 100); // Timeouts can be tweaked to customize the feel of the deeplink
}, function(nomatch) {
    console.warn('No match', nomatch);
    console.dir(nomatch);
});

我在ionic 4中使用了原生深层链接,效果更好。

无论如何,this post.中描述了另一种方法。如果您想深入科尔多瓦,这是一个有趣的读物。