如何在Ionic应用内分享一个链接并使其链接回到应用程序

Question

如何在Ionic应用内分享一个链接并使其链接回到应用程序

javascriptandroidangularjscordovaionic-framework

3

我正在尝试在Ionic应用中实现社交分享，我已经成功地通过本地共享表单共享链接。当接收到分享的链接并点击时，它应该链接回应用程序中的项目，如果用户已安装该应用程序，则会直接打开该应用程序，否则它会提示用户安装该应用程序。但事实并非如此，它会询问您是否要使用PlayStore或浏览器打开链接。

下面是我成功分享链接并安装cordova social share后所做的第一件事。

.controller('myCtrl', function($state, $cordovaContacts, $ionicActionSheet, $cordovaSocialSharing ) {
  $scope.share = function(id) {
    $cordovaSocialSharing
      .share("my Link Description", null, null,"https://play.google.com/store/apps/deatils?com.ionicframework.myapp/app/item/"+id) //    Share via native share sheet
      .then(function(result) {
        // Success!
      }, function(err) {
        // An error occured. Show a message to the user
      });
    }
  }
})

视图如下所示：

<a ng-click="share(id)"><i class="ion ion-share"></i> </a>

当我预期的链接不起作用时，我进行了进一步的研究，并找到了Custom URL scheme PhoneGap Plugin插件，这是Cordova的一个很酷的插件，旨在允许通过在电子邮件或网页上点击链接来启动应用程序。

安装插件后，链接应该像这样使用：

<a href="mycoolapp://">Open my app</a>
<a href="mycoolapp://somepath">Open my app</a>
<a href="mycoolapp://somepath?foo=bar">Open my app</a>
<a href="mycoolapp://?foo=bar">Open my app</a>

但是如果我直接将这些内容放入社交分享功能中，它会按照原样分享，导致链接无法被点击。

- kplus

我只是想做同样的事情。你找到了解决方案吗？ - DevStarlight

我还没有找到解决方案。 - kplus

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DevStarlight · Answer 1

好的，我们一步一步来。

首先，你需要安装的不仅是你用于 URL scheme 的插件（我使用 this），还需要一个universal-link插件，将 http URL http://example.com 链接到你的应用程序 example://。完成所有过程后，你的 config.xml 文件应该像这样：

<plugin name="cordova-plugin-customurlscheme" spec="~4.2.0">
  <variable name="URL_SCHEME" value="example" />
  <variable name="ANDROID_SCHEME" value=" " />
  <variable name="ANDROID_HOST" value=" " />
  <variable name="ANDROID_PATHPREFIX" value="/" />
</plugin>

<plugin name="cordova-universal-links-plugin" spec="~1.1.2" />
<universal-links>
  <ios-team-id value="xxxxxx" />
  <host name="angular.example.com" scheme="https">
    <path event="openUrl1Page" url="/url1/*" />
    <path event="openUrl2Page" url="/url2/*" />
  </host>
</universal-links>

注意：您会看到一个名为ul_web_hooks的文件夹被创建。同时将<link>元素复制到您的主要.html文件中（实际上对我来说，没有这个也可以工作，但在文档中，他们说这是必要的）。

完成以上两步后，您应该能够通过控制台输入以下内容打开您的app：

adb shell am start -W -a android.intent.action.VIEW -d "http://angular.example.com/url1/x"

如果您使用URL方案，它也应该可以正常工作：

adb shell am start -W -a android.intent.action.VIEW -d "example://url1/x"

接下来，您需要手动引导您的应用程序，以便cordova根据加载应用程序的方式（通常是打开应用程序或因为有人点击了链接）决定引导（请注意，在此处，您将不得不处理您的应用程序的可能状态resume和pause，并使用相应的addeventListener进行处理）。

注意，使用$urlRouterProvider.otherwise()是一个不错的技巧，这样你就可以在那里设置正确的路径。

我们的最后一步应该是为那些第一次打开链接且没有安装应用程序的用户创建一个网站（他们将成功打开URL）。

希望它有帮助！

- sunny chauhan · Answer 2

window.open('https://www.facebook.com/sharer/sharer.php?u={{YOUR URL}}, '_system', 'location=yes');

并且

window.open('https://www.twitter.com/share?url={{YOUR URL}}, '_system', 'location=yes');