Newborn Programming Monsters
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-native-umshare

3.0.1 • Public • Published

集成友盟分享与第三方登录

分享功能:微信(支持小程序)、QQ、新浪微博 登录功能:微信、QQ

作者

QQ: 289459798 QQ群: 161263093 欢迎更多的喜欢开源的小伙伴加入

友盟SDK版本

Android:v6.9.1(精简版) IOS: v6.9.1

准备工作

  1. 到友盟平台申请账号 http://www.umeng.com/
  2. 微信开发平台申请 http://open.weixin.qq.com/
  3. QQ开放平台申请 http://open.qq.com/
  4. 新浪开放平台申请http://open.weibo.com/

安装

npm install react-native-umshare@2.0.0 --save
react-native link

Android

添加Activity

  1. QQ
<activity
        android:name="com.tencent.tauth.AuthActivity"
        android:launchMode="singleTask"
        android:noHistory="true" >
        <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="tencent+您QQ appid" />
        </intent-filter>
        </activity>
        <activity
        android:name="com.tencent.connect.common.AssistActivity"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:configChanges="orientation|keyboardHidden|screenSize"/>
  1. 微信
<activity
    android:name=".wxapi.WXEntryActivity"
    android:configChanges="keyboardHidden|orientation|screenSize"
    android:exported="true"
    android:screenOrientation="portrait"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" />

需要手动在包名下添加wxapi.WXEntryActivity文件,继承WXCallbackActivity

  1. 新浪
<activity
        android:name="com.umeng.socialize.media.WBShareCallBackActivity"
        android:configChanges="keyboardHidden|orientation"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:exported="false"
        android:screenOrientation="portrait" >
    </activity>
    <activity android:name="com.sina.weibo.sdk.web.WeiboSdkWebActivity"
              android:configChanges="keyboardHidden|orientation"
              android:exported="false"
              android:windowSoftInputMode="adjustResize"
    >
    </activity>
    <activity
        android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
        android:launchMode="singleTask"
        android:name="com.sina.weibo.sdk.share.WbShareTransActivity">
        <intent-filter>
            <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
    </activity>
  1. facebook
<activity
            android:name="com.umeng.facebook.FacebookActivity"/>
 
        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id" />
            
            //appid一定要存在string文件中,并以facebook_app_id名字进行保存。

android 需要编译出来的apk文件的签名和申请微信和QQ时填写的一致,开发过程中可以在build.gradle 文件加入以下代码

signingConfigs {
        debug {
            storeFile file('keystore 文件路径')
            storePassword "keydtore 密码"
            keyAlias "keydtore 别名"
            keyPassword "keydtore 别名密码"
        }
    }

IOS

  1. 在项目的的Build Settings 中搜索 header 找到 Framework Search Paths 添加 $(SRCROOT)/../node_modules/react-native-umshare/ios/RCTUMShareModule/RCTUMShareModule/UMSocial/SocialFrameworks

  2. Libraries -> RCTUMShareModule.xcodeproj -> RCTUMShareModule -> UMSocial -> SocialFrameworksUMSocialUI 文件夹拖到您的主工程下,不需要勾选 Copy items if needed

  3. 添加依赖库

    • ibsqlite3.tbd
    • CoreGraphics.framework
    • SystemConfiguration.framework
    • libc++.tbd
    • libz.tbd
    • ImageIO.framework
  4. 配置SSO白名单

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名单-->
    <string>wechat</string>
    <string>weixin</string>

    <!-- 新浪微博 URL Scheme 白名单-->
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>sinaweibosso</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</string>

    <!-- 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>mqqopensdkapiV4</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>mqqbrowser</string>
    <string>mttbrowser</string>

