Ionic Cordova Social Share 插件 - 无法读取未定义的属性“socialsharing”

Question

So I've been on this for 3 days now... Tried several tutorials like this one, and tried after the original page here , and read the GitHub description a thousand times.所以，我一直在此为现在是3天... ...试了教程像这一个，和原来的页面后试图在这里，并宣读了GitHub的描述一千倍。

Versions I'm using:我正在使用的版本：

$ npm -v
3.7.3

$ cordova -v
6.1.0 (cordova-lib@undefined)

$ ionic -v
1.7.14

The error I'm getting in Chrome browser: Cannot read property 'socialsharing' of undefined .我在 Chrome 浏览器中遇到的错误：无法读取 undefined 的属性“socialsharing” 。 On android or ios phone nothing happens if buttons are pressed.如果按下按钮，在 android 或 ios 手机上没有任何反应。 Not even error function call.甚至没有错误函数调用。

The app.js + controller: (notice I'm trying with window.plugins and without .plugins as well!) app.js + 控制器：（注意我正在尝试使用 window.plugins 而没有 .plugins ！）

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

  .controller('shareCtrl',['$scope',function($scope) {

     $scope.facebookShare=function(){
      window.socialsharing.shareViaFacebook('Digital Signature Maker', null /* img */, "https://play.google.com/store/apps/details?id=com.prantikv.digitalsignaturemaker" /* url */, null, 
        function(errormsg){alert("Error: Cannot Share")});
     }

     $scope.whatsappShare=function(){
      window.plugins.socialsharing.shareViaWhatsApp('Digital Signature Maker', null /* img */, "https://play.google.com/store/apps/details?id=com.prantikv.digitalsignaturemaker" /* url */, null, 
        function(errormsg){alert("Error: Cannot Share")});

} }

I have tried to install even manually, and here there was a different error.我什至尝试过手动安装，这里有一个不同的错误。 When I inserted SocialSharing.js into index.html (before cordova.js), Chrome console said: Uncaught ReferenceError: require is not defined , which is in line 1 of SocialSharing.js:当我将 SocialSharing.js 插入 index.html（cordova.js 之前）时，Chrome 控制台说： Uncaught ReferenceError: require is not defined ，这是 SocialSharing.js 的第 1 行：

var cordova = require('cordova');

So I have installed require.sj (npm install -g requirejs) with success and then tried manually but whole different kind of errors appeared.所以我已经成功安装了 require.sj (npm install -g requirejs)，然后手动尝试但出现了完全不同类型的错误。

Tried re installing the plugin or remove and add again platforms, but no change.尝试重新安装插件或删除并重新添加平台，但没有变化。

Not sure if it's related, but have tried to use ngCordova's $cordovaFileOpener2 and that one always gave the error of undefined for cordova.不确定它是否相关，但曾尝试使用 ngCordova 的 $cordovaFileOpener2 并且总是为cordova给出未定义的错误。 (Didn't work on actual phone either) （也不适用于实际手机）

Appreciate any help!感谢任何帮助！ Thanks谢谢

UPDATE: I have pasted in all of my .js file content above.更新：我已经粘贴了上面所有的 .js 文件内容。

Please note that, I have successfully installed the share plugin:请注意，我已经成功安装了共享插件：

cordova plugin add cordova-plugin-x-socialsharing
Fetching plugin "cordova-plugin-x-socialsharing" via npm
Installing "cordova-plugin-x-socialsharing" for android

Here is my index.html:这是我的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>    
  </head>

  <body ng-app="starter">
    <ion-view view-title="Share">
      <ion-content ng-controller="shareCtrl">
        <div class="card">
            <div class="item item-divider">
                <b> Share this app</b>
            </div>
         <ul class="list">
           <li class="item" id="displayLabel">

            <button class="button button-block button-royal item-icon-left" ng-click="whatsappShare()">
                <i class="icon ion-social-whatsapp"></i>
                  WhatsApp
          </button>
          </li>

           <li class="item" id="displayLabel">

            <button class="button button-block button-royal item-icon-left" ng-click="facebookShare()">
                <i class="icon ion-social-twitter"></i>
                  facebook
          </button>
          </li>

          <li class="item" id="displayLabel">     
            <button class="button button-block button-royal item-icon-left" ng-click="OtherShare()">
                 <i class="icon ion-android-share-alt"></i>
                  Other
          </button>
          </li>
        </ul>
        </div>
      </ion-content>
    </ion-view>

  </body>
</html>

Answer 1

Actually Plugins provide access to device and platform functionality that is ordinarily unavailable to web-based apps.实际上，插件提供了对基于 Web 的应用程序通常不可用的设备和平台功能的访问。 So you may not achieve plugin functionality on browser.所以你可能无法在浏览器上实现插件功能。

You can achieve on device(android/ios/emulator) using either by using Plugin or ngCordova.js file您可以使用插件或 ngCordova.js 文件在设备（android/ios/emulator）上实现

Using Plugin使用插件

Installation: cordova plugin add cordova-plugin-x-socialsharing安装： cordova插件添加cordova-plugin-x-socialsharing

Usage:用法：

.controller('ShareCtrl', function ($scope) {
    $scope.whatsappShare = function(){
        if(window.plugins.socialsharing) {
        window.plugins.socialsharing.canShareVia('whatsapp',
            'msg', null, null, null,
            function (e) {
                //do something
            },
            function (e) {
               //error occured
            });
       }
    }
})

Using ng-Cordova使用 ng-Cordova

Installation: Add ng-cordova file in your project and include it in index.html file安装：在你的项目中添加 ng-cordova 文件并将其包含在 index.html 文件中

<script src="lib/ng-cordova.min.js"></script>

Usage :用法：

.controller('ShareCtrl', function ($scope,$cordovaSocialSharing) {
   $scope.shareByWhatsApp = function() {
        $cordovaSocialSharing
            .shareViaWhatsApp('sharedMsg', "", shareAppLink)
            .then(function(result) {
            }, function(err) {
                // An error occurred. Show a message to the user
                alert("error : "+err);
            });
    };
})

Ionic Cordova Social Share 插件 - 无法读取未定义的属性“socialsharing”

问题描述

1 个解决方案

解决方案1
2 2016-04-01 06:28:01

Ionic Cordova Social Share 插件 - 无法读取未定义的属性“socialsharing”

问题描述

1 个解决方案

解决方案1 2 2016-04-01 06:28:01

解决方案1
2 2016-04-01 06:28:01