久草欧美视频,91麻豆精品传媒,蜜臀久久久久久999

期待已久的新課上線啦！解鎖React Native開發(fā)新姿勢，一網(wǎng)打盡React Native最新與最熱技術，點我Get!!!

在我們常用的App中經(jīng)常會看到分享與第三方登錄的功能，可以說分享與第三方登錄已經(jīng)成為了各大APP的必備功能。對于產(chǎn)品運行與推廣來說，分享與第三方登錄不僅能加強用戶粘性，增加流量及新用戶，也能提升用戶存留優(yōu)化產(chǎn)品質量等。

react-native-ios-share

各大平臺都有對應的開發(fā)平臺來提供分享與第三方登錄的服務，比如微信開發(fā)平臺/騰訊開發(fā)平臺、新浪開發(fā)者平臺等。因為各大平臺及相關SDK存在很大的差異，單獨集成起來比較繁瑣，為了快速集成分享與第三方登錄我們可以使用相應統(tǒng)一的服務提供商，常用的分享與登錄的提供商有umeng與shareSdk。

截止目前，但各大平臺與集成服務的提供方都只提供了Native版本的SDK，沒有對React Native做支持，為此要在React Native應用中添加分享與第三方登錄我們需要開發(fā)出能供React Native應用使用的分享與登錄模塊。

在這篇文章中我會向大家分享，在React Native中集分享第與三方登錄功能的流程以及分享與第三方登錄模塊開發(fā)。(在本文中我將以umeng為例來進行講解)

除了本篇的教程外你也可以想通過，視頻教程來學習來學習實現(xiàn)分享與第三方登錄的具體細節(jié)

第一步：集成準備

首先我們需要到umeng官網(wǎng)申請一個開發(fā)者賬號。然后創(chuàng)建一個應用并獲取appkey。
在之后呢，我們需要進行必不可少的一步就是，到各大平臺申請第三方開發(fā)者賬號，關于申請的流程官網(wǎng)文檔講解的已經(jīng)很詳細了，在這里我不再重復了。

各大平臺申請服務所需要等待的時間不等，通常是1-3天就可以搞定，建議在申請的同時，就進行sdk的集成，等申請通過之后，在換成正式的賬號進行調試，這樣一來開發(fā)申請兩不誤。

第二步：集成SDK

Umeng分享與登錄SDK支持通過Cocoapods的集成方式，通過這種方式我們集成起來方便很多。

在你的項目根目錄創(chuàng)建一個 podfile 文件，添加如下內容：

# 集成新浪微博
pod 'UMengUShare/Social/Sina'
# 集成微信
pod 'UMengUShare/Social/WeChat'
# 集成QQ
pod 'UMengUShare/Social/QQ'
# 集成郵件
pod 'UMengUShare/Social/Email'
# 集成短信
pod 'UMengUShare/Social/SMS'

如：

platform :ios, '7.0'

target 'imooc_gp' do
    pod 'UMengAnalytics'
    pod 'UMengUShare/UI'
    # 集成新浪微博
    pod 'UMengUShare/Social/Sina'
    # 集成微信
    pod 'UMengUShare/Social/WeChat'
    # 集成QQ
    pod 'UMengUShare/Social/QQ'
    # 集成郵件
    pod 'UMengUShare/Social/Email'
    # 集成短信
    pod 'UMengUShare/Social/SMS'
end

以上是我所選擇集成的一些平臺，如需選擇其他平臺可以參考：快速集成
然后在terminal下運行命令如下：

pod install

pod-install-umeng-share

若發(fā)現(xiàn)找不到相應的sdk，則需要執(zhí)行pod update命令來更新U-Share SDK。

命令執(zhí)行完成后即可完成統(tǒng)計SDK的下載安裝。

然后，我們打開項目項目根目錄下的ios文件夾，會看到一個xxx.xcworkspace的文件：
[圖片上傳失敗...(image-2f3717-1544634451112)]

用XCode打開該文件就會看到我們剛才集成的SDK了：
[圖片上傳失敗...(image-22f2dd-1544634451112)]

如果我們一個項目中有多個PROJECT，那么則需要用xcworkspace是來管理我們的項目，我們通過pod安裝了統(tǒng)計sdk后，項目中會多出來一個名為Pods的PROJECT，所以后我們需要通過xcworkspace來打開我們的ios項目了。

第三步：構建分享及登錄模塊

