React Native 結合友盟實現分享

時間 2019-11-07

原文原文鏈接

前言

現在，分享已是app必不可少的一項功能，前段時間在react native中實現了社會化分享的功能，在這裏記錄一下實現過程，但願能夠幫到有須要的人。前端

此文章會記錄安卓和IOS 兩個平臺分別實現分享的步驟，內容可能會有點長，可根據須要查看。java

技術調研

在蒐羅了網上大部分 react native實現分享的技術文章中，大部分文章較爲老舊，實現方式也跟原生app相仿，須要本身編寫大量的Object-C 以及java代碼，對於純前端開發的人來講時間成本和難度有點高，有幸，在友盟官網上發現了有針對於react native的社會化分享sdk，研究了一番，可行，開始。react

準備

這裏默認你已經搭建好react native的開發環境。android

註冊友盟帳號

去友盟官網註冊帳號，建議使用公司郵箱。ios

關於開發者認證，暫時不須要企業認證能夠免費試用大部分功能。 git

點擊當即使用便可前往控制檯，首先要新建你的應用。github

不一樣平臺的應用禁止使用相同的Appkey，須要分開註冊，應用名與實際應用名和包名無關，建議命名爲應用名+平臺（iOS/Android)web

目的是拿到AppKey。 sql

下載SDK

在彈框選擇對應的分享平臺，本文只針對微信、QQ、新浪微博的精簡版說明。api

在各大平臺註冊應用

關於申請的流程官網文檔有介紹，有幾點須要注意：

各大平臺申請服務所須要等待的時間不等，一般是1-5天便可經過，申請的同時能夠集成sdk。
新浪的開發者帳號申請比較麻煩，但也是最快能夠拿到appkey的。

React native的集成

關於集成文檔，友盟已經給出，按照官方文檔的步驟集成便可，只不過集成完react native 的部分纔算一小部分，大部分集成都須要按照ios和安卓平臺的文檔分別集成，鑑於官方文檔寫的雲裏霧裏，新手可直接參考我這裏的步驟。

友盟集成文檔

React Native Android 集成

安卓集成比較麻煩，建議clone 官方示例demo對照設置。

初始化

用android studio 打開你的Android目錄，

app目錄中新建libs文件夾，將下載的jar放入libs中。

首先須要新建一個文件夾來存放這些.java文件，在你的項目以下目錄中新建 umeng文件夾：

拷貝common_android文件夾中的文件拷貝到umeng文件夾:

而後再將對應平臺的橋接文件拷入 umeng文件夾：

注意：官方示例中橋接文件的路徑默認是 com.umeng.soexample.invokenative,要修改爲本身的路徑。

改成本身的路徑：

打開MainApplication.java文件，在new MainReactPackage()後添加一行 new DplusReactPackage();

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new DplusReactPackage()
            );
        }
    };
複製代碼

並在onCreate()中進行初始化：

@Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        RNUMConfigure.init(this, "59892f08310c9307b60023d0", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,
            "669c30a9584623e70e8cd01b0381dcb4");
    }
複製代碼

RNUMConfture.init接口一共五個參數，其中第一個參數爲Context，第二個參數爲友盟Appkey，第三個參數爲channel，第四個參數爲應用類型（手機或平板），第五個參數爲push的secret（若是沒有使用push，能夠爲空）。

在友盟後臺註冊完app後便可把 android 的appkey填入。

至此，react native 的安卓工程配置已經完成，接下來要按照Android的 U-share文檔集成。

Android 部分集成

官方文檔說Android集成包含快速集成和手動集成，可是關於快速集成毛都沒講，咱們使用手動集成。

導入res 將 main 和platfroms文件夾下的res資源所有導入工程中。 res下沒有相關目錄的話直接拷貝文件夾過去。

添加完畢：

微信

的回調須要新建文件夾

在包名目錄下建立wxapi文件夾，新建文件WXEntryActivity的activity.java

寫入如下內容（com.share.umeng要改爲你的包路徑）:

package com.share.umeng;

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

public class WXEntryActivity extends WXCallbackActivity {

}
複製代碼

QQ與新浪

QQ與新浪不須要添加Activity，但須要在MainActivity.java文件中修改以下：

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "share";
    }
    
    // 添加如下代碼
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
    }
}
複製代碼

注意onActivityResult不可在fragment中實現，若是在fragment中調用登陸或分享，須要在fragment依賴的Activity中實現。

配置Android Manifest XML

sdk中須要的Activity

新浪：

