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

时间：2015-11-30 05:57:34

标签： phonegap-plugins

我是input[type="button"], input[type="submit"], input[type="reset"], button { cursor: pointer; } .container{ width:700px; margin:0 auto; } label{ display:block; } .header{ background: #2196F3; border: 1px solid #CCCCCC; border-radius: 2px; border-width: 1px; color: #fff; font-family: Roboto,sans-serif; font-weight: bold; font-size: 20px; margin: 1px auto; padding: 10px; display:block; text-align:center } .under_header{ font-family: Roboto,sans-serif; padding:10px; font-size: 15px; } .segment_header { text-align:Left; width: auto; margin: 1px; color: #FFF; background: #2196F3 none repeat scroll 50% 50% / cover; border-radius: 4px; font-family:Roboto,sans-serif; font-weight:bold; font-size:18px; padding:0px 0px 0px 10px; } .question{ padding: 10px; margin-bottom: 1px; margin-left: 1px; float: left; display: block; font-weight: bold; } .question .top_question{ display: block !important; min-height: 19px; } .question .text_field{ background: #FAFAFA none repeat scroll 0% 0%; border: 1px solid #CCC; border-radius: 2px; color: #333; font-family: "Roboto",sans-serif; font-size: 13px; margin: 1px 0px; padding: 10px; display:block; } .question .drop_down { background: #FAFAFA none repeat scroll 0% 0%; border: 1px solid #CCC; border-radius: 2px; color: #333; font-family: "Roboto",sans-serif; font-size: 13px; margin: 1px 0px; padding: 9px; display:block; } .question .item_anchor { position: relative; top: -15px; } .full_width { padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; margin-left: 0px !important; margin-right: 0px !important; width: 100%; } .required .icon{ background-image: none; background-position: left; background-repeat: no-repeat; font-size: 13px; padding-left: 14px; } .question .matrix { border-collapse: collapse; margin-right: 3px; margin-top: 1px; } .form_table{ width: 650px; margin-left: auto; margin-right: auto; border-radius: 4px; border: 0px solid #CCCCCC; background: #FFFFFF; background-size: cover; color: #333333; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.30); } .form_table table { font-size: 1em; } .question .matrix th{ color: #FFFFFF; background: #64B5F6; padding: 5px; font-weight: bold; text-align: center; vertical-align: bottom; } .question .matrix td{ padding: 5px; text-align: center; white-space: nowrap; height: 26px; } .question .matrix td.question{ font-weight: normal; } .question .matrix .multi_scale_sub th{ font-weight: normal; border-top: 1px solid #CCCCCC !important; background: #999999; } .question .matrix .multi_scale_break{ border-right: 1px solid #CCCCCC; } .question .matrix_row_dark td{ color: #333333; background: #FAFAFA; } .question .matrix_row_dark td.question{ color: #333333; background: #FAFAFA; } .question .matrix_row_light td{ color: #333333; background: #FFFFFF; } .question .matrix_row_light td.question{ color: #333333; background: #FFFFFF; } .question .rating_ranking td{ padding: 5px; } .question .scroller{ border: 1px solid #CCCCCC; } .highlight{ background: #FFF9C4 !important; } tr.highlight td{ background: #FFF9C4 !important; } .outside{ color: #333333; } .outside_container{ width: 650px; padding: 1em 0; margin-left: auto; margin-right: auto; text-align: center; color: #333333; } .submit_button { display: inline-block; cursor: pointer; margin: 5px; padding: 10px 20px; font-weight: bold; text-align: center; border-width: 1px; transition: background 0.1s ease-out 0s; white-space: normal; } .outside_container .submit_button{ color: #FFFFFF !important; background: #FF9800; background-size: auto; border-style: none; border-width: 1px; border-color: #FFFFFF; border-radius: 4px; text-align: center; font-family: 'Roboto',sans-serif; font-size: 14px; font-weight: bold; min-width: 30%; padding: 10px 20px; text-transform: uppercase; box-shadow: 0 1px 6px rgba(0,0,0,0.30); } .buttons_reverse { direction: rtl; text-align: center; } .outside_container .submit_button:hover{ background: #F57C00; border-color: #BBBBBB; background-size: auto; } .progressBarWrapper{ border-radius: 4px; background: #FFFFFF; background-size: cover; border-color: #CCCCCC; } .progressBarBack{ color: #FFFFFF; background-color: #FF9800; } .progressBarFront{ color: #333333; } .ui-widget{ font-family: 'Roboto',sans-serif; } .invalid{ background: #FFEEEE; } .invalid .invalid_message{ color: #FF0000; background: #FFEEEE; border: 1px solid #FF0000; border-radius: 2px; } .form_table.invalid{ border: 2px solid #FF0000; } .invalid .matrix .invalid_row{ background: #FFEEEE; }的新手，我正在创建一个愿望/问候应用程序。我想添加社交按钮以向人们分享该问候语。所选问候语应该通过twitter，g +，WhatsApp和Facebook分享。 enter image description here

enter image description here

2 个答案:

答案 0 :(得分：5)

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

或使用Cordova CLI，来自npm：

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

    2. 要在Android上共享远程图像（或其他文件），首先需要在本地存储文件，因此请将此权限添加到AndroidManifest.xml：

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

    对于iOS，您需要将Social.framework和MessageUI.framework添加到您的项目中。单击您的项目，构建阶段，链接二进制文件库，搜索并添加Social.framework和MessageUI.framework。

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

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

    2. 下载iOS和/或Android的源文件并将其复制到您的项目中。

      3. iOS：将SocialSharing.h和SocialSharing.m复制到platforms / ios //插件

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

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

      PhoneGap Build

      只需将以下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>

      的WhatsApp

      • 请注意，在iOS上共享图片和文字时，只共享图片 - 让我们希望WhatsApp创建一个合适的iOS扩展来解决这个问题。

      • 在使用此方法之前，您可能需要使用canShareVia（＆＃39; whatsapp＆＃39; ..（见下文）。

        <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

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

答案 1 :(得分：0)

尝试不使用phonegap测试它，而是创建平台版本（例如：android），然后通过手机在Android Studio中运行它。我试过模拟器，但没有在那里工作，因为模拟器中没有Wha​​tsApp或其他社交应用程序，这就是为什么它不会向你显示。

相关问题
最新问题