网上查了很多资料都没有完整的rn的QQ登录,分享的资料,抽了个时间整理了一下功能。
用的是react-native-qq,作者好像不维护这个库了,所以这里有一些用法不完整,听我慢慢道来。
安装库过程就不说了,按照文档做就行。
登录
登录分iOS和Android端,iOS端就算手机没有安装QQ,也是可以网页登录的,所以不受影响。Android端必须手机安装QQ客户端,不然没有反应。
iOS
import * as QQAPI from 'react-native-qq';
QQAPI.login().then((responseCode)=>{
}).catch((err)=>{
Alert.alert(
'提示',
'QQ登录失败'
)
})
QQAPI.login(params)参数params为登录所申请的权限,可不传,默认为get_simple_userinfo。 需要多个权限时,以逗号分隔。返回的数据格式:
{
"access_token": "CAF0085A2AB8FDE7903C97F4792ECBC3",
"openid": "0E00BA738F6BB55731A5BBC59746E88D"
"expires_in": "1458208143094.6"
"oauth_consumer_key": "12345"
}
Android
安卓库里面暴露的isQQInstalled好像没用,所以我添加了额外的方法,在react-native-qq/index.js里添加方法:
export function isQQInstalledAction() {
return QQAPI.isQQInstalled().then((res)=>{
() => waitForResponse("QQAuthorizeResponse")
})
}
然后在js文件里:
QQAPI.isQQInstalledAction().then((res)=>{
QQAPI.login().then((responseCode)=>{
}).catch((err)=>{
Alert.alert(
'提示',
'QQ登录失败'
)
})
}).catch((err)=>{
Alert.alert(
'提示',
'没有安装QQ软件,请您安装QQ之后再试'
)
})
}
分享
QQ分享分图文消息链接,纯图片,音乐,应用和携带轻应用消息这几种,这里只讲前两个图文消息和纯图片分享
1.图文消息
好友分享:
let qqshareInfo={
type: 'news',
imageUrl: '图片资源',
title: ‘标题,
description: ’描述,
webpageUrl: '跳转链接'
}
QQAPI.shareToQQ(qqshareInfo).then((res)=>{
}).catch((err)=>{
console.log('分享失败')
})
空间分享只要把shareToQQ替换成shareToQzone
1.纯图片消息
这个库在安卓上这个功能有一点问题,需要改动
在react-native-qq/android/src/main/java/cn/reactnative/modules/qq/QQModule.java里修改_shareToQQ方法:
private void _shareToQQ(ReadableMap data, int scene) {
this.isLogin = false;
Bundle bundle = new Bundle();
if (data.hasKey(RCTQQShareTitle)){
bundle.putString(QQShare.SHARE_TO_QQ_TITLE, data.getString(RCTQQShareTitle));
}
if (data.hasKey(RCTQQShareDescription)){
bundle.putString(QQShare.SHARE_TO_QQ_SUMMARY, data.getString(RCTQQShareDescription));
}
if (data.hasKey(RCTQQShareWebpageUrl)){
bundle.putString(QQShare.SHARE_TO_QQ_TARGET_URL, data.getString(RCTQQShareWebpageUrl));
}
if (data.hasKey("appName")){
bundle.putString(QQShare.SHARE_TO_QQ_APP_NAME, data.getString("appName"));
}
String type = RCTQQShareTypeNews;
if (data.hasKey(RCTQQShareType)) {
type = data.getString(RCTQQShareType);
}
if (type.equals(RCTQQShareTypeImage)){
}else {
if (data.hasKey(RCTQQShareImageUrl)){
bundle.putString(QQShare.SHARE_TO_QQ_IMAGE_URL, data.getString(RCTQQShareImageUrl));
}
}
if (type.equals(RCTQQShareTypeNews)){
bundle.putInt(QQShare.SHARE_TO_QQ_KEY_TYPE, QQShare.SHARE_TO_QQ_TYPE_DEFAULT);
} else if (type.equals(RCTQQShareTypeImage)){
bundle.putInt(QQShare.SHARE_TO_QQ_KEY_TYPE, QQShare.SHARE_TO_QQ_TYPE_IMAGE);
bundle.putString(QQShare.SHARE_TO_QQ_IMAGE_LOCAL_URL, data.getString(RCTQQShareImageUrl));
} else if (type.equals(RCTQQShareTypeAudio)) {
bundle.putInt(QQShare.SHARE_TO_QQ_KEY_TYPE, QQShare.SHARE_TO_QQ_TYPE_AUDIO);
if (data.hasKey("flashUrl")){
bundle.putString(QQShare.SHARE_TO_QQ_AUDIO_URL, data.getString("flashUrl"));
}
} else if (type.equals("app")){
bundle.putInt(QQShare.SHARE_TO_QQ_KEY_TYPE, QQShare.SHARE_TO_QQ_TYPE_APP);
}
Log.e("QQShare", bundle.toString());
if (scene == 0 ) {
// Share to QQ.
bundle.putInt(QQShare.SHARE_TO_QQ_EXT_INT, QQShare.SHARE_TO_QQ_FLAG_QZONE_ITEM_HIDE);
api.shareToQQ(getCurrentActivity(), bundle, this);
}
else if (scene == 1) {
// Share to Qzone.
bundle.putInt(QQShare.SHARE_TO_QQ_EXT_INT, QQShare.SHARE_TO_QQ_FLAG_QZONE_AUTO_OPEN);
api.shareToQQ(getCurrentActivity(), bundle, this);
}
}
不要改错了,把之前的
if (data.hasKey(RCTQQShareImageUrl)){
bundle.putString(QQShare.SHARE_TO_QQ_IMAGE_URL,data.getString(RCTQQShareImageUrl));
改成
if (type.equals(RCTQQShareTypeImage)){
}else {
if (data.hasKey(RCTQQShareImageUrl)){
bundle.putString(QQShare.SHARE_TO_QQ_IMAGE_URL,data.getString(RCTQQShareImageUrl));
}
}
这是因为发送纯图片的时候,不要设置SHARE_TO_QQ_IMAGE_URL,不然会导致分享出去的图片很模糊。
然后在js端:
_checkPermission(){
if (Platform.OS !== 'android') {
return Promise.resolve(true);
}
const rationale = {
'title': '相册权限',
'message': '逗戏需要您的相册权限来保存图片'
};
return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, rationale)
.then((result) => {
return (result === true || result === PermissionsAndroid.RESULTS.GRANTED);
});
}
shareImage(){
this._checkPermission().then((hasPermission) => {
let qqshareInfo={
type: 'image',
title: '你的app名字',
imageUrl: uri,
}
QQAPI.shareToQQ(qqshareInfo).then((res)=>{
}).catch((err)=>{
console.log('分享失败')
})
});
}
空间分享一样,吧shareToQQ改成shareToQzone。
高能:这里一定要注意,安卓端的uri必须是本地文件地址,而且如果是带前缀file://的,需要把file://去掉,并且这个目录不能是在cache临时目录里。这个坑了老夫很久。iOS的uri传个远程图片链接地址就行,比较简单。然后上面的_checkPermission判断是为了有些安卓机器存储图片的时候没有这个权限判断会没有反应。你可以不要这块,我推荐你加上[邪笑]。其他的功能,如果你需要用到的话,就要自己去封装原生然后给js端调用了。用法类似,这里就不说了。
高能:最近重新做了下qq图片分享,发现用fleprovider可以将在cache临时目录里图片分享到qq里,并且不需要申请存储权限。
先在minifest里添加fileprovider:
<provider
android:authorities="com.tencent.nba2kol.fileprovider"
android:name="{applicationid}.fileprovider"
android:exported="false"
android:grantUriPermissions="true"
>
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths"/>
</provider>
然后在res/xml里添加file_paths文件
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-files-path name="opensdk_external" path="."/>
<external-path name="opensdk_external_path" path="."/>
<cache-path name="opensdk_cache" path="."/>
<external-cache-path name="opensdk_cache_external" path="."/>
<root-path name="opensdk_root" path=""/>
</paths>
腾讯官方API地址
大功告成,有帮助到的小伙伴,可以给个star哦!