如何在离子型应用中实现社会共享

Question

我是一个新的离子-科尔多瓦，目前正在为一个wordpress网站的应用程序。我想在我的帖子详细信息页面中添加一个共享按钮，这样我就可以通过安装在安卓手机上的应用程序来分享这篇文章。

我已经安装了在我的config.xml中看到的插件

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

在app.module.ts文件中

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

这是我的post.ts文件代码

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

这是我的post.html文件代码

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

您的指导将不胜感激。

编辑

下面是错误发生的原因

WEBPACK_IMPORTED_MODULE_8__ionic_native_social_sharing.a.shareWithOptions不是一个函数

当我尝试运行命令ionic cordova run android时，我会得到以下错误

[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

在这一行

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)
                            }, 

你需要用

this.socialSharing.share...

希望这能有所帮助。

Answer 2

将所有shareItem函数代码从post.ts文件中删除

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

替换post.html中的代码

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

使用

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

使用ion-fab使按钮看起来好多了