<activity
        android:name="com.umeng.socialize.media.WBShareCallBackActivity"
        android:configChanges="keyboardHidden|orientation"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:exported="false"
        >
    </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>
複製代碼

微信：

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

權限添加

在AndroidManifest.xml中添加以下權限:

<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" />
複製代碼

若是須要使用QQ純圖分享或避免其它平臺純圖分享的時候圖片不被壓縮，能夠增長如下權限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>   
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
複製代碼

Android6.0權限適配

查看你的build.gradle文件，若是 targetSdkVersion小於或等於22，能夠忽略這一步，若是大於或等於23，須要作權限的動態申請：

if(Build.VERSION.SDK_INT>=23){
                  String[] mPermissionList = new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE,Manifest.permission.ACCESS_FINE_LOCATION,Manifest.permission.CALL_PHONE,Manifest.permission.READ_LOGS,Manifest.permission.READ_PHONE_STATE, Manifest.permission.READ_EXTERNAL_STORAGE,Manifest.permission.SET_DEBUG_APP,Manifest.permission.SYSTEM_ALERT_WINDOW,Manifest.permission.GET_ACCOUNTS,Manifest.permission.WRITE_APN_SETTINGS};
                  ActivityCompat.requestPermissions(this,mPermissionList,123);
              }
複製代碼

其中123是requestcode，能夠根據這個code判斷，用戶是否贊成了受權。若是沒有贊成，能夠根據回調進行相應處理：

@Override
public void onRequestPermissionsResult(int requestCode,
        String permissions[], int[] grantResults) {

}
複製代碼

初始化設置

因爲以前已經在在onCreate()方法中替換友盟的appkey，還須要替換各大平臺的Appkey 和 App Secret

打開MainApplication.java文件，在onCreate()方法後添加各平臺的appkey:

{
//豆瓣RENREN平臺目前只能在服務器端配置
        PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
        PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad", "http://sns.whalecloud.com");
        PlatformConfig.setQQZone("100424468", "c7394704798a158208a74ab60104f0ba");


    }
複製代碼

簽名配置

將文件夾中的簽名文件放入到工程中，通常是debug.keystore

如何生成簽名?

打開build.gradle而後增長簽名文件的密碼：

signingConfigs {
    debug {
        storeFile file('debug.keystore')
        storePassword "android"
        keyAlias "androiddebugkey"
        keyPassword "android"
    }
}
複製代碼

而後在buildTypes中將這個signingConfigs配置進去，以下圖所示：

至此，android 部分的集成結束，更多高級功能請去參考官方文檔。

React Native IOS 集成

ios集成文檔

ios的集成也非分爲手動集成和自動集成，自動集成使用Cocoapods。

經過 Cocoapods 方式集成請參考文檔 Cocoapods集成分享SDK。

因爲我以前是經過手動集成的，因此本文講解手動集成步驟，

可是對於ios來講更推薦使用 Cocoapods。

進入ios > 項目目錄，新建兩個文件夾UMReactBridge和UMComponent。
打開以前下載的文件，把share目錄中的最後全部文件，拷入UMComponent中的新建文件夾UMShare中。

這裏有一個問題。經過選擇react native 下載的sdk包中ios目錄中缺乏common部分的文件，因此還須要去sdk下載中心去下載ios的sdk。

下載以後，將ios目錄下的common中的framework，拷入UMComponent中。

同時有兩個log相關的文件，一併導入，便於開發時能夠在xcode中查看詳細的日誌。

進入下載文件的ReactNative目錄，找到common``share目錄中對應的ios平臺中的橋接.h ``.m文件，所有拷貝至咱們項目剛剛新建的UMReactBridge文件夾。

xcode中打開工程目錄，右鍵黃色項目名Add Files to "xxx"，options中選中Create groups Copy items if needed找到咱們新建的UMReactBridge和UMComponent，add添加。

在Other Linker Flags加入-ObjC ，注意不要寫爲-Objc，注：-ObjC屬於連接庫必備參數，若是不加此項，會致使庫文件沒法被正確連接，SDK沒法正常運行。

加入依賴系統庫

加入如下系統庫：

libsqlite3.tbd
CoreGraphics.framework
複製代碼

日誌依賴庫：

Foundation.framework
複製代碼

日誌詳細配置

第三方平臺庫添加（精簡版）: 新浪微博(精簡版)

Photos.framework

複製代碼

第三方平臺配置

配置SSO白名單

