使用第三方庫react-native-qq,連接java
https://github.com/reactnativecn/react-native-qqnode
qq騰訊開放平臺獲取獲取用戶信息文檔連接react
http://wiki.open.qq.com/wiki/mobile/get_simple_userinfoandroid
yarn add react-native-qq 或 npm install react-native-qq --savegit
而後link執行 react-native link react-native-qqgithub
在android/app/build.gradle裏,defaultConfig欄目下添加以下代碼如圖:npm
manifestPlaceholders = [ QQ_APPID: "平臺申請的APPID" ]
3.1在android/settings.gradle下:react-native
include ':react-native-qq'
project(':react-native-qq').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-qq/android')
3.2在android/app/build.gradle下api
dependencies { compile project(':react-native-qq') }
3.3 MainApplication getPackages裏面添加微信
new QQPackage(),
導入庫:
import cn.reactnative.modules.qq.QQPackage;
qqLogin() { let scopes ='get_user_info'; QQAPI.isQQInstalled() .then(install => { if (install) { QQAPI.login(scopes) .then((data) => { if(data.errCode===0){ getRequest('https://graph.qq.com/user/get_simple_userinfo?access_token=' + data.access_token +'&openid=' + data.openid+'&oauth_consumer_key='+data.oauth_consumer_key) .then(res => { alert('用戶信息' + JSON.stringify(res)) }).catch(err => { }) } }).catch((err) => { alert('受權失敗 失敗信息爲' +JSON.stringify(err)) }) } }) .catch(unInstall => { alert('沒有安裝QQ' + unInstall) }) }
開源庫地址
https://github.com/weflex/react-native-wechat
簽名獲取推薦使用簽名工具獲取
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 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WeChatModule.handleIntent(getIntent()); finish(); } }
在android/app/src/main/AndroidManifest.xml註冊
<activity android:name=".wxapi.WXEntryActivity" android:exported="true" android:label="@string/app_name" />
2.5在android/app/proguard-rules.pro添加混淆
-keep classcom.tencent.mm.sdk.** { *; }
/** * 微信登陸註冊 */ 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 => {}) }