如何在离子应用程序中实现社交共享

Question

I am new in ionic-cordova and currently working on an app for a wordpress site. I want to put a share button in my post details page so i can be able to share the post via apps installed in the android phone.

I have already installed the plugin as seen in my config.xml

<plugin name="cordova-plugin-x-socialsharing" spec="^5.2.1" />

and in the app.module.ts file

 import { SocialSharing } from '@ionic-native/social-sharing';
.
.
.
providers: [
    StatusBar,
    SplashScreen,
    NativeStorage,
    WordpressService,
    AuthenticationService,
    SocialSharing

Here is my post.ts file code

 import { Component } from '@angular/core';
    import { NavParams, NavController, AlertController } from 'ionic-angular';
    import { HomePage } from '../home/home';
    import { WordpressService } from '../../../services/wordpress.service';
    import { AuthenticationService } from '../../../services/authentication.service';
    import { Observable } from "rxjs/Observable";
    import 'rxjs/add/operator/map';
    import 'rxjs/add/observable/forkJoin';
    //library for social-sharing


    import { SocialSharing } from '@ionic-native/social-sharing';


    /**
     * Generated class for the PostPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */


    @Component({
      selector: 'page-post',
      templateUrl: 'post.html'
    })
    export class PostPage {

      post: any;
      user: string;
      comments: Array<any> = new Array<any>();
      categories: Array<any> = new Array<any>();
      morePagesAvailable: boolean = true;

      constructor(
        public navParams: NavParams,
        public navCtrl: NavController,
        public alertCtrl: AlertController,
        public wordpressService: WordpressService,
        public authenticationService: AuthenticationService,
        private socialSharing: SocialSharing
      ) {

      }

      ionViewWillEnter(){
        this.morePagesAvailable = true;

        this.post = this.navParams.get('item');

        Observable.forkJoin(
          this.getAuthorData(),
          this.getCategories(),
          this.getComments())
          .subscribe(data => {
            this.user = data[0].name;
            this.categories = data[1];
            this.comments = data[2];
          });
      }

      getAuthorData(){
        return this.wordpressService.getAuthor(this.post.author);
      }

      getCategories(){
        return this.wordpressService.getPostCategories(this.post);
      }

      getComments(){
        return this.wordpressService.getComments(this.post.id);
      }

      loadMoreComments(infiniteScroll) {
        let page = (this.comments.length/10) + 1;
        this.wordpressService.getComments(this.post.id, page)
        .subscribe(data => {
          for(let item of data){
            this.comments.push(item);
          }
          infiniteScroll.complete();
        }, err => {
          console.log(err);
          this.morePagesAvailable = false;
        })
      }

      goToCategoryPosts(categoryId, categoryTitle){
        this.navCtrl.push(HomePage, {
          id: categoryId,
          title: categoryTitle
        })
      }

//Social sharing implementation here

        shareItem() {
            let options = {
                                message: 'share this', // not supported on some apps (Facebook, Instagram)
                                subject: 'the subject', // fi. for email
                                files: ['', ''], // an array of filenames either locally or remotely
                                url: 'https://example.com/',
                                chooserTitle: 'Pick an app' // Android only, you can override the default share sheet title
                            }
                            SocialSharing.shareWithOptions(options).then((result) => {
                                console.log("Share completed? ", result.completed); // On Android apps mostly return false even while it's true
                                console.log("Shared to app: ", result.app); // On Android result.app is currently empty. On iOS it's empty when sharing is cancelled (result.completed=false)
                            }, (err) => {
                                console.log("Sharing failed with message: ", err);
                            });
        }
    }

Here is my post.html file code

 <button ion-button clear small color="danger" icon-left (click)="shareItem()">
           <ion-icon name='share-alt'></ion-icon>
           Share
         </button>

Your guidance will be much appreciated.

EDIT

below are the errors are getting

WEBPACK_IMPORTED_MODULE_8__ionic_native_social_sharing .a.shareWithOptions is not a function

When i try to run command ionic cordova run android i get this error

[21:24:30]  transpile started ...                                               
[21:24:44]  typescript: C:/Ionic/Final/src/pages/tabs/post/post.ts, line: 103   
            Property 'shareWithOptions' does not exist on type 'typeof SocialSha
ring'.                                                                          

     L103:  SocialSharing.shareWithOptions(options).then((result) => {          
     L104:      console.log("Share completed? ", result.completed); // On Androi
d apps mostly return false even while it's true                                 

Error: Failed to transpile program                                              
    at new BuildError (C:\Ionic\Final\node_modules\@ionic\app-scripts\dist\util\
errors.js:16:28)                                                                
    at C:\Ionic\Final\node_modules\@ionic\app-scripts\dist\transpile.js:159:20  
    at new Promise (<anonymous>)                                                
    at transpileWorker (C:\Ionic\Final\node_modules\@ionic\app-scripts\dist\tran
spile.js:107:12)                                                                
    at Object.transpile (C:\Ionic\Final\node_modules\@ionic\app-scripts\dist\tra
nspile.js:64:12)                                                                
    at C:\Ionic\Final\node_modules\@ionic\app-scripts\dist\build.js:109:82      
    at <anonymous>                                                              
[21:24:44]  copy finished in 14.75 s

Answer 1

In this line

SocialSharing.shareWithOptions(options).then((result) => {
                                console.log("Share completed? ", result.completed); // On Android apps mostly return false even while it's true
                                console.log("Shared to app: ", result.app); // On Android result.app is currently empty. On iOS it's empty when sharing is cancelled (result.completed=false)
                            }, 

you need to use

this.socialSharing.share...

Hope this helps.

Answer 2

Remove all the shareItem function code from the post.ts file

//Social sharing implementation here

        shareItem() {
            let options = {
                                message: 'share this', // not supported on some apps (Facebook, Instagram)
                                subject: 'the subject', // fi. for email
                                files: ['', ''], // an array of filenames either locally or remotely
                                url: 'https://example.com/',
                                chooserTitle: 'Pick an app' // Android only, you can override the default share sheet title
                            }
                            SocialSharing.shareWithOptions(options).then((result) => {
                                console.log("Share completed? ", result.completed); // On Android apps mostly return false even while it's true
                                console.log("Shared to app: ", result.app); // On Android result.app is currently empty. On iOS it's empty when sharing is cancelled (result.completed=false)
                            }, (err) => {
                                console.log("Sharing failed with message: ", err);
                            });
        }

replace the code in the post.html

<button ion-button clear small color="danger" icon-left (click)="shareItem()">
           <ion-icon name='share-alt'></ion-icon>
           Share
         </button>

With

<button ion-fab class="share" mini onclick="window.plugins.socialsharing.share('null', 'null', 'https://www.google.nl/images/srpr/logo4w.png', null)">Share</button>

using ion-fab makes the button look much better