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

Posted 2023-03-07

【中文标题】如何在 phonegap 中添加社交分享按钮

【英文标题】：How to add social sharing button in phonegap

【发布时间】：2015-11-30 05:57:33

【问题描述】：

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

【问题讨论】：

点击此链接：***.com/questions/26779784/…

【参考方案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 中更改或添加任何内容。

手动

将以下 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。

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

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

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

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

Android：将 SocialSharing.java 复制到platforms/android/src/nl/xservices/plugins（创建文件夹）

Window Phone：将 SocialSharing.cs 复制到 platform/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>

直接分享到..

脸书

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

WhatsApp

请注意，在 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

如果答案对您有帮助，请投票。干杯

【讨论】：

每当我点击分享按钮时，什么都没有发生。在 LogCat This Msg show Uncaught TypeError: Cannot read property 'socialsharing' of undefined.

您使用的是哪个版本的cordova？

你是否在config.xml文件中添加了“”

AM 使用cordova 2.3.0 .. 给出错误错误：-undefined prefix:gap .这就是为什么我没有包括它。

您是否将 SocialSharing.java 复制到了platforms/android/src/nl/xservices/plugins（创建文件夹）

【参考方案2】：

尝试不使用phonegap进行测试，而是创建平台版本（例如：android），然后通过手机在Android Studio中运行它。我尝试了模拟器，但没有在那里工作，因为模拟器中没有 WhatsApp 或其他社交应用程序，这就是它不会显示任何内容的原因。