申请各个开放平台对应的应用
微博 https://open.weibo.com/apps
QQ http://op.open.qq.com/manage_centerv2/android
使用的是 umeng 提供的技术
注册账号并创建应用
创建应用: https://mobile.umeng.com/platform/apps/list
注意保存创建应用的 AppKey
集成下载对应的 SDK ,点击 设置 选择完整版还是精简版
将下载的文件进行解压
然后将 Android 中的 .jar 文件保存到 libs 文件夹下,将 ReactNative 中的 .java 文件保存到 java 文件夹下
Android Studio 中进行配置
导入所有的 .jar 包
注: 因为我已经导入过了,所有没有 Add as Library... 这一项
接下来,在 app/build.gradle 下的依赖中看到我们导入进来的包
AndroidManifest.xml 添加对应权限
<!--分享-->
<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.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<application
...
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<!--微信-->
<activity
android:name="com.umeng.weixin.callback.WXCallbackActivity"
android:configChanges="keyboardHidden|orientation|screenSize"
android:exported="true"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.Translucent.NoTitleBar" />
<!--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="tencent1108090716" /> //改成自己申请的appkey
</intent-filter>
</activity>
<activity
android:name="com.tencent.connect.common.AssistActivity"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:configChanges="orientation|keyboardHidden|screenSize"/>
<!--微博-->
<activity
android:name="com.umeng.socialize.media.WBShareCallBackActivity"
android:configChanges="keyboardHidden|orientation"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:exported="false"
android:screenOrientation="portrait" >
</activity>
<activity android:name="com.sina.weibo.sdk.web.WeiboSdkWebActivity"
android:configChanges="keyboardHidden|orientation"
android:exported="false"
android:windowSoftInputMode="adjustResize"
>
</activity>
<activity
android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
android:launchMode="singleTask"
android:name="com.sina.weibo.sdk.share.WbShareTransActivity">
<intent-filter>
<action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
<!--友盟-->
<meta-data
android:name="UMENG_APPKEY"
android:value="5c2e3a80b465f5cc5200025e" > //umeng 的 appkey
</meta-data>
</application>
在你的包目录下新建文件夹 wxapi 创建 WXEntryActivity.java 文件引入微信的回调
package com.你的包名.wxapi;
import com.umeng.socialize.weixin.view.WXCallbackActivity;
public class WXEntryActivity extends WXCallbackActivity {
}
将之前的 java 文件引入进来
修改 MainApplication
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DplusReactPackage() //add this
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
RNUMConfigure.init(this, "5c2e3a80b465f5cc5200025e", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,"");
//RNUMConfture.init接口一共五个参数,其中第一个参数为Context,第二个参数为友盟Appkey,第三个参数为channel,第四个参数为应用类型(手机或平板),第五个参数为push的secret(如果没有使用push,可以为空
}
// 各平台对应的key,微博的回调地址就是这里的这个地址,如果不一致,登录微博会报 21322(重定向地址不匹配) 的错误码
{
PlatformConfig.setWeixin("wx7bb4c0dc814dce84", "095b292da04dddf01a604d1abbd9278a");
PlatformConfig.setSinaWeibo("1372622714", "966b74b9f8c768a363b9c84253c55969", "http://sns.whalecloud.com");
PlatformConfig.setQQZone("1108090716", "HYazaX153N9FzXQL");
}
}
修改 MainActivity
public class MainActivity extends ReactActivity {
...
@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);
}
}
引入包: 只需将鼠标光标放在其中,使用 Alt+Enter 键即可自动引入进来
至此,Android Studio 配置完成
js 调用很简单(刚开始的时候也是一把辛酸泪( ⊙ o ⊙ )啊!)
import React, { Component } from 'react';
import {
NativeModules
} from 'react-native'
import {
Container,
Content,
Text,
ListItem,
Separator,
H3,
} from 'native-base'
const Share = NativeModules.UMShareModule //这个属性名是从 ShareModule.java 中设置的
const content = '我是内容';
const img = 'http://dev.umeng.com/images/tab2_1.png';
const imgUrl = 'http://www.umeng.com/';
const title = 'title';
/**
* 各平台所对应的数值在 ShareModule.java 中查看
* 0 qq
* 1 微博
* 2 微信
* 3 微信朋友圈
* 4 qq空间
*/
export default class App extends Component {
render() {
return (
<Container>
<Content padder>
<Separator>
<Text>-- QQ --</Text>
</Separator>
<ListItem noIndent
onPress={() => {
Share.auth(0, (code,data,msg) => {
console.log(code)
console.log(data) //返回的用户信息
console.log(msg)
})
}}
>
<Text>qq登录</Text>
</ListItem>
<ListItem noIndent
onPress={() => {
Share.share(content,img,imgUrl,title,0,(code,msg) =>{
console.log(code)
console.log(msg)
});
}}
>
<Text>qq分享</Text>
</ListItem>
<ListItem noIndent
onPress={() => {
Share.share(content,img,imgUrl,title,4,(code,msg) =>{
console.log(code)
console.log(msg)
});
}}
>
<Text>qq空间</Text>
</ListItem>
<Separator>
<Text>-- 微信 --</Text>
</Separator>
<ListItem noIndent
onPress={() => {
Share.auth(2, (code,data,msg) => {
console.log(code)
console.log(data)
console.log(msg)
})
}}
>
<Text>微信登录</Text>
</ListItem>
<ListItem noIndent
onPress={() => {
Share.share(content,img,imgUrl,title,2,(code,msg) =>{
console.log(code)
console.log(msg)
});
}}
>
<Text>微信分享</Text>
</ListItem>
<Separator>
<Text>-- 微博 --</Text>
</Separator>
<ListItem noIndent
onPress={() => {
Share.auth(1, (code,data,msg) => {
console.log(code)
console.log(data)
console.log(msg)
})
}}
>
<Text>微博登录</Text>
</ListItem>
<ListItem noIndent
onPress={() => {
Share.share(content,img,imgUrl,title,1,(code,msg) =>{
console.log(code)
console.log(msg)
});
}}
>
<Text>微博分享</Text>
</ListItem>
</Content>
</Container>
)
}
}
注: 微信登录功能需要付费才可以实现,其余均可以实现(qq是最简单的)
登录成功返回的信息
分享
遇到的问题:
1、签名一定要一致,如果申请时所设置的签名和运行手机上的签名不一致,微信调不起来,微博也会出错
2、微博登录问题 21322 :
授权回调页:http://sns.whalecloud.com
取消授权回调页:https://api.weibo.com/oauth2/default.html
以上便是 Android 的社会化分享配置方法,有兴趣的也可以研究推送与统计功能
附上本人 react native 极光推送
iOS 配置
在项目中文件夹中添加 UMComponent 与 UMReactBridge 两个文件夹
将之前下载的文件打开 ios 找到 UMCommon.framework 拷贝到 UMCommponent 文件夹下
将 ios 下的 share 文件夹下的所有内容拷贝到 UMCommponent 文件夹下的 UMShare(新建此文件夹) 文件夹下
在 ReactNative 文件夹下将所有 iOS 平台的文件拷贝到 UMReactBridge 下
将刚才创建的两个文件夹导入到项目中
一下配置可在官网查看: 配置
加入依赖系统库
添加第三方平台库:查看
根据官网的说明进行一一添加,精简版的基本都不用添加
配置白名单,找到 info.plist 文件右键 Open As => Source Code
白名单完整信息:白名单
QQ、微信、微博白名单:
<key>LSApplicationQueriesSchemes</key>
<array>
<!-- 微信 URL Scheme 白名单-->
<string>wechat</string>
<string>weixin</string>
<!-- 新浪微博 URL Scheme 白名单-->
<string>sinaweibohd</string>
<string>sinaweibo</string>
<string>sinaweibosso</string>
<string>weibosdk</string>
<string>weibosdk2.5</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>
配置URL Scheme
URL Scheme是通过系统找到并跳转对应app的一类设置,通过向项目中的info.plist文件中加入URL types
可使用第三方平台所注册的appkey信息向系统注册你的app,当跳转到第三方应用授权或分享后,可直接跳转回你的app
添加URL Types可工程设置面板设置
详细信息查看:URL_Scheme
初始化设置
AppDelegate.m
设置友盟 appkey 以及各个平台的 appkey 和 secret
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNUMConfigure.h"
#import <UMShare/UMShare.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
/* 打开调试日志 */
[UMConfigure setLogEnabled:YES];
/* 设置友盟appkey */
[RNUMConfigure initWithAppkey:@"5c2e3ae4b465f59dfd00009a" channel:@"App Store"];
/* 关闭强制验证https,可允许http图片分享,但需要在info.plist设置安全域名 */
[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;
/* 设置微信的appKey和appSecret */
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wx7bb4c0dc814dce84" appSecret:@"095b292da04dddf01a604d1abbd9278a" redirectURL:@"http://mobile.umeng.com/social"];
/* 设置分享到QQ互联的appID */
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1108090716"/*设置QQ平台的appID*/ appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];
/* 设置新浪的appKey和appSecret */
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"1372622714" appSecret:@"966b74b9f8c768a363b9c84253c55969" redirectURL:@"http://sns.whalecloud.com"]; //与微博的回调地址保持一致
return YES;
}
@end
补充
问题1:授权成功之后再次授权无法弹出授权界面
解决:打开 ShareModule.java 文件,找到 auth 方法,添加以下代码
UMShareConfig config = new UMShareConfig();
config.isNeedAuthOnGetUserInfo(true);
UMShareAPI.get(ma).setShareConfig(config);
问题2:iOS登录成功没有回调信息
解决:
在 AppDelegate.m 中添加
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
return YES;
}
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
if (!result) {
// 其他如支付等SDK的回调
}
return result;
}
//支持所有iOS系统
- (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];
if (!result) {
// 其他如支付等SDK的回调
}
return result;
}
在虚拟机中即可实现微博的登录与分享
登录成功返回的信息:
分享成功返回:
打开微博可以看到刚才的分享已成功