react-native实现QQ的登录和分享(图文消息分享和纯图片分享)

网上查了很多资料都没有完整的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哦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,825评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,704评论 2 59
  • 此源码分析JDK版本为1.7,只是简单分析,算是个人看源码的一点小总结,随意性比较强,专业的还需百度。 priva...
    Gallrax阅读 179评论 0 0
  • 纯手工打造每一篇开源资讯与技术干货,数十万程序员和Linuxer已经关注。 Amazon Go 彻底抛弃了传统超市...
    尘世不扰阅读 144评论 0 0
  • 早就对张爱玲的文字大为叹服,像那“朱砂痣、白玫瑰”与“蚊子血、白米饭”的无奈垂怜,“爱一个人,卑微到尘埃里然后开出...
    John小姐阅读 514评论 3 4