如何创建 link 将受邀用户发送到我的离子应用程序的特定页面？

Question

我目前正在使用 firebase 数据库完成我的 ionic v1 应用程序附加功能的开发。

我已经添加了 cordova 社交分享插件。现在我可以向各种平台（WhatsApp、Messenger 等）的朋友发送 link。

我遇到的主要问题是我不知道如何创建 link 将受邀用户引导至我想要的页面。我已经阅读了很多关于 Whosebug 和其他一些平台上的潜在解决方案，以及 firebase deeplinks 解决方案；但没有找到满足我需求的解决方案（对于 ionic V1）。

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

基本上，我需要受邀用户访问可通过以下路径手动访问的页面：

用户通过他的 facebook 帐户登录应用程序
-> 用户加我为好友
-> 用户在他的好友列表中点击我的个人资料
-> 最后，用户可以看到我想引导他访问的页面上显示的我的产品列表。

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

干杯

编辑

@Karan，非常感谢你的回答。

我实际上已经修改了我的应用程序的架构，以使整个过程更容易。

我创建了一个我的产品页面，我想与朋友分享。基本上这个页面显示用户关于他的 uid 的产品。为了成功传递我需要的数据，我需要获取想要共享其产品页面的用户的 uid (uidsharer)。

然后在单击 link 并打开应用程序后立即获取它。我想我的 link 看起来像这样：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 link.

中传递的参数来定义

假设我的 uid 是 ABCDEFG 并且我发送了一个邀请 link 比如：myappname//:myproducts?uidshaer=ABCDEF

当受邀用户单击邀请 link 并在我的应用程序上打开 app/myproducts 页面时，如何设置 uidsharer 变量 'ABCDEF' 的值？

谢谢 :-)。

编辑 2

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

这是我的产品页面 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 结构时，如何修改我在 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>

我很迷茫，我的应用程序几乎准备就绪我只需要这个最后的深度link sahring 功能来结束我的项目。

非常感谢您的帮助。

Answer 1

您可以使用 Custom URL Scheme 插件。

您唯一的问题是管理 Auth。 User --> Friend --> Profile --> Products 假定经过身份验证的用户已登录。来自链接的用户可能

没有授权凭据的新用户
现有用户已注销
未安装应用程序的用户（由 Play 商店处理）
用户登录

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

如果 public 页面无需身份验证即可访问，那么您将必须管理该页面的历史记录。

Url 会是这样的就像是 app://pagename?user=用户名&profileid=2&moreparams=params

从 url 中获取状态名称重定向到带有参数的状态。
确保状态已准备好从外部接收数据。
确保您的应用名称是唯一的。
必要时重定向到登录。

编辑 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)

};

里面.运行

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

这几乎是一个 hack。

更优雅的方法是使用 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. 中还描述了另一种方法。如果您想深入了解 cordova，这是一本有趣的读物。

如何创建 link 将受邀用户发送到我的离子应用程序的特定页面？

How to create a link sending invited users to a specific page on my ionic app?

deep-linking

cordova

firebase

ionic-framework