native react 集成微信登录_react native qq登录/微信登录实现(android端)

微信登录实现(react-native-wechat)

开源库地址

1.首先需要去微信开发平台去注册账号并且创建一个移动应用 链接 https://open.weixin.qq.com

签名获取推荐使用签名工具获取

2.Android版本安装配置方法,类似qq

2.1.在android/settings.gradle文件中添加如下代码:

include ':RCTWeChat'project(':RCTWeChat').projectDir = newFile(rootProject.projectDir, '../node_modules/react-native-wechat/android')

2.2 .在android/app/build.gradle文件中的dependencies中添加模块依赖

dependencies {

compile project(':react-native-wechat')

}

2.3在android/app/src/main/java/com/bat100Appwap/MainActivity.java文件,添加如下代码

newWeChatPackage() ,

导入引用：android/app/src/main/java/com/bat100Appwap

importcom.theweflex.react.WeChatPackage;

2.4在android包名下创建wxapi包名，在该包名底下创建WXEntryActivity.java类

import android.app.Activity;

import android.os.Bundle;

import com.theweflex.react.WeChatModule;

public class WXEntryActivity extends Activity {

@Override

protectedvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

WeChatModule.handleIntent(getIntent());

finish();

}

}

在android/app/src/main/AndroidManifest.xml注册

android:name=".wxapi.WXEntryActivity"android:exported="true"android:label="@string/app_name" />

2.5在android/app/proguard-rules.pro添加混淆

-keep classcom.tencent.mm.sdk.**{*;

}

3.代码实现：

/**

* 微信登录注册*/componentDidMount() {try{

WeChat.registerApp('你自己的wxid');

}catch(e) {

console.error(e);

}

}

/**

* 微信登录 之授权*/weixinLogin() {

let scope='snsapi_userinfo';

let state='wechat_sdk_abcs';//判断微信是否安装

WeChat.isWXAppInstalled()

.then((isInstalled)=>{if(isInstalled) {//获取微信授权

WeChat.sendAuthRequest(scope, state)

.then(responseCode=>{//授权成功获取token

this.getAccessToken(responseCode);

})

.catch(error =>{

alert('登录授权发生错误：', error.message, [

{text:'确定'}

]);

})

}else{

alert('没有安装微信', '请先安装微信客户端在进行登录', [

{text:'确定'}

])

}

})

}

/**

* 微信登录 获取 token

* @param responseCode*/getAccessToken(responseCode) {

let appId='你申请的appid';

let secret='你申请的secret';switch(parseInt(responseCode.errCode)) {//用户换取access_token的code，仅在ErrCode为0时有效

case 0://获取token值

getRequest('https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appId +'&secret=' + secret +'&code=' + responseCode.code +'&grant_type=authorization_code')

.then(res=>{//授权成功，获取用户头像等信息

this.getUserInfoFormWx(res);

})

.catch(err =>{

})break;case -4://用户拒绝

break;case -2://用户取消

break;

}

}

/*** 微信登录 获取用户信息*/getUserInfoFormWx(res)

{

getRequest('https://api.weixin.qq.com/sns/userinfo?access_token=' +res.access_token+'&openid=' + res.openid).then(res =>{

ToastAndroid.show('用户信息' +JSON.stringify(res),

ToastAndroid.SHORT)

}

).catch(err =>{})

}