文档章节

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

极光开发者服务
 极光开发者服务
发布于 2017/11/01 16:16
字数 1735
阅读 73
收藏 0

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

在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 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 - 极光推送

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

知乎专栏:极光日报

© 著作权归作者所有

极光开发者服务
粉丝 43
博文 240
码字总数 257306
作品 1
深圳
个人站长
私信 提问
React Native 轻松集成统计功能(Android 篇)

关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能。 第一步 安装 在你的项目路径下执行命令: 执行完上述命令后,使用 Android Studio...

极光推送
2017/11/06
26
0
继 Airbnb 之后,Udacity 也宣布弃用 React Native!

Udacity 移动端团队最近删除了 App 中使用 React Native 语言开发的相关功能。 我们收到大量有关我们用法或 React Native 的问题以及为什么我们停止投入资源和精力在 RN 上。 在这篇文章中,...

亦枫
2018/10/29
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
2018/07/12
0
0
React Native 混合开发(Android篇)

在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。 ...

SuShine
07/05
41
0
React Native基础——环境配置、学习资源分享

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/53957903 React Native基础——环境配置、学习资源分享 已经有两个月没有写过博客,...

Aduroidpc
2016/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为构建社交关系链手淘都做了啥?

作者|王卫(泓冰) 出品|阿里巴巴新零售淘系技术部 01、淘宝社交关系推荐的背景 1、互联网下半场到来:互联网的下半场,人口红利消失,各大平台需要对用户做精细化运营,用户的增长和留存是每一...

阿里云官方博客
9分钟前
3
0
Iaas/Paas/Saas有何区别,一个故事告诉你

云计算有三种服务模式,IaaS,PaaS和SaaS。单从英文全称去理解,他们分别是“基础设施即服务”“平台即服务”和“软件即服务”。 这样翻译过来可不好理解,但是我们可以举个例子。现在我们就以...

JEPaaS云平台
17分钟前
3
0
温度传感器怎么测好坏

  温度传感器也就是负温度系数热敏电阻,温度越高,电阻越小,测量时先看其阻值能不能根据温度的变化而变,再看其变化的阻值是不是在标定的范围之内。   有以下四种方法;   1、若是有...

仙溪
17分钟前
3
0
zk中ZooKeeperServer解析

内部类 ChangeRecord 处理PrepRP和FinalRP之间的信息 static class ChangeRecord { ChangeRecord(long zxid, String path, StatPersisted stat, int childCount, List<ACL> acl) {......

writeademo
28分钟前
3
0
LNMP---安装worrdpress、discuz,域名重定向,用户认证,nginx访问日志

4.34 安装wordpress 4.35 安装discuz 4.36 域名重定向 4.37 用户认证 4.38 nginx访问日志 一、安装wordpress 创建博客: 添加一个博客的虚拟主机 blog.tobe.com.conf 做如下更改 安装博客wor...

tobej
30分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部