本文以QQ和微信為例(首先需要申請相應平臺的AppKey 和 AppSecret)
1 到UM官網下載SDK(點擊社會化分享->點擊設置選擇要使用的平臺)
https://developer.umeng.com/sdk/reactnative
下載包包含(RN IOS Android)
一 集成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 <UMShare/UMShare.h>
- (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)
<key>LSApplicationQueriesSchemes</key>
<array>
<!-- 微信 URL Scheme 白名單-->
<string>wechat</string>
<string>weixin</string>
<!-- QQ、Qzone URL Scheme 白名單-->
<string>mqqapi</string>
<string>mqq</string>
<string>mqqOpensdkSSoLogin</string>
<string>mqqconnect</string>
<string>mqqopensdkdataline</string>
<string>mqqopensdkgrouptribeshare</string>
<string>mqqopensdkfriend</string>
<string>mqqopensdkapi</string>
<string>mqqopensdkapiV2</string>
<string>mqqopensdkapiV3</string>
<string>mqqopensdkapiV4</string>
<string>mqzoneopensdk</string>
<string>wtloginmqq</string>
<string>wtloginmqq2</string>
<string>mqqwpa</string>
<string>mqzone</string>
<string>mqzonev2</string>
<string>mqzoneshare</string>
<string>wtloginqzone</string>
<string>mqzonewx</string>
<string>mqzoneopensdkapiV2</string>
<string>mqzoneopensdkapi19</string>
<string>mqzoneopensdkapi</string>
<string>mqqbrowser</string>
<string>mttbrowser</string>
<string>tim</string>
<string>timapi</string>
<string>timopensdkfriend</string>
<string>timwpa</string>
<string>timgamebindinggroup</string>
<string>timapiwallet</string>
<string>timOpensdkSSoLogin</string>
<string>wtlogintim</string>
<string>timopensdkgrouptribeshare</string>
<string>timopensdkapiV4</string>
<string>timgamebindinggroup</string>
<string>timopensdkdataline</string>
<string>wtlogintimV1</string>
<string>timapiV1</string>
</array>
這里使用UM官方的圖QQ:
1、"tencent"+騰訊QQ互聯應用appID,如tencent100424468
2、“QQ”+騰訊QQ互聯應用appID轉換成十六進制(不足8位前面補0),如: QQ05fc5b14
微信:
直接只用微信平臺提供的key,如wxdc1e388c3822c80b
共三個URLTypes
二. 集成安卓
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')
}
3.將剩下的資源文件夾拖入工程res下,values本身就存在所以需要將values中的文件合并4.為了方便管理在java文件包名目錄下創建兩個包文件夾um和wxapi
4.1.將ReactNative下的(common_android和share_android中的文件導入um包)
4.2.在wxapi文件夾下創建一個類WXEntryActivity并繼承WXCallbackActivity
5.添加權限和平臺配置(注意:修改tencent-appkey和UM appkey Channel ID)
<!-- UM必須的權限 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<!-- UM推薦的權限 -->
<!-- UM添加如下權限,以便使用更多的第三方SDK和更精準的統計數據 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...
<application
...
<!--QQ-->
<activity
android:name="com.tencent.tauth.AuthActivity"
android:launchMode="singleTask"
android:noHistory="true" >
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="tencent100424468" />
</intent-filter>
</activity>
<activity
android:name="com.tencent.connect.common.AssistActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:configChanges="orientation|keyboardHidden|screenSize"/>
<!--WeChat-->
<activity
android:name=".wxapi.WXEntryActivity"
android:configChanges="keyboardHidden|orientation|screenSize"
android:exported="true"
android:theme="@android:style/Theme.Translucent.NoTitleBar" />
<!--兼容舊版的SDK-->
<meta-data android:value="YOUR_APP_KEY" android:name="UMENG_APPKEY"/>
<meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>
</application>
6.在MainApplication文件下(添加一個包new DplusReactPackage(),配置umk wxk wxs qqid)
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>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"http://年費黃鉆用戶
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, @""]);
}
}
}];
}
}