V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jpush
V2EX  ›  推广

React Native 轻松集成分享功能(Android 篇)

  •  
  •   jpush · 2017-11-01 16:14:36 +08:00 · 1794 次点击
    这是一个创建于 1450 天前的主题,其中的信息可能已经有所发展或是发生改变。

    关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能。

    在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台)。支持的平台如下:

    第一步:安装

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

    第二步:配置

    如果 link 失败,则需要进行手动配置 settings.gradlebuild.gradle 部分

    2.1 配置 settings.gradle

    your project/settings.gradle

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

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

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

    your app/src/.../wxapi/WXEntryActivity.java

    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 - 极光( JPush 为极光推送团队账号,欢迎关注)

    原文:React Native 轻松集成分享功能( Android 篇)

    知乎专栏:极光日报

    目前尚无回复
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2928 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 04:20 · PVG 12:20 · LAX 21:20 · JFK 00:20
    ♥ Do have faith in what you're doing.