若是你的應用使用瞭如SSO受權登陸或跳轉到第三方分享功能，在iOS9/10下就須要增長一個可跳轉的白名單，即LSApplicationQueriesSchemes，不然將在SDK判斷是否跳轉時用到的canOpenURL時返回NO，進而只進行webview受權或受權/分享失敗。在項目中的info.plist中加入應用白名單，右鍵info.plist選擇source code打開,請根據選擇的平臺對如下配置進行裁剪：

<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>
    <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>

    <!-- 支付寶 URL Scheme 白名單-->
    <string>alipay</string>
    <string>alipayshare</string>

    <!-- 釘釘 URL Scheme 白名單-->
      <string>dingtalk</string>
      <string>dingtalk-open</string>

    <!--Linkedin URL Scheme 白名單-->
    <string>linkedin</string>
    <string>linkedin-sdk2</string>
    <string>linkedin-sdk</string>

    <!-- 點點蟲 URL Scheme 白名單-->
    <string>laiwangsso</string>

    <!-- 易信 URL Scheme 白名單-->
    <string>yixin</string>
    <string>yixinopenapi</string>

    <!-- instagram URL Scheme 白名單-->
    <string>instagram</string>

    <!-- whatsapp URL Scheme 白名單-->
    <string>whatsapp</string>

    <!-- line URL Scheme 白名單-->
    <string>line</string>

    <!-- Facebook URL Scheme 白名單-->
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>

    <!-- Kakao URL Scheme 白名單-->  
    <!-- 注：如下第一個參數需替換爲本身的kakao appkey--> 
    <!-- 格式爲 kakao + "kakao appkey"-->    
    <string>kakaofa63a0b2356e923f3edd6512d531f546</string>
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
    <string>kakaolink</string>
    <string>kakaotalk-4.5.0</string>
    <string>kakaostory-2.9.0</string>

   <!-- pinterest URL Scheme 白名單-->  
    <string>pinterestsdk.v1</string>

   <!-- Tumblr URL Scheme 白名單-->  
    <string>tumblr</string>

   <!-- 印象筆記 -->
    <string>evernote</string>
    <string>en</string>
    <string>enx</string>
    <string>evernotecid</string>
    <string>evernotemsg</string>

   <!-- 有道雲筆記-->
    <string>youdaonote</string>
    <string>ynotedictfav</string>
    <string>com.youdao.note.todayViewNote</string>
    <string>ynotesharesdk</string>

   <!-- Google+-->
    <string>gplus</string>

   <!-- Pocket-->
    <string>pocket</string>
    <string>readitlater</string>
    <string>pocket-oauth-v1</string>
    <string>fb131450656879143</string>
    <string>en-readitlater-5776</string>
    <string>com.ideashower.ReadItLaterPro3</string>
    <string>com.ideashower.ReadItLaterPro</string>
    <string>com.ideashower.ReadItLaterProAlpha</string>
    <string>com.ideashower.ReadItLaterProEnterprise</string>

   <!-- VKontakte-->
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>

   <!-- Twitter-->
    <string>twitter</string>
    <string>twitterauth</string>
</array>
複製代碼

配置URL Scheme

URL Scheme是經過系統找到並跳轉對應app的一類設置，經過向項目中的info.plist文件中加入URL types可以使用第三方平臺所註冊的appkey信息向系統註冊你的app，當跳轉到第三方應用受權或分享後，可直接跳轉回你的app。

部分規則：

微信：微信appKey wxdc1e388c3822c80b
QQ/Qzone：須要添加兩項URL Scheme：一、"tencent"+騰訊QQ互聯應用appID 二、「QQ」+騰訊QQ互聯應用appID轉換成十六進制（不足8位前面補0）如appID：100424468 一、tencent100424468 二、QQ05fc5b14

在線轉換

新浪微博：「wb」+新浪appKey wb3921700954

權限配置

在 info.plist 文件中配置相冊權限:

<key>NSPhotoLibraryUsageDescription</key>
    <string>App須要您的贊成,才能訪問相冊</string>
複製代碼

初始化設置

AppDelegate.m設置友盟appkey以及各個平臺的appkey和secret。

#import <UMShare/UMShare.h>

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

    // UMConfigure 通用設置，請參考SDKs集成作統一初始化。
    // 如下僅列出U-Share初始化部分

    // U-Share 平臺設置
    [self configUSharePlatforms];
    [self confitUShareSettings];

    // Custom code

    return YES;
}

- (void)confitUShareSettings
{
    /*
     * 打開圖片水印
     */
    //[UMSocialGlobal shareInstance].isUsingWaterMark = YES;

    /*
     * 關閉強制驗證https，可容許http圖片分享，但須要在info.plist設置安全域名
     <key>NSAppTransportSecurity</key>
     <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
     </dict>
     */
    //[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;

}

