react-native-sns-share

v1.3.5

Published

3 years ago

RN微信、微博、QQ及支付宝分享、授权登陆、支付插件。暂时支持情况

Downloads

0High
0Medium
0Low

evanxiao

react-native weixin weibo qq share alipay oauth

react-native-sns-share

RN微信、微博、QQ及支付宝分享、授权登陆、支付插件。暂时支持情况

| | 分享 | 授权登陆 | 支付 | | ----------- | ----------- | ----------- | ----------- | |微信 | ✔ | ✔ | ✔ | |QQ | ✔ | ✔ | × | |微博 | ✔ | ✔ | × | |支付宝 | × | ✔ | ✔ |

PS：未支持部分，会在后续迭代中完成。

一. 起步

执行: $ npm install --save react-native-npm-share --save
执行: $ react-native link react-native-sns-share
对于您计划使用的每个平台（ios/android），请遵循相应平台的一个选项

iOS

进入ios目录
执行: $ pod update

微信设置

在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“URL type“添加“URL scheme”为你所注册的应用程序id（如下图所示）。
在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“LSApplicationQueriesSchemes“添加weixin、wechat、weixinulapi（如下图所示）。

xcode设置

微博设置

在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“URL type“添加“URL scheme”为你所注册的应用程序id
在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“LSApplicationQueriesSchemes“添加weibosdk、weibosdk2.5

支付宝设置

在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“LSApplicationQueriesSchemes“添加alipay、alipayauth

QQ设置

在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“URL type“添加“URL scheme”为你所注册的应用程序id
在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“LSApplicationQueriesSchemes“mqq、mqqapi、mqqopensdkapiV3、mqqopensdkapiV2 PS 参考Demo

统一设置

1.Appdelegate 中添加处理回调

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [self application:application openURL:url];
}
// 微博web版本回掉时，会走此方法
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(nullable NSString *)sourceApplication annotation:(id)annotation {
return [self application:application openURL:url];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url {
BOOL handled = NO;

handled = [EVNWeiboManager.defaultManager application:application openURL:url];

if (handled) {
 return YES;
}

handled = [EVNAliManager.defaultManager application:application openURL:url];

if (handled) {
 return YES;
}

handled = [EVNWXManager.defaultManager application:application openURL:url];

if (handled) {
 return YES;
}

handled = [EVNQQManager.defaultManager application:application openURL:url];

if (handled) {
 return YES;
}

return handled;
}

- (void)applicationWillEnterForeground:(UIApplication *)application
{
[[EVNWeiboManager defaultManager] applicationWillEnterForeground:application];
[[EVNWXManager defaultManager] applicationWillEnterForeground:application];
[[EVNAliManager defaultManager] applicationWillEnterForeground:application];
[[EVNQQManager defaultManager] applicationWillEnterForeground:application];
}

Android

确认MainApplication，getPackages中是否已经加入RNSnsSharePackage。若没有加入,getPackages中加入 packages.add(new RNSnsSharePackage());

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new RNSnsSharePackage());
    return packages;
  }

微信设置

1.Android工程代码下创建包名+wxapi/WXEntryActivity.java / WXPayEntryActivity.java继承com.evan.sns.share.wxapi.WXEntryActivity

package com.snssharedemo.wxapi;

public class WXEntryActivity extends  com.evan.sns.share.wxapi.WXEntryActivity {

}

package com.snssharedemo.wxapi;

import com.evan.sns.share.wxapi.WXEntryActivity;

public class WXPayEntryActivity extends WXEntryActivity {

}

2.AndroidManifest.xml中设置

       <!--微信支付开始-->
       <activity
           android:name="com.snssharedemo.wxapi.WXPayEntryActivity"
           android:exported="true"
           android:launchMode="singleTop"
           android:theme="@android:style/Theme.NoDisplay" />
       <!--微信支付结束-->
       <!--微信分享开始-->
       <activity
           android:name="com.snssharedemo.wxapi.WXEntryActivity"
           android:exported="true"
           android:launchMode="singleTop"
           android:theme="@android:style/Theme.NoDisplay" />
       <!--微信分享结束-->

3.Project的gradle中设置

allprojects {
   repositories {
       flatDir {
           dirs '../../node_modules/react-native-sns-share/android/libs'
       }
      ...
   }
}

微博设置

1.MainActivity中重载onActivityResult，用于接收微博回调信息

       @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
       super.onActivityResult(requestCode, resultCode, data);
       // 接收微博分享后的返回值
       WeiboManager.getInstance().doResultIntent(requestCode, resultCode, data);
   }

2.主build.gradle中添加

allprojects {
  repositories {
      ...
      maven { url "https://dl.bintray.com/thelasterstar/maven/" }
  }
}

QQ设置