為了能夠在React Native中使用umeng分享及登錄，我們需要為剛才導出的sdk創(chuàng)建一個Native 模塊然后通過橋接的方式供js部分進行調用，關于如何開發(fā)React Native原生模塊，可參考《React Native iOS原生模塊開發(fā)實戰(zhàn)|教程|心得
》。

創(chuàng)建UShare

在u_share模塊中我們創(chuàng)建了一個UShare類，該類主要負責umeng分享sdk之間的通信。

 /**
 * 分享組件
 * 出自：http://www.devio.org
 * GitHub:https://github.com/crazycodeboy
 * Eamil:crazycodeboy@gmail.com
 */
#import "UShare.h"
#import "UMSocialUIManager.h"
#import "UMSocialShareScrollView.h"

@implementation UShare
RCT_EXPORT_MODULE();

- (dispatch_queue_t)methodQueue{
  return dispatch_get_main_queue();
}

RCT_EXPORT_METHOD(share:(NSString *)title content:(NSString *)content imageUrl:(NSString*)imageUrl targetUrl:(NSString*)targetUrl successCallback:(RCTResponseSenderBlock*)successCallback errorCallback:(RCTResponseSenderBlock*)errorCallback )
{
  [UMSocialUIManager showShareMenuViewInWindowWithPlatformSelectionBlock:^(UMShareMenuSelectionView *shareSelectionView, UMSocialPlatformType platformType) {
    //創(chuàng)建分享消息對象
    UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
    //創(chuàng)建網(wǎng)頁內容對象
    UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:content thumImage:imageUrl];
    //設置網(wǎng)頁地址
    shareObject.webpageUrl =targetUrl;
    
    //分享消息對象設置分享內容對象
    messageObject.shareObject = shareObject;
    
    //...省略部分代碼，你也可以通過視頻教程(http://coding.imooc.com/class/304.html)來學習實現(xiàn)分享第三方登錄的具體細節(jié)
  }];
  
}
@end

也可以查看實現(xiàn)分享第三方登錄的視頻教程

代碼解讀：

方法：

share:(NSString *)title content:(NSString *)content imageUrl:(NSString*)imageUrl targetUrl:(NSString*)targetUrl successCallback:(RCTResponseSenderBlock*)successCallback errorCallback:(RCTResponseSenderBlock*)errorCallback )

負責調打開分享面板以及分享回調的處理。

另外，通過RCT_EXPORT_METHOD標識我們向React Native暴露了share方法。

提示:因為我們需要打開分享面板，這屬于UI操作，所以我們要在主線程中進行處理，否則會發(fā)生卡頓的現(xiàn)象，將方法切換到主線程中執(zhí)行，我們可以添加如下代碼：

RCT_EXPORT_MODULE();

- (dispatch_queue_t)methodQueue{
  return dispatch_get_main_queue();
}

關于登錄：

分享和登錄采用的是同一套sdk，如果要在React Native中進第三方登錄，只需要在上述代碼中添加下面的代碼即可，方法和調用分享是一樣的，有需要的朋友可以參考登錄集成來添加一下。

// 在需要進行獲取登錄信息的UIViewController中加入如下代碼
#import <UMSocialCore/UMSocialCore.h>

- (void)getUserInfoForPlatform:(UMSocialPlatformType)platformType
{
    [[UMSocialManager defaultManager] getUserInfoWithPlatform:platformType currentViewController:self completion:^(id result, NSError *error) {

        UMSocialUserInfoResponse *resp = result;

        // 第三方登錄數(shù)據(jù)(為空表示平臺未提供)
        // 授權數(shù)據(jù)
        NSLog(@" uid: %@", resp.uid);
        NSLog(@" openid: %@", resp.openid);
        NSLog(@" accessToken: %@", resp.accessToken);
        NSLog(@" refreshToken: %@", resp.refreshToken);
        NSLog(@" expiration: %@", resp.expiration);

        // 用戶數(shù)據(jù)
        NSLog(@" name: %@", resp.name);
        NSLog(@" iconurl: %@", resp.iconurl);
        NSLog(@" gender: %@", resp.gender);

        // 第三方平臺SDK原始數(shù)據(jù)
        NSLog(@" originalResponse: %@", resp.originalResponse);
    }];
}

通過這里查看實現(xiàn)分享與第三方登錄的視頻教程

環(huán)境配置

配置SSO白名單

