如何在ionic应用程序中共享链接,链接回应用程序

How to share a link within ionic app that links back to the app

本文关键字:链接 应用程序 共享 ionic      更新时间:2023-09-26

我正在尝试在ionic应用程序中实现社交共享,我能够通过本地共享表成功共享链接。当与之共享链接的人单击链接时,它将链接回应用程序中的项目。如果用户安装了应用程序,否则,它将提示用户安装应用程序。但它并不是这样工作的,而是询问你是否想用PlayStore或浏览器打开。

以下是我在安装cordova社交共享后成功分享链接的第一件事

.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>

当链接无法按我的预期工作时,我做了进一步的研究,发现自定义URL方案PhoneGap插件这是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>

但是,如果我将这些原始内容放入社交共享实现中,它会按照编写的方式进行共享,因此无法单击链接。

好的。让我们一步一步走。

首先,您不仅需要安装用于URL scheme的插件(我使用这个(,还需要安装一个通用链接插件,将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根据应用程序的加载方式(打开应用程序的常见加载或因为有人点击了链接(来决定引导(注意,在这里你必须用它们各自的addeventListener来处理你的up的resumepause可能的状态。

注意,因为使用$urlRouterProvider.otherwise()是一个很好的技巧,因为你可以在那里设置正确的path

我们的最后一步应该是为那些第一次打开链接但应用程序尚未安装的人创建一个网站(他们将成功打开URL(。

希望它能有所帮助!

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