React Native 輕鬆集成分享功能(Android 篇)

關於推送的集成請參考這篇文章,關於統計的集成請參考這篇文章,本篇文章將引導你集成分享功能。javascript

在集成插件以前,須要在各大開放平臺上成功註冊應用,並經過審覈(支持 3 個可選的主流平臺)。支持的平臺以下:java

第一步:安裝

npm install jshare-react-native --save
npm install jcore-react-native --save
react-native link

第二步:配置

若是 link 失敗,則須要進行手動配置 settings.gradlebuild.gradle 部分node

2.1 配置 settings.gradle

your project/settings.gradlereact

include ':app', ':jshare-react-native', ':jcore-react-native'
project(':jshare-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jshare-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

2.2 配置 build.gradle

your project/app/build.gradleandroid

android {
  ...
  defaultConfig {
    applicationId "your application id"
    ...
    manifestPlaceholders = [
      JSHARE_PKGNAME: "cn.jiguang.share.demo",
      JPUSH_APPKEY: "your app key",	//在此替換你的APPKey
      JPUSH_CHANNEL: "developer-default",		//應用渠道號, 默認便可
      TENCENT_APPID: "your tencent app id"
    ]
  }
  ...
  signingConfigs {
        debug {
            storeFile file("jshare.jks") //你的簽名文件路徑
            storePassword "sdkteam" //你的文件保存密碼
            keyAlias "jshare"  //你的別名
            keyPassword "sdkteam" //你的簽名密碼
        }
        release {
            storeFile file("jshare.jks")  //你的簽名文件路徑
            storePassword "sdkteam" //你的文件保存密碼
            keyAlias "jshare" //你的別名
            keyPassword "sdkteam" //你的簽名密碼
        }
    }
     buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.debug
        }
        debug {
            signingConfig signingConfigs.debug
        }
    }
    ...
    dependencies {
      compile project(':jshare-react-native')
      compile project(':jcore-react-native')
    }
}

2.3 配置 AndroidManifest.xml

your app/AndroidManifest.xmlnpm

...
<application>
         ...
        <!-- Required. For publish channel feature -->
        <!-- JPUSH_CHANNEL 是爲了方便開發者統計APK分發渠道。-->
        <!-- 例如: -->
        <!-- 發到 Google Play 的APK能夠設置爲 google-play; -->
        <!-- 發到其餘市場的 APK 能夠設置爲 xxx-market。 -->
        <!-- 目前這個渠道統計功能的報表還未開放。-->
        <meta-data android:name="JPUSH_CHANNEL" android:value="${JPUSH_CHANNEL}"/>
        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
        <meta-data android:name="JSHARE_PKGNAME" android:value="${applicationId}" />
        <meta-data android:name="TENCENT_APPID" android:value="${TENCENT_APPID}" />
        <!-- Optional 微信分享回調,wxapi必須在包名路徑下,不然回調不成功-->
        <activity
            android:name=".wxapi.WXEntryActivity"
            android:theme="@android:style/Theme.NoTitleBar"
            android:exported="true" />
</application>

2.4 添加 WXEntryActivity

須要在你的 app 下新建一個 wxapi 的包名,而後建立 WXEntryActivity。react-native

your app/src/.../wxapi/WXEntryActivity.javaapi

package yourPackageName.wxapi;


import cn.jiguang.share.wechat.WeChatHandleActivity;


public class WXEntryActivity extends WeChatHandleActivity {

}

2.5 添加 JGShareSDK.xml

在你的 assets 目錄下添加 JGShareSDK.xml,而且將新浪微博,QQ,微信的 AppId 和 AppSecret 替換成本身的。數組

<?xml version="1.0" encoding="utf-8"?>
<DevInfor>

    <!-- 若是不須要支持某平臺,可缺省該平臺的配置-->
    <!-- 各個平臺的KEY僅供DEMO演示,開發者要集成發佈須要改爲本身的KEY-->

    <SinaWeibo
        AppKey="374535501"
        AppSecret="baccd12c166f1df96736b51ffbf600a2"
        RedirectUrl="https://www.jiguang.cn"/>

    <QQ
        AppId="1106011004"
        AppKey="YIbPvONmBQBZUGaN"/>

    <Wechat
        AppId="wxc40e16f3ba6ebabc"
        AppSecret="dcad950cd0633a27e353477c4ec12e7a"/>
