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

Question

我目前正在使用firebase数据库在我的离子V1应用程序上完成其他功能的开发。

我在其中添加了Cordova社交共享插件。现在，我可以将链接发送到各种平台(WhatsApp，Messenger等(的朋友。

我遇到的主要问题是，我无法弄清楚如何创建一个链接，使受邀用户进入我想要的页面。我一直在阅读很多有关Stackoverflow和其他一些平台的潜在解决方案以及Firebase Deeplinks解决方案的信息。但是找不到解决我需求的解决方案(离子V1(。

我得到的最接近的答案是：https：//dev.to/hitman6666/how-to-to-use-deep-linking-in-ionic-in-ionic-1-apps-with-ionic-nation-native-native-native-native-native-deeplinks-plugin

基本上，我需要被邀请的用户到达可以按照此路径手动到达的页面：

用户通过其Facebook帐户在应用中登录
->用户将我添加为朋友
->用户在他的朋友列表中点击我的个人资料
->最后，用户可以看到我想带领他进入的页面上显示的我的产品列表。

如果你们可以给我一些有关实施这种解决方案的线索，我将非常感谢。

欢呼

编辑

@ karan，非常感谢您的回答。

我实际上修改了应用程序的体系结构，以使整个过程更容易。

我创建了一个我想与朋友分享的myproducts页面。基本上，此页面显示了用户有关其UID的产品。为了成功传递我需要的数据，我需要获取想要共享其产品页面(UIDSharer(的用户的UID。

，然后在单击链接并打开应用后立即获取它。我猜我的链接看起来像这样：myAppName//：myproducts？uidshaer = xxxxxxxxxxxx。

我不太了解如何获取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

当受邀用户单击邀请链接并在我的应用程序上打开应用程序/myproducts页面时，如何使我的UIDSHARER变量'ABCDEF'的值

谢谢： - (。

编辑2

非常感谢Karan的贡献。不幸的是，我无法弄清楚如何实施您对我的建议。您能看一下我的代码吗？

这是我的rapproducts 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();
            });
          }

        }
      }
    }
  })

当我使用以下URL结构：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>

我已经迷路了，我的应用程序几乎已经准备好了，我只需要最后一个Deeplink Sahring功能即可结束我的项目。

非常感谢您的帮助。

Answer 1

您可以使用自定义URL方案插件。

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

• 没有Aut Auth Cordentials的新用户
• 现有用户已登录
• 没有安装应用程序的用户(由Play商店处理(
• 用户登录

您将必须在app.run中实现handleurl。根据您的验证要求，您必须使用收到的URL编写和管理逻辑。

如果它是一个可以在没有AUTH的情况下访问的公共页面，则您必须管理该页面的历史记录。

url将是类似的就像是app：//pagename？user =用户名＆amp; profileid = 2＆amp; horeparams = params

• 用参数从URL重定向到状态的状态名称。
• 确保状态准备在外部接收数据。
• 确保您拥有独特的应用名称。
• 必要时重定向到登录。

编辑1 忘记了有关离子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 );

这几乎是一个黑客。

一种更优雅的方法是使用您共享的链接。

假设您已经设法安装了本机插件和$ 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);
});

我在离子4中使用本地深链接，而且更好。

无论如何，这篇文章中还有另一种方法。。如果您想深入研究Cordova，这是一个有趣的阅读。