web-dev-qa-db-ja.com

Ionicアプリを「共有」リストに表示してデータを受信する

Ionicアプリをユーザーが画像などの共有ボタンをクリックしたときに「共有」リストに表示されるようにしようとしています。

Sharing example

私が理解している限り、私は何かを追加する必要があります

<intent-filter> 
   <action Android:name="Android.intent.action.SEND" />
   <category Android:name="Android.intent.category.DEFAULT" />
   <data Android:mimeType="image/*" />
</intent-filter>

AndroidManifest.xmlへ。 cordova-custom-config plugin を使用して実行できると思います。
その後、どういうわけかその意図を処理する必要がありますが、それが私にとってトリッキーになります。現在インテントのためにメンテナンスされている唯一のCordovaプラグインは これ のようです。私はそれを次のように使ってみました：

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.registerBroadcastReceiver();
    });
  }
  private registerBroadcastReceiver(){
      window.plugins.intentShim.registerBroadcastReceiver({
          filterActions: [
              'com.darryncampbell.cordova.plugin.broadcastIntent.ACTION'
              ]
          },
          function(intent) {
              //  Broadcast received
              console.log('Received Intent: ' + JSON.stringify(intent.extras));
          }
      );
  }

しかし、この方法では、window.pluginsが未定義であるというエラーが発生します。 これをIonicと統合する方法が本当にわかりません。

これはAndroidでのみ機能しますが、iOSでも機能させたいと思っています。This SO =質問 は関連していて、iOSでそれを行う方法について言及していますが、それは約4年前（リンクされたiOSパーツ5年）であり、Androidもう存在しません。

誰かが私をここで助けてくれるなら素晴らしいです。

関連：

更新

すべての答えはAndroid=のみに焦点を当てています。誰かが私にもっともっと必要とするので、誰かがiOSの正しい方向に私を向けてくれることを本当に望んでいました。 ..

最終的な結論と賞金

バウンティ
長い検討の結果、@ Ghandiに賞金を与えることを決定しました。誰も完全な答えを出すことはできませんでしたが、iOSの部分を含め、質問全体に答えようとしたのは彼だけでした。私は完全なコードソリューションを期待していませんでした。AndroidとiOSの両方の正しい方向へのポインタであり、それが彼がすべての回答の中で最も近くなったものです。これは非常に広範な質問であることを知っていますこの質問に答えたりコメントしたりしてくれたすべての人に感謝したいと思います。

同じことを達成しようとしている他の人のために、ここに私が私のすべての研究とここでの答えを結論付けます

Android
上記の質問ですでに説明したように、これらの行をAndroidManifest.xmlに追加する必要があります。 Androidすると、アプリが共有リストに表示されます。アプリが受信するデータは、いわゆる Intent を介して処理する必要があります。これを行うには Ionic Native-Web Intent を使用できます。2017.9.5以降、プラグインIonic Nativeが使用していないため、これはまだ機能しません。ただし、作成しましたan Githubの問題 ここで、次のバージョンのIonic Native（私は3.7.0だと思います）、次の2週間でリリースされる予定です）上記の質問ですでに述べた plugin を使用してこれを修正する必要があります。これにより、Ionicフレームワークを自分で使用し、単純に使用できるようになるという問題が解決されますIonicネイティブ。

iOS
iOSでは、少しトリッキーなようで、Webで見つけることも少なくなっています。 @Ghandiが以下の回答で提供するリンクをたどるのが最善です。

androidioscordovaionic-frameworkionic3
22
bergben

いくつかの詳細な分析の後、これは私が結論付けることができるものです：

Androidでは、説明されている here のように、cordova-plugin-intentを使用して、アプリケーションを共有リストに追加できます。説明されているように、アクティビティにインテントフィルターを追加することで、これを実現することもできます here

IOSでは、これを実現するための簡単なプラグインや既製のソリューションがないため、これは少しトリッキーです。しかし、iOSの共有メニューにアプリを追加することに関連する可能性のある最良のリンクは 共有メニューにリストされます リンクにはAppleこれを行うためのドキュメントといくつかの調整が含まれますこれを達成するためにInfo.plistで。

これは私が考え得る最良の答えです。それが役に立てば幸い。乾杯。

7
Gandhi

試す

window.intentShim.registerBroadcastReceiver

または内部で関数を呼び出す

document.addEventListener('deviceready', function(){
    registerBroadcastReceiver() }, 
false);
2
Sharad Kale

プラグインを実行するには https://github.com/darryncampbell/darryncampbell-cordova-plugin-intent を試してください：

  • --saveを使用してプラグインをインストールし、プラグインがconfig.xmlに追加されていることを確認します

    ionic plugin add https://github.com/darryncampbell/darryncampbell-cordova-plugin-intent --save

  • このプラグインはionic-nativeにインポートされないため、グローバルオブジェクトを識別する必要があります。これはプラグインフォルダーで宣言されます-> plugin.xml 。ここでのオブジェクトはintentShimです。

       <js-module name="IntentShim" src="www/IntentShim.js">
      <clobbers target="intentShim" />
  </js-module>

  • コードでグローバルオブジェクトを次のように宣言します。

    declare var intentShim:any;

    そしてあなたの機能では、

    private registerBroadcastReceiver(){
  intentShim.registerBroadcastReceiver({
      filterActions: [
          'com.darryncampbell.cordova.plugin.broadcastIntent.ACTION'
          ]
      },
      function(intent) {
          //  Broadcast received
          console.log('Received Intent: ' + JSON.stringify(intent.extras));
      }
  );
}
2
Suraj Rao

Ionicが提供するwebIntentプラグインを介してデータを送受信できます。

Ionic:
   Ionic CLI          : 5.0.2 (C:\Windows\System32\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.2

Cordova:
   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : Android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 5 other plugins)

Utility:
   cordova-res : not installed
   native-run  : 0.2.5

System:
   Android SDK Tools : 26.1.1 (D:\Android\Sdk)
   NodeJS            : v12.4.0 (D:\node.exe)
   npm               : 6.9.0
   OS                : Windows 8.1

プラグインをインストールするコマンド：

ionic cordova plugin add com-darryncampbell-cordova-plugin-intent
npm install --save @ionic-native/web-intent@4

コードデータを受信するには：（プロバイダーに「Web-Intent」を追加）

import { WebIntent } from '@ionic-native/web-intent';

clickMe() {
    console.log('clicked')
    this.webIntent.getIntent().then((data) => {
      console.log('Success', data);
    },
    err => {
      console.log('Error', err);
    });
  }
0
Ashay