React-Native 集成友盟分享sdk2.x

本文内容为集成微信和QQ分享

准备工作

友盟、QQ互联、微信开放平台，创建应用。
下载友盟sdk，如下图

image.png

image

好的，现在开始干活～～～

集成ios端

将下载好的友盟sdk文件目录下，iOS和React-Native目录下所有的.h和.m文件，以及和iOS相关的静态包和.framework，都拖到xcode里面。

image
然后看到是这个样子

image
Other Linker Flags加入-ObjC ，-ObjC属于链接库必备参数。

image
Linked Frameworks and Libraries 添加依赖库

libsqlite3.tbd

CoreGraphics.framework

SystemConfiguration.framework

CoreTelephony.framework

libc++.tbd

libz.tbd

info.plist添加白名单

image

<key>LSApplicationQueriesSchemes</key>

<array>

    <!-- 微信 URL Scheme 白名单-->

    <string>wechat</string>

    <string>weixin</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>

    <string>tim</string>

    <string>timapi</string>

    <string>timopensdkfriend</string>

    <string>timwpa</string>

    <string>timgamebindinggroup</string>

    <string>timapiwallet</string>

    <string>timOpensdkSSoLogin</string>

    <string>wtlogintim</string>

    <string>timopensdkgrouptribeshare</string>

    <string>timopensdkapiV4</string>

    <string>timgamebindinggroup</string>

    <string>timopensdkdataline</string>

    <string>wtlogintimV1</string>

    <string>timapiV1</string>

</array>

配置URL Scheme。（注意填写准备好的AppKey）

image
AppDelegate.m中初始化sdk

//友盟分享

#import "RNUMConfigure.h"

#import



- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

{

  /**

   *  RN

   */

  NSURL*jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation

                                                      moduleName:@"wms"

                                               initialProperties:nil

                                                   launchOptions:launchOptions];

  rootView.backgroundColor= [UIColorblackColor];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

  UIViewController *rootViewController = [UIViewController new];

  rootViewController.view= rootView;

  self.window.rootViewController= rootViewController;

  [self.window makeKeyAndVisible];

  /**

   *  友盟分享

   */

  //打开调试日志 

  [UMConfigure setLogEnabled:YES];

  //设置友盟appkey

  [RNUMConfigure initWithAppkey:@"5ca8498b61f564cf4d00127b" channel:@"App Store"];

  //关闭强制验证https，可允许http图片分享，但需要在info.plist设置安全域名

  [UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;

  //设置微信的appKey和appSecret

  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wx179afsafasw23b54ae" appSecret:@"5a4142fsdsfswe9a40e93fc" redirectURL:nil];

  //设置分享到QQ互联的appID

  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"101568934"/*设置QQ平台的appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

  return YES;

}



#pragma mark - Share

//#define __IPHONE_10_0    100000

#if __IPHONE_OS_VERSION_MAX_ALLOWED >100000

- (BOOL)application:(UIApplication*)app openURL:(NSURL*)url options:(NSDictionary *)options

{

  //6.3的新的API调用，是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响。

  BOOL result = [[UMSocialManager defaultManager]  handleOpenURL:url options:options];

  if(!result) {

    // 其他如支付等SDK的回调

  }

  returnresult;

}

#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的回调

  }

  returnresult;

}

- (BOOL)application:(UIApplication*)application handleOpenURL:(NSURL*)url

{

  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];

  if(!result) {

    // 其他如支付等SDK的回调

  }

  return result;

}

集成android工程

android/app目录下新建libs目录，将下载目录的Android中的所有jar包拷贝至libs
如下图

image
将下载文件的ReactNative目录中所有跟android相关的java文件拷贝至目标项目包下，修改对应包名。

image
创建WXEntryActivity.java

package com.wms.umeng.wxapi;

import android.content.Intent;

import com.umeng.socialize.UMShareAPI;

import com.umeng.socialize.weixin.view.WXCallbackActivity;

public class WXEntryActivity extends WXCallbackActivity {

    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        super.onActivityResult(requestCode, resultCode, data);

        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);

    }

}

本示例只集成分享，所以DplusReactPackage.java可以注释PushModule和AnalyticsModule。注释掉的模块是推送和统计。

image
MainActivity.java初始化sdk

/**

* ummengshare sdk初始化

*/

ShareModule.initSocialSDK(this);

/**

*  umengshare 回调

*/

@Override

public void onActivityResult(int requestCode,int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);

}

image

MainApplication.java配置

加载包 new DplusReactPackage()

image

配置

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this,/* native exopackage */ false);

/**

* 应用升级

*/

  Bugly.init(getApplicationContext(),"612d4cb76b",true);

/**

* 友盟分享

* RNUMConfture.init接口一共五个参数，

* 其中第一个参数为Context，

* 第二个参数为友盟Appkey，

* 第三个参数为channel，

* 第四个参数为应用类型（手机或平板），

* 第五个参数为push的secret（如果没有使用push，可以为空）。

*/

  UMConfigure.setLogEnabled(true);

RNUMConfigure.init(this,"5ca849d5570df31fb2001394","Umeng", UMConfigure.DEVICE_TYPE_PHONE,

"");

}

// 友盟分享:配置平台key、secret信息

{

PlatformConfig.setWeixin("wxxxxxxx","5a4142ff9xxxxxxxx93fc");

PlatformConfig.setQQZone("101568934","e912c0ffb846b50f3d2b42fc15b04cfc");

}

image

权限

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

AndroidManifest.xml添加activity

<activity android:name=".umeng.wxapi.WXEntryActivity" android:configChanges="keyboardHidden|orientation|screenSize" android:exported="true" android:theme="@android:style/Theme.Translucent.NoTitleBar" />

image

添加res文件到android studio

image

React-Native端应用

将ShareUtil.js拖入rn目录

image
导包

import ShareUtile from '../../3rd/UMShare/ShareUtil'

使用

img 为图片地址，可以为链接，本地地址以及res图片（如果使用res,请使用如下写法：res/icon.png）

url 为分享链接，可以为空

title 为分享链接的标题

list 为分享平台数组，如：var list = [0,1,2]

callback中code为错误码，当为0时，标记成功。message为错误信息

ShareUtile.share(text,img,url,title,platform,(code,message) =>{

            this.setState({result:message});

        });

ShareUtil.js引用的模块api参考

image
或者

image
over！集成好了就去体验吧。

最后编辑于：2019.08.19 14:43:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,589评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,615评论 3赞 396
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 165,933评论 0赞 356
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,976评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,999评论 6赞 393
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,775评论 1赞 307
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,474评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,359评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,854评论 1赞 317
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,007评论 3赞 338
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,146评论 1赞 351
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,826评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,484评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,029评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,153评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,420评论 3赞 373
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,107评论 2赞 356

React-Native 集成友盟分享sdk2.x

本文内容为集成微信和QQ分享

准备工作

好的，现在开始干活～～～

集成ios端

集成android工程

React-Native端应用

推荐阅读更多精彩内容