- (void)configUSharePlatforms
{
    /* 設置微信的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxdc1e388c3822c80b" appSecret:@"3baf1193c85774b3fd9d18447d76cab0" redirectURL:@"http://mobile.umeng.com/social"];
    /*
     * 移除相應平臺的分享，如微信收藏
     */
    //[[UMSocialManager defaultManager] removePlatformProviderWithPlatformTypes:@[@(UMSocialPlatformType_WechatFavorite)]];

    /* 設置分享到QQ互聯的appID
     * U-Share SDK爲了兼容大部分平臺命名，統一用appKey和appSecret進行參數設置，而QQ平臺僅需將appID做爲U-Share的appKey參數傳進便可。
    */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1105821097"/*設置QQ平臺的appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

    /* 設置新浪的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"3921700954"  appSecret:@"04b48b094faeb16683c32669824ebdad" redirectURL:@"https://sns.whalecloud.com/sina2/callback"];

    /* 釘釘的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_DingDing appKey:@"dingoalmlnohc0wggfedpk" appSecret:nil redirectURL:nil];

    /* 支付寶的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_AlipaySession appKey:@"2015111700822536" appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];


    /* 設置易信的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_YixinSession appKey:@"yx35664bdff4db42c2b7be1e29390c1a06" appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

    /* 設置點點蟲（原來往）的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_LaiWangSession appKey:@"8112117817424282305" appSecret:@"9996ed5039e641658de7b83345fee6c9" redirectURL:@"http://mobile.umeng.com/social"];

    /* 設置領英的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Linkedin appKey:@"81t5eiem37d2sc"  appSecret:@"7dgUXPLH8kA8WHMV" redirectURL:@"https://api.linkedin.com/v1/people"];

    /* 設置Twitter的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Twitter appKey:@"fB5tvRpna1CKK97xZUslbxiet"  appSecret:@"YcbSvseLIwZ4hZg9YmgJPP5uWzd4zr6BpBKGZhf07zzh3oj62K" redirectURL:nil];

    /* 設置Facebook的appKey和UrlString */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Facebook appKey:@"506027402887373"  appSecret:nil redirectURL:@"http://www.umeng.com/social"];

    /* 設置Pinterest的appKey */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Pinterest appKey:@"4864546872699668063"  appSecret:nil redirectURL:nil];

    /* dropbox的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_DropBox appKey:@"k4pn9gdwygpy4av" appSecret:@"td28zkbyb9p49xu" redirectURL:@"https://mobile.umeng.com/social"];

    /* vk的appkey */
    [[UMSocialManager defaultManager]  setPlaform:UMSocialPlatformType_VKontakte appKey:@"5786123" appSecret:nil redirectURL:nil];

}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  {
    BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
    if (!result) {
      // 其餘如支付等SDK的回調
    }
    return result;
  }

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
  {
    BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
    if (!result) {
      // 其餘如支付等SDK的回調
    }
    return result;
  }

複製代碼

對應的方法在UMShareModule.m中查看。

調試模式與日誌

以前已經加過日誌庫的資源文件了。

開啓日誌：

[UMConfigure setLogEnabled:YES];
複製代碼

使用分享

至此，ios和adnroid平臺的集成和工程配置基本完成，最後一步就是使用原生代碼導出的分享模塊供js調用。

進入下載目錄的ReactNative找到common下的js中的ShareUtil.js，拷貝到咱們RN目錄下，放入libs文件夾。

android與ios平臺回調中的code值不一致，ios成功時code:200，android成功時code:0。

首先須要引入ShareUtil文件：

import ShareUtile from './ShareUtil'
複製代碼

受權

受權代碼能夠直接使用ShareUtile.auth(platform,callback)，其中platform爲平臺id，callback爲回調內容。

詳細對應關係

官方文檔給出了三種分享回調，在這裏使用 ShareUtile.shareboard調起分享面板實現分享。

ShareUtile.shareboard(text,img,url,title,list,(code,message) =>{
            this.setState({result:message});

        });
複製代碼

text 爲分享內容
img 爲圖片地址，能夠爲連接，本地地址以及res圖片（若是使用res,請使用以下寫法：res/icon.png）
url 爲分享連接，能夠爲空
title 爲分享連接的標題
list 爲分享平臺數組，如：var list = [0,1,2]
callback中code爲錯誤碼，當爲0時，標記成功。-
message爲錯誤信息

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。