因為分享與登錄SDK需要進行跳轉到第三方分享與SSO授權登錄，在iOS9/10下就需要增加一個可跳轉的白名單，即LSApplicationQueriesSchemes，否則將在SDK判斷是否跳轉時用到的canOpenURL時返回NO，進而只進行webview授權或授權/分享失敗。在項目中的info.plist中加入應用白名單，右鍵info.plist選擇source code打開(plist具體設置在Build Setting -> Packaging -> Info.plist File可獲取plist路徑) 請根據(jù)選擇的平臺對以下配置進行裁剪：

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

上述代碼根據(jù)所選擇的平臺不同而略有差異，具體可參照快速集成：

通過這里查看實現(xiàn)分享與第三方登錄的視頻教程

接下來我們需要進行URL Scheme的設置：

URL Scheme

URL Scheme是通過系統(tǒng)找到并跳轉對應app的一類設置，通過向項目中的info.plist文件中加入URL types可使用第三方平臺所注冊的appkey信息向系統(tǒng)注冊你的app，當跳轉到第三方應用授權或分享后，可直接跳轉回你的app，關于URL Scheme的設置可參考URL Scheme

初始化設置

應用啟動后進行U-Share和第三方平臺的初始化工作，我們需要在AppDelegate.m進行U-Share的初始化：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self initUmeng];
}
-(void)initUmeng{
  //UMeng分享
  //打開調試日志
  [[UMSocialManager defaultManager] openLog:YES];
  
  //設置友盟appkey
  [[UMSocialManager defaultManager] setUmSocialAppkey:UM_AppKey];
  
  //設置微信的appKey和appSecret
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:AppKey_WX appSecret:AppSecret_WX redirectURL:@"http://mobile.umeng.com/social"];
  
  
  //設置分享到QQ互聯(lián)的appKey和appSecret
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:AppKey_QQ  appSecret:AppSecret_QQ redirectURL:@"http://mobile.umeng.com/social"];
  
  //設置新浪的appKey和appSecret
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:AppKey_WB  appSecret:AppSecret_WB redirectURL:@"http://sns.whalecloud.com/sina2/callback"];
}

上述代碼根據(jù)所選擇的平臺不同而略有差異，具體可參照快速集成：

另外，不要忘記在AppDelegate.m設置回調，以便分享或登錄完成之后能夠跳轉到我們的應用。

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

通過這里查看實現(xiàn)分享與第三方登錄的視頻教程

第四步：分享模塊的使用

到目前為止呢，我們的iOS分享模塊已經(jīng)創(chuàng)建好了，接下來呢我們就可以使用它了。

原生模塊導出一個js模塊

我們創(chuàng)建一個UShare.js文件，然后添加如下代碼：

import { NativeModules } from 'react-native';
module.exports = NativeModules.UShare;

這樣以來呢，我們就可以在JS模塊中來使用分享以及第三方登錄了：

import UShare from '../common/UShare'//導入UShare.js
//...省略部分代碼
UShare.share(shareApp.title, shareApp.content,
    shareApp.imgUrl,shareApp.url,()=>{},()=>{})

現(xiàn)在呢，我們已經(jīng)在React Native的iOS中集成了分享與第三方登錄的功能。如果大家在React Native中集成分享與第三方登錄過程中有更好的心得或遇到問題可以在本文的下方進行留言，我看到了后會及時回復的哦。

現(xiàn)在呢，我們已經(jīng)在React Native的iOS中集成了分享與第三方登錄的功能。另外，你也可以通過這里查看實現(xiàn)分享與第三方登錄的視頻教程。

如果大家在React Native中集成分享與第三方登錄過程中有更好的心得或遇到問題可以在本文的下方進行留言，我看到了后會及時回復的哦。
另外也可以關注我的新浪微博，或者關注我的Github來獲取更多有關React Native開發(fā)的技術干貨。

參考：React Native開發(fā)視頻教程

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

React Native 集成分享第三方登錄功能分享第三方登錄模塊開發(fā)(iOS)

React Native 集成分享第三方登錄功能分享第三方登錄模塊開發(fā)(iOS)

第一步：集成準備

第二步：集成SDK

第三步：構建分享及登錄模塊

代碼解讀：

關于登錄：

URL Scheme

第四步：分享模塊的使用

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

React Native 集成分享第三方登錄功能分享第三方登錄模塊開發(fā)(iOS)

第一步：集成準備

第二步：集成SDK

第三步：構建分享及登錄模塊

代碼解讀：

關于登錄：

URL Scheme

第四步：分享模塊的使用

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av