</DevInfor>

作完了以上步驟,sync 一下項目,若是成功了,接下來就能夠開始使用了。微信

目錄結構

2.6 加入 JSharePackage

your app/src/../MainApplication.java

@Override
 protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new JSharePackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
    );
}

初始化:仍是在 MainAppliation 中加入一下代碼初始化 JShareInterface:

@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, false);
  // 在 Init 以前調用,設置爲 true,則會打印 debug 級別日誌,不然只會打印 warning 級別以上的日誌
  // JShareInterface.setDebugMode(true);
  JShareInterface.init(this);
}

第三步:使用

接下來就能夠在 JS 中引入 JShareModule 調用它的接口:

your component.js

...
import JShareModule from 'jshare-react-native';

Android 接口

  • getPlatformList(cb)

    /**
     * 獲取SDK全部能用的平臺名稱,如要使用某個平臺,必須在JGShareSDK.xml中配置。
     * Android only
     * @param {Function} callback 返回值 list 是一個數組
     */

    usage:

    JShareModule.getPlatformList((list) => {
      console.log(list);
    });
  • share(message, successCallback, failCallback)

    /**
     * 分享
     * @param {object} message = {
     * 
     * platformString 必填,用於分享置不一樣的平臺 //能夠是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' 
     * type 必填
     * 
     * {
     *  type: 'text'
     *  platform: platformString  // 分享到指定平臺
     *  text: String
     *  imagePath: // 選填,新浪微博本地圖片地址,其餘平臺沒有這個字段(iOS 不支持這個字段)
     * }
     * 
     * {
     *  type: 'image'
     *  platform: platformString  // 分享到指定平臺
     *  imagePath: String   // 本地圖片路徑 imagePath, imageUrl imageArray 必須三選一
     *  text: String  // 選填
     *  imageUrl: String // 網絡圖片地址,必須以 http 或 https 開頭,imagePath, imageUrl imageArray 必須三選一 (iOS 不支持這個字段)
     *  imageArray: [String]  // (選填: 分享到 Qzone 才提供這個字段) 若是須要分享多張圖片須要這個參數,數組中問題圖片路徑 imagePath, imageUrl imageArray 必須三選一
     * }
     * 
     * {
     *  type: 'video'
     *  platform: platformString  // 分享到指定平臺
     *  title: String // 選填
     *  url: String // 視頻跳轉頁面 url
     *  text: String  // 選填
     *  imagePath: String // 選填,縮略圖,本地圖片路徑
     *  
     *  videoUrl: String  // QQ 空間本地視頻 (iOS 不支持這個字段)
     * }
     * 
     * {
     *  type: 'audio'
     *  platform: platformString  // 分享到指定平臺
     *  musicUrl: String //必填 點擊直接播放的 url
     *  url: String //選填,點擊跳轉的 url
     *  imagePath: String   //選填,縮略圖,本地圖片路徑,imagePath,imageUrl 必須二選一
     *  imageUrl: String // 選填,網絡圖片路徑,imagePath, imageUrl 必須二選一
     *  title: String // 選填 
     *  text: String  // 選填
     * }
     * 
     * {
     *  type: 'file'
     *  platform: platformString  // 分享到指定平臺
     *  path: String // 必填,文件路徑
     *  fileExt: String // 必填,文件類型後綴
     *  tile: String
     * }
     * 
     * {
     * type: 'emoticon'
     * platform: platformString  // 分享到指定平臺
     * imagePath: String // 必填,本地圖片路徑
     * }
     * 
     * {
     * type: 'app' // wechat_favourite 不支持
     * platform: platformString  // 分享到指定平臺
     * url: String // 點擊跳轉 url
     * extInfo: String // 選填 第三方應用自定義數據
     * path: String // 選填 對應 app 數據文件
     * title: String // 選填
     * text: String // 選填
     * }
     * 
     * {
     * type: 'link'
     * platform: platformString  // 分享到指定平臺
     * url: String // 必填,網頁 url
     * imagePath: String // 選填,本地圖片路徑 imagePath,imageUrl 必須二選一 
     * imageUrl: String // 選填,網絡圖片地址 imagePath imageUrl 必須二選一 (iOS 不支持)
     * title: String // 選填
     * text: String // 選填
     * }
     * 
     * {
     * type: 'undefined'
     * platform: platformString  // 分享到指定平臺
     * }
     * 
     * @param {Function} success = function (state) {} ## 
     * state = {state: String} state = 'success' / 'fail' / 'cancel' / 'unknow'
       *
     * @param {Function} fail = function (error) {} ## 
     * error = {code: number, descript: String}
     */

    usage:

    var message = {
          platform: "wechat_session",
          type: "image",
          text: "JShare test text",
          imagePath: "/storage/emulated/0/DCIM/Camera/xx.jpg"
        };
    JShareModule.share(message, (map) => {
      console.log("share succeed, map: " + map);
    }, (map) => {
      console.log("share failed, map: " + map);
    })
  • getSocialUserInfo(param, successCallback, failCallback)

    /**
     * 獲取社交平臺用戶信息
     * @param {Object} param = {
     *  platform: String //能夠是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' 
     * }
     * @param {Function} success function (userInfo) {} 
     * userInfo = {
     *  name: String        
     *  iconUrl: String   // 社交平臺頭像連接
     *  gender: String    // 'female' /  'male'
     *  response: Object  // 社交平臺上的原始數據
     * }
     *
     * @param {Function} fail = function (error) {} ## 
     * error = {code: number, descript: String}
     */

    usage:

    var param = {
      platform: "wechat_session"
    };
    JShareModule.getSocialUserInfo(param, (map) => {
      console.log(map);
      }, (errorCode) => {
      console.log("errorCode: " + errorCode);
    });
  • isPlatformAuth(param, callback)

    /**
     * 判斷某平臺是否支持受權
     * 
     * @param {Object} param = {
     *  platform: String //能夠是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' 
     * }
     * @param {Function} callback = (Boolean) => {} 
     */

    usage:

    var param = {
    platform: "wechat_session"
    };
    JShareModule.isPlatformAuth(param, (result) => {
    console.log(param.platform + "is Auth: " + result);
    });
  • isClientValid(param, callback)

    /**
     * 判斷該平臺的分享是否有效
     * Android only
     * @param {Object} param = {
     *  platform: String //能夠是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' 
     * }
     * @param {Function} callback = (Boolean) => {} 
     */

    usage:

    var param = {
      platform: "wechat_session"
    };
    JShareModule.isClientValid(param, (result) => {
      console.log(param.platform + "is valid: " + result);
    });
  • authorize(param, successCallback, failCallback)

    /**
     * 受權接口
     * @param {Object} param = {
     *  platform: String //能夠是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' / 'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' 
     * }
     * @param {Function} success 
     * @param {Function} fail 
     */

    usage:

    var param = {
      platform: "wechat_session"
    };
    JShareModule.authorize(param, (map) => {
      console.log("Authorize succeed " + map);
    }, (errorCode) => {
      console.log("Authorize failed, errorCode : " + errorCode);
    });
  • isAuthorize(param, callback)

    /**
     *  判斷是否受權接口
     * @param {Object} param = {
     *  platform: String //能夠是 'wechat_session' / 'wechat_timeLine' / 'wechat_favourite' /    'qq' / 'qzone' / 'sina_weibo' / 'sina_weibo_contact' 
     * }  
     * @param {Function} callback = (Boolean) => {} 
     */

    usage:

    var param = {  
      platform: "wechat_session"
    };
    JShareModule.isAuthorize(param, (result) => {        		
       console.log("param is Authorize: " + result);
    });
  • cancelAuthWithPlatform(param, callback)

    /**
     * 刪除用戶受權本地數據
     * 
     * @param {Object} param = {
     *  platform: String //能夠是 'wechat_session' / 
     *                           'wechat_timeLine' / 
     *                           'wechat_favourite' / 
     *                           'qq' / 
     *                           'qzone' /
     *                           'sina_weibo' /
     *                           'sina_weibo_contact' 
     * }
     * @param {Function} callback = (Int) => {}
     * @code 返回碼,0 表示成功刪除
     */

    usage:

    var param = {
      platform: "wechat_session"
    };
    JShareModule.cancelAuthWithPlatform(param, (code) => {
      if (code === 0) {
        console.log("remove authorize succeed");
      } else {
        console.log("remove authorize failed, errorCode: " + code);
      }
    });

做者:KenChoi - 極光推送

原文:React Native 輕鬆集成分享功能(Android 篇)

知乎專欄:極光日報

相關文章
相關標籤/搜索