react-native-sns-share
RN微信、微博、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中,选择你的工程设置项,选中“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// 微博web版本回掉时,会走此方法 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(nullable NSString *)sourceApplication annotation:(id)annotation - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - (void)applicationWillEnterForeground:(UIApplication *)application
### Android 确认MainApplication,getPackages中是否已经加入RNSnsSharePackage。 若没有加入,getPackages中加入 packages.add(new RNSnsSharePackage());
@Override protected List<ReactPackage> { List<ReactPackage> packages = new PackageList(this).; // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); packages.; return packages; }
微信设置
1.Android工程代码下创建 包名+wxapi/WXEntryActivity.java / WXPayEntryActivity.java继承com.evan.sns.share.wxapi.WXEntryActivity
2.AndroidManifest.xml中设置
<!--微信支付开始--> <!--微信支付结束--> <!--微信分享开始--> <!--微信分享结束-->
3.Project的gradle中设置
allprojects { repositories { flatDir { dirs '../../node_modules/react-native-sns-share/android/libs' } ... }}
#### 微博设置 1.MainActivity中重载onActivityResult,用于接收微博回调信息
@Override public void { super.; // 接收微博分享后的返回值 WeiboManager..; }
2.主build.gradle中添加
allprojects { repositories { ... maven { url "https://dl.bintray.com/thelasterstar/maven/" } }}
#### QQ设置 1.AndroidManifest.xml中设置。AuthActivity中的Data为tencent+AppId
<!--QQ分享开始--> <!--QQ分享结束-->
2.MainActivity中重载onActivityResult,用于接收QQ回调信息
@Override public void { super.; // 接收QQ分享后的返回值 QQManager..; }
## 二. 使用
### 1. 注册App
// 项目启动时,注册微信、微博信息SnssnsSocial;
### 2. 分享调用
const types = SnssnsShareTYPES; SnssnsShare
types常量表
变量 | 含义 |
---|---|
WECHAT_SESSION | 微信好友 |
WECHAT_TIMELINE | 微信朋友圈 |
QQ_SESSION | QQ好友 |
微博 |
### 3. 支付调用
let params, type = SnssnsPaymentTYPESALIPAY; if type == SnssnsPaymentTYPESALIPAY // order 数据尽量后太组装成功后返回,不要前台自己来拼写。 scheme为ios用的,在plist中配置 params = order:'partner=2088101568358171&seller_id=xxx@alipay.com&out_trade_no=0819145412-6177&subject=测试&body=测试测试&total_fee=0.01¬ify_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 == SnssnsPaymentTYPESWECHAT // 信息后台给到 params = partnerId:'' prepayId: 'xxxx' package: '' nonceStr: '' timeStamp:'' sign: '' SnssnsPayment
types常量表
变量 | 含义 |
---|---|
微信支付 | |
ALIPAY | 支付宝支付 |
### 4. 授权登录调用
let params type if type == SnssnsOAuthTYPESALIPAY // authLink 根据支付宝文档,后台做拼装加签 params = authLink:'XXX' scheme: 'xxxx' SnssnsOAuth
types常量表
变量 | 含义 |
---|---|
微信 | |
ALIPAY | 支付宝 |
微博 | |
微博 |