</array>
  1. URL Scheme

    • 微信
      微信appKey -> wxdc1e388c3822c80b
    • QQ 需要添加两项URL Scheme: 1、"tencent"+腾讯QQ互联应用appID
      2、“QQ”+腾讯QQ互联应用appID转换成十六进制(不足8位前面补0) 如appID:100424468 1、tencent100424468
      2、QQ05fc5b14| QQ05fc5b14为100424468转十六进制而来,因不足8位向前补0,然后加"QQ"前缀
    • 新浪微博 “wb”+新浪appKey -> wb3921700954
  2. 修改 AppDelegate.m

    #import <UMShare/UMShare.h>
     
    ...
     
    //#define __IPHONE_10_0    100000
    #if __IPHONE_OS_VERSION_MAX_ALLOWED > 100000
    - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
    {
      //6.3的新的API调用,是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响。
      BOOL result = [[UMSocialManager defaultManager]  handleOpenURL:url options:options];
      if (!result) {
        // 其他如支付等SDK的回调
        // result = other;
      }
      return result;
    }
     
    #endif
     
    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
    {
      //6.3的新的API调用,是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响
      BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];
      if (!result) {
        // 其他如支付等SDK的回调
        // result = other;
      }
      return result;
    }
     
    - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
    {
      BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
      if (!result) {
        // 其他如支付等SDK的回调
        // result = other;
      }
      return result;
    }

使用方式

先初始化参数

import UMShare from 'react-native-umshare';
...
 
// 第二个参数决定在分享界面的排序1_、2_、3_为前缀
UMShare.initShare("友盟appkey", 
    {
        "1_weixin": {
            appKey: "",
            appSecret: "", // 分享微信小程序必填
            redirectURL: "",
        },
        "2_qq": {
            appKey: "",
            appSecret: "",
            redirectURL: "",
        },
        "3_sina": {
            appKey: "",
            appSecret: "",
            redirectURL: "",
        },
    },
    false);

调用分享

import UMShare from 'react-native-umshare';
...
UMShare.share("标题", "简介", "缩略图地址", "链接地址")
.then(() => {
    // 成功
}, (error) => {
    // 失败
})

调用登录

UMShare.loginQQ()
    .then((data) => {
        console.log(data);
    }, (error) => {
        console.log(error)
    })
 
UMShare.loginWX()
    .then((data) => {
        console.log(data);
    }, (error) => {
        console.log(error)
    })

API

 
/**
 * 初始化分享参数
 * @param appkey
 * @param sharePlatforms
 * @param debug
 */
initShare(appkey: string, sharePlatforms: Object, debug: boolean);
 
/**
 * 友盟默认UI分享
 * @param title
 * @param desc
 * @param thumb
 * @param link
 */
share(title, desc, thumb, link);
 
/**
 * 友盟默认UI分享小程序
 * @param name   微信小程序的id,gc_xxxxx
 * @param title
 * @param desc
 * @param path 小程序页面路径 /page/xxx
 * @param thumb
 * @param link  当微信不支持小程序时跳转的h5页面地址
 * @oaram mode 小程序的模式(开发、体验、正式)仅对ios游泳
 */
share(name, title, desc, path, thumb, link, mode);
 
/**
 * 自定义UI, 微信分享
 * @param title
 * @param desc
 * @param thumb
 * @param link
 */
shareWX(title, desc, thumb, link);
 
/**
 * 自定义UI, 微信朋友圈分享
 * @param title
 * @param desc
 * @param thumb
 * @param link
 */
shareWXTimeLine(title, desc, thumb, link);
 
/**
 * 自定义UI, QQ分享
 * @param title
 * @param desc
 * @param thumb
 * @param link
 */
shareQQ(title, desc, thumb, link);
 
/**
 * 自定义UI, QQ空间分享
 * @param title
 * @param desc
 * @param thumb
 * @param link
 */
shareQzone(title, desc, thumb, link);
 
/**
 * 自定义UI, 新浪分享
 * @param title
 * @param desc
 * @param thumb
 * @param link
 */
shareSina(title, desc, thumb, link);
 
/**
 * 微信登录
 * @returns {Promise} 
 */
loginWX();
 
/**
 * QQ登录
 * @returns {Promise} 
 */
loginQQ();

Install

npm i react-native-umshare

DownloadsWeekly Downloads

6

Version

3.0.1

License

ISC

Unpacked Size

12 MB

Total Files

1078

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar