本文以QQ和微信为例(首先需要申请相应平台的AppKey 和 AppSecret)
1 到UM官网下载SDK(点击社会化分享->点击设置选择要使用的平台)
https://developer.umeng.com/sdk/reactnative
下载包包含(RN IOS Android)
屏幕快照 2018-06-22 下午1.37.08.png
屏幕快照 2018-06-22 下午1.43.06.png
屏幕快照 2018-06-22 下午1.43.17.png
屏幕快照 2018-06-22 下午1.45.21.png
一 集成iOS
1.直接将整理好的文件夹拖入你的工程(包含 上图中的iOS文件夹和ReactNative文件夹下的common_ios和share_ios)
添加平台库(由于本文使用的精简版只需要添加一下两个)
详情:https://developer.umeng.com/docs/66632/detail/66825
libsqlite3.tbd
CoreGraphics.framework
2.在AppDelegate.m中注册友盟Appkey和相应平台Key以及注册回调
#import "RNUMConfigure.h"
#import
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[UMConfigure setLogEnabled:YES];
[RNUMConfigure initWithAppkey:@"umk" channel:@"App Store"];
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxk" appSecret:@"wxs" redirectURL:@"url"];
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"qqk" appSecret:nil redirectURL:@"url"];
}
//设置系统回调 支持所有iOS系统
//注：此方法在swift4.1(Xcode 9.3)已废弃，Objective-C项目不影响。 新浪 平台外的其他平台可在使用另外两种回调方法。请看官方文档
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
//6.3的新的API调用，是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];
if (!result) {
// 其他如支付等SDK的回调
}
return result;
}
3.在Info.plist文件中 (添加SSO白名单) 和 (配置URL Scheme)
LSApplicationQueriesSchemes
wechat
weixin
mqqapi
mqq
mqqOpensdkSSoLogin
mqqconnect
mqqopensdkdataline
mqqopensdkgrouptribeshare
mqqopensdkfriend
mqqopensdkapi
mqqopensdkapiV2
mqqopensdkapiV3
mqqopensdkapiV4
mqzoneopensdk
wtloginmqq
wtloginmqq2
mqqwpa
mqzone
mqzonev2
mqzoneshare
wtloginqzone
mqzonewx
mqzoneopensdkapiV2
mqzoneopensdkapi19
mqzoneopensdkapi
mqqbrowser
mttbrowser
tim
timapi
timopensdkfriend
timwpa
timgamebindinggroup
timapiwallet
timOpensdkSSoLogin
wtlogintim
timopensdkgrouptribeshare
timopensdkapiV4
timgamebindinggroup
timopensdkdataline
wtlogintimV1
timapiV1
11474533850_.pic_hd.jpeg
QQ:
1、"tencent"+腾讯QQ互联应用appID,如tencent100424468
2、“QQ”+腾讯QQ互联应用appID转换成十六进制(不足8位前面补0),如: QQ05fc5b14
微信:
直接只用微信平台提供的key,如wxdc1e388c3822c80b
共三个URLTypes
二. 集成安卓
屏幕快照 2018-06-22 下午2.20.14.png
屏幕快照 2018-06-22 下午2.20.28.png
2.在build.gradle添加引用
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.facebook.react:react-native:+'
// From node_modules
compile files('libs/umeng-common-1.5.3.jar')
compile files('libs/umeng-sharetool-6.9.2.jar')
compile files('libs/umeng-shareboard-widget-6.9.2.jar')
compile files('libs/umeng-share-wechat-simplify-6.9.2.jar')
compile files('libs/umeng-share-QQ-simplify-6.9.2.jar')
compile files('libs/umeng-share-core-6.9.2.jar')
}
屏幕快照 2018-06-22 下午2.25.09.png
屏幕快照 2018-06-22 下午2.25.41.png
4.为了方便管理在java文件包名目录下创建两个包文件夹um和wxapi
4.1.将ReactNative下的(common_android和share_android中的文件导入um包)
4.2.在wxapi文件夹下创建一个类WXEntryActivity并继承WXCallbackActivity
屏幕快照 2018-06-22 下午2.35.11.png
5.添加权限和平台配置（注意:修改tencent-appkey和UM appkey Channel ID）
6.在MainApplication文件下(添加一个包new DplusReactPackage(),配置umk wxk wxs qqid)
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new DplusReactPackage()
);
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
Config.shareType = "react native";
UMConfigure.init(this,"umk","umeng",UMConfigure.DEVICE_TYPE_PHONE,"");
}
// 配置平台，将AppKey 和 AppSecret 换成你申请的即可
// 【注意】QQ 和 QQ 空间是同一个设置（同一个key、AppSecret）
{
PlatformConfig.setWeixin("wxk", "wxs");
PlatformConfig.setQQZone("qqid", "");
}
7.在MainActivity中注册模块和回调添加两个方法
ublic class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "studyUMR";
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ShareModule.initSocialSDK(this);
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
}
}
三.ReactNative使用就很简单了
整理好的ReactNative文件夹中有一个js文件夹里面包含三个文件
AnalyticsUtil.js是友盟统计
PushUtil.js是友盟推送
ShareUtil.js是友盟登录和分享
我们只使用ShareUtil.js
import UMShareModule from './Components/UMjs/ShareUtil'
...
// 0 QQ
// 2 微信
// 3 朋友圈
// 4 QQ空间
授权登录
UMShareModule.auth(0,(code,result,message) =>{
console.log(code,result,message);
});
调用模板分享
UMShareModule.shareboard(
'标题',
'http://dev.umeng.com/images/tab2_1.png',
'http://baidu.com',
'title',[0,2,3,4],(code,message) =>{
console.log(code,message);
});
四.关于IOS QQ TIM登录无法获取用户信息的BUG
但是QQ授权可以成功所以需要修改UMShareModule.m中的方法判断如果是QQ登录获取用户信息则自行获取
RCT_EXPORT_METHOD(auth:(NSInteger)platform completion:(RCTResponseSenderBlock)completion)
{
UMSocialPlatformType plf = [self platformType:platform];
if (plf == UMSocialPlatformType_UnKnown) {
if (completion) {
completion(@[@(UMSocialPlatformType_UnKnown), @"invalid platform"]);
return;
}
}
if (UMSocialPlatformType_QQ == plf) {
__weak typeof(self) weakSelf = self;
[[UMSocialManager defaultManager] authWithPlatform:plf currentViewController:nil completion:^(id result, NSError *error) {
// "ret":0, // 返回码
// "msg":"", // 错误信息，red<0
// "nickname":"Peter", //呢称
// "figureurl":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/30", //30x30
// "figureurl_1":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/50", //50x50
// "figureurl_2":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/100",//100x100
// "gender":"男",//性别
// "vip":"1", //黄钻用户
// "level":"7",//黄钻等级
// "is_yellow_year_vip":"1"//年费黄钻用户
UMSocialUserInfoResponse *authInfo = result;
NSString *url = @"https://graph.qq.com/user/get_user_info";
NSDictionary *parameters = @{@"access_token":authInfo.accessToken,@"openid":authInfo.openid,@"oauth_consumer_key":@"1105307876"};
[weakSelf GET:url parameters:parameters success:^(id result) {
NSMutableDictionary *retDict = [NSMutableDictionary dictionaryWithCapacity:5];
retDict[@"name"] = result[@"nickname"];
retDict[@"iconurl"] = result[@"figureurl_2"];
retDict[@"gender"] = result[@"gender"];
retDict[@"city"] = result[@"city"];
retDict[@"province"] = result[@"province"];
completion(@[@200, retDict, @""]);
} failed:^(NSError *error) {
NSLog(@"-----%@",error);
}];
}];
}else{
[[UMSocialManager defaultManager] getUserInfoWithPlatform:plf currentViewController:nil completion:^(id result, NSError *error) {
if (completion) {
if (error) {
NSString *msg = error.userInfo[@"NSLocalizedFailureReason"];
if (!msg) {
msg = error.userInfo[@"message"];
}if (!msg) {
msg = @"share failed";
}
NSInteger stCode = error.code;
if(stCode == 2009){
stCode = -1;
}
completion(@[@(stCode), @{}, msg]);
} else {
UMSocialUserInfoResponse *authInfo = result;
NSMutableDictionary *retDict = [NSMutableDictionary dictionaryWithCapacity:8];
retDict[@"uid"] = authInfo.uid;
retDict[@"openid"] = authInfo.openid;
retDict[@"unionid"] = authInfo.unionId;
retDict[@"accessToken"] = authInfo.accessToken;
retDict[@"refreshToken"] = authInfo.refreshToken;
retDict[@"expiration"] = authInfo.expiration;
retDict[@"name"] = authInfo.name;
retDict[@"iconurl"] = authInfo.iconurl;
retDict[@"gender"] = authInfo.unionGender;
NSDictionary *originInfo = authInfo.originalResponse;
retDict[@"city"] = originInfo[@"city"];
retDict[@"province"] = originInfo[@"province"];
retDict[@"country"] = originInfo[@"country"];
completion(@[@200, retDict, @""]);
}
}
}];
}
}