Question

我在ionic3

中创建了一个新项目

在我的项目中;首先，我使用PHP

将图像保存到数据库中

然后我从数据库中检索所有图像，并使用photo.html

以离子photo.ts显示

它运作成功。但我需要在ionic3中添加共享选项。

如果用户点击分享按钮，该特定图片将在用户社交媒体上分享（fb，twitter，whatsapp）。怎么做？

这是html代码

photo.html

<ion-header>
<ion-navbar>
<ion-title>photo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>  
<ion-item *ngFor="let item of items">
<ion-row align-items-stretch>
<ion-col col-12 col-md-6 align-self-stretch align-self-center  
approxItemHeight="457px">
             <ion-card class="card">
       <img src="http://xxxxxx.com/imgshare/{{item.img}}" height="200" 
width="200">
        <button ion-button color="lightText" 
(click)="share(item)">share</button>
</ion-card>      
</ion-col>
</ion-row>
</ion-item>
</ion-grid>
</ion-content>

photo.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { SocialSharing } from '@ionic-native/social-sharing';
@IonicPage()
@Component({
selector: 'page-photo',
templateUrl: 'photo.html',
})
export class PhotoPage {
public items : Array<any> = [ ];  
constructor(public navCtrl: NavController, public navParams: NavParams, 
public http: HttpClient, private socialSharing: SocialSharing) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PhotoPage');
}
   ionViewWillEnter() : void
{
  this.load();
}
load() : void
{
  this.http
  .get('http://xxxx.com/imgshare/retrieve.php')
  .subscribe((data : any) =>
  {
     console.dir(data);
     this.items = data;
     console.log(this.items[0].img);

  },
  (error : any) =>
  {
     console.dir(error);
  });
}
}

Answer 1

首先，您需要通过以下两个命令安装Social sharing：

$ ionic cordova plugin add cordova-plugin-x-socialsharing
$ npm install --save @ionic-native/social-sharing

然后有很多方式可以在不同的社交网站上分享。

这将通过操作表将应用程序共享到您选择的任何应用程序。

share(index){
  this.socialSharing.share(index.img, null, null, null);
}

更多详情，请访问medium link

并访问官方网站official link

Answer 2

我先使用Social sharing，然后在我的应用中使用了此方法。

share(data){
  this.socialSharing.share('',null,data.imgUrl,null);
}

对我有用。

对不起，我的英语。

如何在离子3的社交媒体上分享图像

2 个答案: