native react 集成微信登录_react-native集成友盟分享和微信登录Android版

参考文档

http://www.devio.org/2017/09/10/React-Native-integration-share-third-party-login-function/

第三方账号申请：http://dev.umeng.com/social/android/operation

一、集成准备

首先我们需要到umeng官网申请一个开发者账号。然后创建一个应用并获取appkey。 在之后呢，我们需要进行必不可少的一步就是，到各大平台申请第三方开发者账号，关于申请的流程官网文档讲解的已经很详细了，在这里我不再重复了。各大平台申请服务所需要等待的时间不等，通常是1-3天就可以搞定，建议在申请的同时，就进行sdk的集成，等申请通过之后，在换成正式的账号进行调试，这样一来开发申请两不误。

二、集成SDK

获取到appkey之后呢，我们接下来就来集成集成SDK。

友盟分享目前还不支持AndroidStudio的Gradle配置，所以我们需要将分享sdk下来然后倒入到项目中。前往，SDK下载中心，根据提示下载SDK即可，建议下载最新的。

将下载的压缩文件解压，或会看到如下目录：

其中，umeng_integrate_tool.jar为，sdk辅助集成功能，mac中可以直接双击该文件将打开如下界面：

然后根据需要勾选相应的平台，单击ok即可生成umeng_integratetool_result文件夹，然后将该文件夹中的文件导入到项目中即可，关于详细的集成说明可以参考快速集成。

windows中的打开方式：http://jingyan.baidu.com/article/200957617c3619cb0621b44d.html

这时已经设置了使用javaw.exe应用程序来打开jar文件，可是实际上这时双击jar文件还是没有反应，这是因为没有设置打开文件参数导致的。

在Windows开始菜单的搜索框中输入“regedit”，在上方搜索出的文件regedit上点击鼠标右键，在弹出的菜单中选择“以管理员身份运行”。

在注册表编辑器中，找到“HKEY_CLASSES_ROOT\Applications\javaw.exe\shell\open\command”，在其中文件打开命令中加入参数“-jar”(无引号)，修改后的数值类似：“"C:\Program Files\Java\jre7\bin\javaw.exe" -jar "%1"”(只需要添加-jar参数，无需修改其他信息)，保存并退出注册表编辑器。

三、创建原生模块

为了能够在React Native中使用umeng分享及登录，我们需要为刚才导出的sdk创建一个Native 模块然后通过桥接的方式供js部分进行调用

我们通过AndroidStudio新创建了一个名为u_share的module，然后将umeng_integratetool_result文件夹中的内容复制到了u_share的对应位置。

四、把生成的文件夹放到u_share中

添加libs中的依赖模块

五、写代码

在u_share模块中我们创建了一个UShare.java类，该类主要负责umeng分享sdk之间的通信。

然后我们创建了UShareModule.java来暴露分享方法

为了向React Native注册我们刚才创建的原生模块，我们需要实现ReactPackage，ReactPackage主要为注册原生模块所存在，只有已经向React Native注册的模块才能在js模块使用。

在AndroidManifest.xml文件中添加权限代码

六、使用

1、在app模块添加u_share模块的依赖

compile 'com.facebook.react:react-native:+'

//友盟统计

compile project(':u_share')

2、在MainActivity.java中初始化UShare

@Overrideprotected voidonCreate(Bundle savedInstanceState) {

SplashScreen.show(this,true);super.onCreate(savedInstanceState);UShare.init(this);}

@Overridepublic voidonActivityResult(intrequestCode, intresultCode,Intent data) {

super.onActivityResult(requestCode,resultCode,data);UShare.onActivityResult(requestCode,resultCode,data);}

@Overridepublic voidonRequestPermissionsResult(intrequestCode,String[] permissions, int[] grantResults) {

super.onRequestPermissionsResult(requestCode,permissions,grantResults);UShare.onRequestPermissionsResult(requestCode,permissions,grantResults);}

3、在MainApplication.java中注册UShareReactPackage以及进行Umeng的一些配置

public classMainApplication extendsApplication implementsReactApplication {

{

PlatformConfig.setWeixin(Constants.KEY_WEIXIN,Constants.SECRET_WEIXIN);PlatformConfig.setSinaWeibo(Constants.KEY_WEIBO,Constants.SECRET_WEIBO,"http://sns.whalecloud.com");PlatformConfig.setQQZone(Constants.KEY_QQ,Constants.SECRET_QQ);}

private finalReactNativeHost mReactNativeHost= newReactNativeHost(this) {

@Overridepublic booleangetUseDeveloperSupport() {

returnBuildConfig.DEBUG;}

@OverrideprotectedList getPackages() {

returnArrays.asList(

newMainReactPackage(),newSplashScreenReactPackage(),newRealmReactPackage(),newUShareReactPackage()

);}

};@OverridepublicReactNativeHost getReactNativeHost() {

returnmReactNativeHost;}

@Overridepublic voidonCreate() {

super.onCreate();SoLoader.init(this,/* native exopackage */false);UMShareAPI.get(this);}

}

4、创建一个UShare.js文件，然后添加如下代码import{ NativeModules} from'react-native';module.exports= NativeModules.UShare;

5、在其它代码中使用这个模块

import UShare from '../common/UShare'; //导入UShare.js

//...省略部分代码

UShare.share(shareApp.title, shareApp.content, shareApp.imgUrl,shareApp.url,()=>{},()=>{})

微信登录

package com.olive.u_login;

import android.app.Activity;

import android.content.Intent;

import com.facebook.react.bridge.Callback;

import com.umeng.socialize.UMAuthListener;

import com.umeng.socialize.UMShareAPI;

import com.umeng.socialize.bean.SHARE_MEDIA;

import java.lang.ref.WeakReference;

import java.util.Map;

/**

* Created by tangyunfei on 2017/11/22.

*/

public class ULogin {

private static WeakReference mActivity;

public static void init(Activity activity) {

if (activity == null) return;

mActivity = new WeakReference<>(activity);

}

public static void login(final Callback errorCallback, final Callback successCallback) {

if (mActivity == null) return;

mActivity.get().runOnUiThread(new Runnable() {

@Override

public void run() {

openLogin(errorCallback,successCallback);

}

});

}

private static void openLogin(final Callback errorCallback, final Callback successCallback) {

UMShareAPI.get(mActivity.get()).getPlatformInfo(mActivity.get(), SHARE_MEDIA.WEIXIN, new UMAuthListener() {

@Override

public void onStart(SHARE_MEDIA share_media) {}

@Override

public void onComplete(SHARE_MEDIA share_media, int i, Map map) {

if (successCallback != null) successCallback.invoke("登录成功啦");

}

@Override

public void onError(SHARE_MEDIA share_media, int i, Throwable throwable) {

if (errorCallback != null) errorCallback.invoke("登录失败：" + throwable.getMessage());

}

@Override

public void onCancel(SHARE_MEDIA share_media, int i) {

if (errorCallback != null) errorCallback.invoke("取消了");

}

});

}

public static void onActivityResult(int requestCode, int resultCode, Intent data) {

if (mActivity == null) return;

UMShareAPI.get(mActivity.get()).onActivityResult(requestCode, resultCode, data);

}

}

特别注意：微信回调不成功的问题

大多数人友盟的微信登陆回调没有用户信息返回的原因：就是没有执行到onComplete

ushare的包名必须和在微信开放平台填写的保持一致！！！

android:name="com.oliveglobal.app.wxapi.WXEntryActivity"

android:configChanges="keyboardHidden|orientation|screenSize"

android:exported="true"

android:screenOrientation="portrait"

android:theme="@android:style/Theme.Translucent.NoTitleBar"/>

error:错误码：2002 错误信息：授权失败----权限验证失败，请检查你的签名以及该平台Appkey权限

微信如果提示这个错误，请查看debug日志：箭头所指的为你当前应用的签名及包名，然后打开你的微信后台与箭头处所指的地方进行对照，包名和签名如果不一样，改成一样即可。注意所谓的一样是指，大小写都要一样，不能有冒号出现在调试微信的时候请注意你的签名，每次运行方式不同，签名文件不同都会导致签名不同具体可以参考文档：注意微信有时会在微信客户端缓存签名数据，因此修改微信开放平台应用签名后，注意清除微信客户端数据后再进行测试【退出重新登录微信】