1.AndroidManifest.xml中设置。AuthActivity中的Data为tencent+AppId

      <!--QQ分享开始-->
       <activity
           android:name="com.tencent.tauth.AuthActivity"
           android:noHistory="true"
           android:launchMode="singleTask" >
           <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="tencent1111" />
           </intent-filter>
       </activity>
       <activity
           android:name="com.tencent.connect.common.AssistActivity"
           android:configChanges="orientation|keyboardHidden"
           android:screenOrientation="behind"
           android:theme="@android:style/Theme.Translucent.NoTitleBar" />
       <!--QQ分享结束-->

2.MainActivity中重载onActivityResult，用于接收QQ回调信息

       @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
       super.onActivityResult(requestCode, resultCode, data);
       // 接收QQ分享后的返回值
      QQManager.getInstance().doResultIntent(requestCode, resultCode, data);
   }

二. 使用

1. 注册App

import Sns from 'react-native-sns-share'

// 项目启动时，注册微信、微博信息
Sns.snsSocial.registerApp({
 'wechart': 'wx11111111',
 'weibo': '2222222',
 'qq': '33333333',
}, {
 'weibo': 'https://www.baidu.com',
}, 'testing');

2. 分享调用

import Sns from 'src/react-native-sns-share'

const types = Sns.snsShare.TYPES;

Sns.snsShare.share({
 webpageUrl: 'https://www.baidu.com',
 title: '分享一下',
 description: '分享就用我',
 imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568635646029&di=4f86fc970153b638fd4a404e2a780ed0&imgtype=0&src=http%3A%2F%2Fwww.cnr.cn%2Fjingji%2Ftxcj%2F20160727%2FW020160727318839106051.jpg',
 shareType: types.WECHAT_SESSION
 })
.then(() => {
   console.log('wx share success');
 })
.catch((error) => {
   console.log(error);
 })

types常量表

| 变量 | 含义 | | ----------- | ----------- | |WECHAT_SESSION| 微信好友 | |WECHAT_TIMELINE| 微信朋友圈 | |QQ_SESSION| QQ好友 | |WEIBO| 微博 |

3. 支付调用

   import Sns from 'react-native-sns-share'

   let params， type = Sns.snsPayment.TYPES.ALIPAY;

   if (type == Sns.snsPayment.TYPES.ALIPAY) {
     // order 数据尽量后太组装成功后返回，不要前台自己来拼写。 scheme为ios用的，在plist中配置
     params = {
       order:'partner=2088101568358171&[email protected]&out_trade_no=0819145412-6177&subject=测试&body=测试测试&total_fee=0.01&notify_url=http://notify.msp.hk/notify.htm&service=mobile.securitypay.pay&payment_type=1&_input_charset=utf-8&it_b_pay=30m&sign=lBBK%2F0w5LOajrMrji7DUgEqNjIhQbidR13GovA5r3TgIbNqv231yC1NksLdw%2Ba3JnfHXoXuet6XNNHtn7VE%2BeCoRO1O%2BR1KugLrQEZMtG5jmJIe2pbjm%2F3kb%2FuGkpG%2BwYQYI51%2BhA3YBbvZHVQBYveBqK%2Bh8mUyb7GM1HxWs9k4%3D&sign_type=RSA',
       scheme: 'xxxx'
     }
   } else if (type == Sns.snsPayment.TYPES.WECHAT) {
     // 信息后台给到
     params = {
       partnerId:'',
       prepayId: 'xxxx',
       package: '',
       nonceStr: '',
       timeStamp:'',
       sign: '',
     }
   }

   Sns.snsPayment.pay(type, params)
   .then(() => {
       console.log('支付成功');
     })
   .catch((error) => {
       console.log(error);
       // 失败的场景下，最好重新拉取下api来判定是否成功。 有可能用户支付完成后，不点返回留在支付应用。
     })

types常量表

| 变量 | 含义 | | ----------- | ----------- | |WECHAT| 微信支付 | |ALIPAY| 支付宝支付 |

4. 授权登录调用

   import Sns from 'react-native-sns-share'

   let params, type
   if (type == Sns.snsOAuth.TYPES.ALIPAY) {
     // authLink 根据支付宝文档，后台做拼装加签
     params = {
       authLink:'XXX',
       scheme: 'xxxx'
     }
   }
   Sns.snsOAuth.auth(type, params)
   .then((result) => {

      // 调用后台服务，通过result做后续逻辑
      // 新浪场景格式为 "user_id=%@&access_token=%@&expiration_date=%@&refresh_token=%@"
       console.log('成功' + result);
     })
   .catch((error) => {
       console.log(error);
     })

types常量表

| 变量 | 含义 | | ----------- | ----------- | |WECHAT| 微信 | |ALIPAY| 支付宝 | |WEIBO| 微博 | |QQ| 微博 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-native-sns-share

一. 起步

iOS

微信设置

微博设置

支付宝设置

QQ设置

统一设置

Android

微信设置

微博设置

QQ设置

二. 使用

1. 注册App

2. 分享调用

3. 支付调用

4. 授权登录调用