npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-qq-lib

v3.0.9

Published

QQ Login and Share support in React Native.

Downloads

19

Readme

react-native-qq-lib

npm version

React Native bridging library that integrates QQ SDKs. QQ 登陆 分享,集成 QQ SDK react-native 版本需要 0.40.0 及以上

前言

首先向各位声明,本库是在 react-native-qq 基础上进行重写。

本身是维护给自己使用的,考虑到自身使用和其它开发者的需要,最终决定开一个新仓库,提供给新项目使用。

最后,感谢 lvbingrutdzl2003 和各位开发者为 react-native-qq 做出的贡献。

集成 QQ SDK 包版本

Android SDK 版本:v3.5.4.11(2021-04-27)

IOS SDK 版本:v3.3.9(2020-04-27)

如何安装

首先安装 npm 包

yarn add github:haxibiao/react-native-qq-lib

npm install -D github:haxibiao/react-native-qq-lib

然后执行

cd ios && pod install && cd ..

安装 iOS 工程

在工程 plist 文件中加入 qq 白名单:(ios9 以上必须) 请以文本方式打开 Info.plist,在其中添加

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- QQ、Qzone URL Scheme 白名单-->
    <string>mqqapi</string>
    <string>mqq</string>
    <string>mqqOpensdkSSoLogin</string>
    <string>mqqconnect</string>
    <string>mqqopensdkdataline</string>
    <string>mqqopensdkgrouptribeshare</string>
    <string>mqqopensdkfriend</string>
    <string>mqqopensdkapi</string>
    <string>mqqopensdkapiV2</string>
    <string>mqqopensdkapiV3</string>
    <string>mqzoneopensdk</string>
    <string>wtloginmqq</string>
    <string>wtloginmqq2</string>
    <string>mqqwpa</string>
    <string>mqzone</string>
    <string>mqzonev2</string>
    <string>mqzoneshare</string>
    <string>wtloginqzone</string>
    <string>mqzonewx</string>
    <string>mqzoneopensdkapiV2</string>
    <string>mqzoneopensdkapi19</string>
    <string>mqzoneopensdkapi</string>
    <string>mqzoneopensdk</string>
 </array>

Info->URL Types 中增加 QQ 的 scheme: Identifier 设置为qq, URL Schemes 设置为你注册的 QQ 开发者账号中的 APPID,需要加前缀tencent,例如tencent1104903684

在你工程的AppDelegate.m文件中添加如下代码:

#import <TencentOpenAPI/TencentOAuth.h>
#import <TencentOpenAPI/QQApiInterface.h>
#import <TencentOpenAPI/QQApiInterfaceObject.h>


- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
  if ([TencentOAuth CanHandleOpenURL:url]) {
    return [TencentOAuth HandleOpenURL:url];
  }
  return  YES;
}

- (BOOL)application:(UIApplication *)application
  continueUserActivity:(NSUserActivity *)userActivity
  restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable
  restorableObjects))restorationHandler {
  // 触发回调方法
  [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
  NSURL *url = userActivity.webpageURL;
  if (url && [TencentOAuth CanHandleUniversalLink:url]) {
    return [TencentOAuth HandleUniversalLink:url];
  }
  return YES;
}

安装 Android 工程

android/app/build.gradle里,defaultConfig 栏目下添加如下代码:

manifestPlaceholders = [
    QQ_APPID: "<平台申请的APPID>"
]

以后如果需要修改 APPID,只需要修改此一处。

如何使用

引入包

import * as QQAPI from 'react-native-qq-lib';

API

QQAPI.login([scopes])

  • scopes: 登录所申请的权限,默认为 get_simple_userinfo。 需要多个权限时,以逗号分隔。

调用 QQ 登录,可能会跳转到 QQ 应用或者打开一个网页浏览器以供用户登录。在本次 login 返回前,所有接下来的 login 调用都会直接失败。

返回一个Promise对象。成功时的回调为一个类似这样的对象:

{
	"access_token": "CAF0085A2AB8FDE7903C97F4792ECBC3",
	"openid": "0E00BA738F6BB55731A5BBC59746E88D"
	"expires_in": "1458208143094.6"
	"oauth_consumer_key": "12345"
}

QQAPI.shareToQQ(data)

分享到 QQ 好友,参数同 QQAPI.shareToQzone,返回一个Promise对象

QQAPI.shareToQzone(data)

分享到 QZone,参数为一个 object,可以有如下的形式:

// 分享图文消息
{
	type: 'news',
	title: 分享标题,
	description: 描述,
	webpageUrl: 网页地址,
	imageUrl: 远程图片地址,
}

// 分享文本消息
{
	type: 'text',
	text: 分享内容,
}

// 分享图片
// By:这里的 imageUrl 和 imageLocalUrl 都要传而且保持一致(别问我为啥埋这个坑,问就是腾讯的 SDK 这样搞的)
// 支持的路径如:  file://      content://     /data/user/0/com.xxxxx/cache/
{
    type: 'image',
    imageUrl: 图片路径,
    imageLocalUrl: 图片路径,
}


// 其余格式尚未实现。

图片路径不支持 http 和 https 网络地址(网络地址的先自己下载图片,这里推荐rn-fetch-blob库)。

import RNFetchBlob from 'rn-fetch-blob';


const _image = 图片地址或路径;

if (RegExp(/http:\/\//).exec(_image) || RegExp(/https:\/\//).exec(_image)) {
  // 判断是网络地址的话先下载图片,然后再分享图片

  RNFetchBlob.config({
    fileCache: true,
    appendExt: "png",
  })
    .fetch("GET", _image)
    .then((res) => {
      const qq = QQAPI.shareToQzone({
        type: "image",
        imageUrl: res.path(),
        imageLocalUrl: res.path(),
      });
      qq.then(() => {
        __onSucceed();
      }).catch(() => {
      });
    })
    .catch((error) => {
    });
} else {
  const qq = QQAPI.shareToQzone({
    type: "image",
    imageUrl: _image,
    imageLocalUrl: _image,
  });
  qq.then(() => {
  }).catch(() => {
  });
}

常见问题

Android: 调用 QQAPI.login()没有反应

通常出现这个原因是因为 Manifest 没有配置好,检查 Manifest 中有关 Activity 的配置。

Android: 已经成功激活 QQ 登录,但回调没有被执行

通常出现这个原因是因为 MainActivity.java 中缺少 onActivityResult 的调用。