phonegap-plugins - 如何在phonegap中添加社交分享按钮

Question

我是 phonegap 的新手，我正在创建一个愿望/问候语应用程序。我想添加一个社交按钮来与人们分享该问候语。所选的问候语应通过 Twitter、g+、WhatsApp 和 Facebook 分享。

Answer 1

适用于 Android、iOS 和 Windows Phone 的 PhoneGap 社交分享插件:

我建议您使用以下插件来添加社交分享选项。它使用起来非常简单直接。

Social sharing link

安装

自动(CLI/Plugman):SocialSharing 与 Cordova Plugman 兼容，与 PhoneGap 3.0 CLI 兼容，以下是它与 CLI 的工作方式:

$ phonegap local plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

或使用来自 npm 的 Cordova CLI:

 $ cordova plugin add cordova-plugin-x-socialsharing
 $ cordova prepare

SocialSharing.js 是自动引入的。无需在您的 html 中更改或添加任何内容。

手动

1. 将以下 xml 添加到您可以找到的所有 config.xml 文件中:

   <!-- for iOS -->
   <feature name="SocialSharing">
   <param name="ios-package" value="SocialSharing" />
   </feature>
   
   <!-- for Android (you will find one in res/xml) -->
   <feature name="SocialSharing">
   <param name="android-package" value="nl.xservices.plugins.SocialSharing" />
   </feature>
   
   <!-- for Windows Phone -->
   <feature name="SocialSharing">
   <param name="wp-package" value="SocialSharing"/>
   </feature>
   

在Android上共享远程图片(或其他文件)，需要先将文件存储到本地，所以在AndroidManifest.xml中添加这个权限:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

对于 iOS，您需要将 Social.framework 和 MessageUI.framework 添加到您的项目中。单击您的项目、Build Phases、Link Binary With Libraries，搜索并添加 Social.framework 和 MessageUI.framework。

1. 获取 SocialSharing.js 的副本，将其添加到您的项目并在 index.html 中引用它:

   <script type="text/javascript" src="js/SocialSharing.js"></script>
   

2. 下载适用于 iOS 和/或 Android 的源文件并将它们复制到您的项目中。

iOS:复制SocialSharing.h和SocialSharing.m到platforms/ios//Plugins

Android:将 SocialSharing.java 复制到 platforms/android/src/nl/xservices/plugins(创建文件夹)

Window Phone:将 SocialSharing.cs 复制到 platforms/wp8/Plugins/nl.x-services.plugins.socialsharing(创建文件夹)

PhoneGap 构建

只需将以下 xml 添加到您的 config.xml 以始终使用此插件的最新版本(这些天已发布到 plugins.cordova.io):

  <gap:plugin name="cordova-plugin-x-socialsharing" source="npm" />

或使用旧版本，托管在 phonegap build:

  <gap:plugin name="nl.x-services.plugins.socialsharing" version="4.3.16" />

SocialSharing.js 是自动引入的。请确保在 index.html 的头部包含对 cordova.js 的引用:

 <script type="text/javascript" src="cordova.js"></script>

使用分享表

这里有一些示例，您可以复制粘贴以测试各种组合:

<button onclick="window.plugins.socialsharing.share('Message only')">message only</button>

<button onclick="window.plugins.socialsharing.share('Message and subject', 'The subject')">message and subject</button>

<button onclick="window.plugins.socialsharing.share(null, null, null, 'http://www.x-services.nl')">link only</button>

<button onclick="window.plugins.socialsharing.share('Message and link', null, null, 'http://www.x-services.nl')">message and link</button>

<button onclick="window.plugins.socialsharing.share(null, null, 'https://www.google.nl/images/srpr/logo4w.png', null)">image only</button>

// Beware: passing a base64 file as 'data:' is not supported on Android 2.x: https://code.google.com/p/android/issues/detail?id=7901#c43
// Hint: when sharing a base64 encoded file on Android you can set the filename by passing it as the subject (second param)
<button onclick="window.plugins.socialsharing.share(null, 'Android filename', 'data:image/png;base64,R0lGODlhDAAMALMBAP8AAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUKAAEALAAAAAAMAAwAQAQZMMhJK7iY4p3nlZ8XgmNlnibXdVqolmhcRQA7', null)">base64 image only</button>

// Hint: you can share multiple files by using an array as thirds param: ['file 1','file 2', ..], but beware of this Android Kitkat Facebook issue: [#164]
<button onclick="window.plugins.socialsharing.share('Message and image', null, 'https://www.google.nl/images/srpr/logo4w.png', null)">message and image</button>

<button onclick="window.plugins.socialsharing.share('Message, image and link', null, 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')">message, image and link</button>

<button onclick="window.plugins.socialsharing.share('Message, subject, image and link', 'The subject', 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')">message, subject, image and link</button>

直接分享给..

Facebook

<button onclick="window.plugins.socialsharing.shareViaFacebook('Message via Facebook', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)})">msg via Facebook (with errcallback)</button>

推特

<!-- unlike most apps Twitter doesn't like it when you use an array to pass multiple files as the second param -->
<button onclick="window.plugins.socialsharing.shareViaTwitter('Message via Twitter')">message via Twitter</button>
<button onclick="window.plugins.socialsharing.shareViaTwitter('Message and link via Twitter', null /* img */, 'http://www.x-services.nl')">msg and link via Twitter</button>

微信

• 请注意，在 iOS 上共享图片和文本时，只会共享图片 - 希望 WhatsApp 创建适当的 iOS 扩展程序来解决此问题。

• 在使用此方法之前，您可能需要使用 canShareVia('whatsapp'..(见下文)。

  <button onclick="window.plugins.socialsharing.shareViaWhatsApp('Message via WhatsApp', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)})">msg via WhatsApp (with errcallback)</button>
  

如果您想了解更多信息，请查看链接.. Social Sharing

如果回答对您有帮助，请点赞。干杯