最近公司在做一個(gè)APP項(xiàng)目,還是考慮到成本問(wèn)題,So,技術(shù)上又一次選擇了RN,考慮到項(xiàng)目功能上有第三方分享、第三方登陸、消息推送等高大上的功能,由于之前做過(guò)一次分享,用的是網(wǎng)友封裝的友盟的分享,于是去官網(wǎng)看了下文檔,驚奇的發(fā)現(xiàn)友盟已經(jīng)專門集成了用于RN的SDK,并且分享、授權(quán)登陸、推送都有,不禁竊喜。就這樣愉快的選擇友盟了!
接下來(lái)就是去下載集成SDK了。
一、首先是集成分享和登陸
分享和登陸的具體集成在這篇文章里面。。
1、下載相關(guān)SDK
1.1、下載用于友盟集成的RN SDK
1.2、下載UMCommon.framework
注: 這個(gè)記得一定要下載iOS選項(xiàng)下面的SDK,后面集成的時(shí)候會(huì)用到,之前按教程集成的時(shí)候沒(méi)有找到這個(gè)文件,就去友盟github的demo里面復(fù)制了這個(gè)文件,結(jié)果在集成的時(shí)候由于不是最新的版本,導(dǎo)致在Xcode10上面一直閃退,崩潰提示是
[<UIStatusBarTimeItemView 0x101c29cd0> valueForUndefinedKey:]: this class is not key value coding-compliant for the...
,后面的朋友如果碰到iOS升級(jí)之后項(xiàng)目編譯異常的也可以考慮升級(jí)SDK試試。
2、使用Xcode進(jìn)行集成iOS系統(tǒng)
2.1、首先進(jìn)入項(xiàng)目的ios目錄,進(jìn)入對(duì)應(yīng)的工程名目錄,新建兩個(gè)文件夾:UMReactBridge
和UMComponents
2.2、將1.2
步驟下載的文件iOS目錄下的common中的framework,拷入UMComponents
中。
將1.1
步驟下載的文件iOS目錄下中share目錄中的最后所有文件,拷入UMComponents
中的新建文件夾UMShare
中,在將push文件里最后的所有文件拷入UMComponents
文件夾中??聪聢D:
集成之后在xcode中的目錄結(jié)構(gòu)是這樣的:
2.3、進(jìn)入1.1
步驟下載文件的ReactNative目錄,找到common、 share、push
目錄中對(duì)應(yīng)的common_ios
平臺(tái)中的橋接.h 和 .m
文件,全部拷貝至我們項(xiàng)目剛剛新建的UMReactBridge
文件夾中,看下圖:
集成之后xcode中的目錄結(jié)構(gòu)為:
2.4、在xcode
中打開(kāi)工程目錄,右鍵黃色項(xiàng)目名Add Files to "xxx"
,options
中選中Create groups 、 Copy items if needed
找到我們新建的UMReactBridge
和UMComponents
,最后點(diǎn)擊add
添加??聪聢D
2.5、##
Linked Frameworks and Libraries
加入系統(tǒng)依賴庫(kù):可參照鏈接
libsqlite3.tbd
CoreGraphics.framework
SystemConfiguration.framework
CoreTelephony.framework
libc++.tbd
libz.tbd
2.6 配置SSO白名單,右鍵info.plist選擇source code打開(kāi)(plist具體設(shè)置在Build Setting -> Packaging -> Info.plist File可獲取plist路徑)請(qǐng)根據(jù)選擇的平臺(tái)對(duì)以下配置進(jìn)行裁剪:
<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>
<!-- 點(diǎn)點(diǎn)蟲(chóng) 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>fbauth2</string>
<string>fbshareextension</string>
<!-- Kakao URL Scheme 白名單-->
<!-- 注:以下第一個(gè)參數(shù)需替換為自己的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>
2.7、配置URL Scheme
URL Scheme是通過(guò)系統(tǒng)找到并跳轉(zhuǎn)對(duì)應(yīng)app的一類設(shè)置,通過(guò)向項(xiàng)目中的info.plist文件中加入U(xiǎn)RL types可使用第三方平臺(tái)所注冊(cè)的appkey信息向系統(tǒng)注冊(cè)你的app,當(dāng)跳轉(zhuǎn)到第三方應(yīng)用授權(quán)或分享后,可直接跳轉(zhuǎn)回你的app。
2.8 初始化AppDelegate.m
設(shè)置友盟appkey
和appSecret(如果有推送功能的話需要加)
以及各個(gè)平臺(tái)的appkey
和secret
.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
/* 打開(kāi)調(diào)試日志 */
[[UMSocialManager defaultManager] openLog:YES];
/* 設(shè)置友盟appkey */
[RNUMConfigure initWithAppkey:@"5bd*********0db" channel:@"App Store"];
/*
* 關(guān)閉強(qiáng)制驗(yàn)證https,可允許http圖片分享,但需要在info.plist設(shè)置安全域名
*/
[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;
/*
設(shè)置微信的appKey和appSecret
[微信平臺(tái)從U-Share 4/5升級(jí)說(shuō)明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_1
*/
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxd******" appSecret:@"e7b246a7bdcfe75100e77eb9e999bf37" redirectURL:nil];
/* 設(shè)置分享到QQ互聯(lián)的appID
* U-Share SDK為了兼容大部分平臺(tái)命名,統(tǒng)一用appKey和appSecret進(jìn)行參數(shù)設(shè)置,而QQ平臺(tái)僅需將appID作為U-Share的appKey參數(shù)傳進(jìn)即可。
100424468.no permission of union id
[QQ/QZone平臺(tái)集成說(shuō)明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_3
*/
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"*****"/*設(shè)置QQ平臺(tái)的appID*/ appSecret:@"*******" redirectURL:@"http://mobile.umeng.com/social"];
// Push's basic setting 推送設(shè)置!!
UMessageRegisterEntity * entity = [[UMessageRegisterEntity alloc] init];
//type是對(duì)推送的幾個(gè)參數(shù)的選擇,可以選擇一個(gè)或者多個(gè)。默認(rèn)是三個(gè)全部打開(kāi),即:聲音,彈窗,角標(biāo)
entity.types = UMessageAuthorizationOptionBadge|UMessageAuthorizationOptionAlert|UMessageAuthorizationOptionSound;
[UNUserNotificationCenter currentNotificationCenter].delegate=self;
[UMessage registerForRemoteNotificationsWithLaunchOptions:launchOptions Entity:nil completionHandler:^(BOOL granted, NSError * _Nullable error) {
if (granted) {
NSLog(@"deviceToken+++++++++");
} else {
}
}];
return YES;
}
//從支付、分享、第三方登陸等跳轉(zhuǎn)會(huì)本APP時(shí)的回調(diào),必須實(shí)現(xiàn),否則收不到分享成功時(shí)的回調(diào)?。。?!
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
if (!result) {
// 其他如支付等SDK的回調(diào)
}
return result;
}
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
if (!result) {
// 其他如支付等SDK的回調(diào)
}
return result;
}
2.9、提供給RN調(diào)用的方法在UMShareModule.m
中查看.
2.10、進(jìn)入下載目錄的ReactNative
找到common
下的js
中的ShareUtil.js(包含分享和登陸的方法)
,拷貝到我們RN
目錄下,即可在RN中導(dǎo)入使用分享的方法啦。
2.11、在RN中調(diào)用
import ShareUtil from './ShareUtil';
//分享
ShareUtile.shareboard(text,img,url,title,list,(code,message) =>{
if (code == 200){
this.setState({result:message});
}
});
text 為分享內(nèi)容
img 為圖片地址,可以為鏈接,本地地址以及res圖片(如果使用res,請(qǐng)使用如下寫(xiě)法:res/icon.png)
url 為分享鏈接,可以為空
title 為分享鏈接的標(biāo)題
list 為分享平臺(tái)數(shù)組,如:var list = [0,1,2]
callback中code為錯(cuò)誤碼,當(dāng)為0時(shí),標(biāo)記成功。message為錯(cuò)誤信息
//第三方登陸
ShareUtile.auth(0,(code,result,message) =>{
if (code == 200){// iOS平臺(tái)
//登陸成功,返回第三方賬號(hào)的信息,
//比如openID、nickName、headPath等信息,這時(shí)就可以傳給自己的后臺(tái)小伙伴入庫(kù)啦!!!
}
});
注:android與ios平臺(tái)成功回調(diào)中的code值不一致,ios成功時(shí)code===200,android成功時(shí)code===0,文檔寫(xiě)的是0,當(dāng)時(shí)還被小坑啦一把。
至此iOS端端分享和登陸已經(jīng)完畢,至于安卓端集成由于同事負(fù)責(zé),在此先不記錄,后面會(huì)自己集成一遍。
二、集成遠(yuǎn)程推送功能
SDK端集成已經(jīng)在分享和登陸步驟中已經(jīng)集成,都有截圖參考,下面直接進(jìn)入功能實(shí)現(xiàn)步驟吧:
開(kāi)始前的幾點(diǎn)說(shuō)明:
- 其實(shí)對(duì)于推送功能,本質(zhì)還是集成原生系統(tǒng)端推送功能,大部分代碼邏輯還是在原生端實(shí)現(xiàn),比如 注冊(cè)推送權(quán)限、獲取DeviceToken、設(shè)置推送提醒的類型,設(shè)置收到推送時(shí)的回調(diào)等。
-
比較煩的是對(duì)推送證書(shū)的配置,注: 如果做推送的話必須是付費(fèi)的開(kāi)發(fā)者賬號(hào)生成證書(shū)才可以,否則在Xcode里設(shè)置開(kāi)啟推送權(quán)限的時(shí)候會(huì)找不到該菜單項(xiàng)。看下圖
image.png - 具體的集成步驟以及證書(shū)生成參考友盟官網(wǎng)教程:
證書(shū)配置
集成步驟 - 在推送的時(shí)候,可以通過(guò)設(shè)置不通的tag值對(duì)用戶分組進(jìn)行推送,也可以通過(guò)用戶id進(jìn)行精準(zhǔn)推送,RN也提供來(lái)對(duì)應(yīng)的方法 PushUtil.addTag(tag,(code,remain) =>{ })和PushUtil.addAlias(alias,type,(code) =>{ }),具體參考文檔。
- 還有待優(yōu)化的功能: 關(guān)于iOS如何在接收到推送后打開(kāi)指定頁(yè)面, 官方給的地址以及找不到了, 我自己的實(shí)現(xiàn)方法是在原生端收到推送消息后參考RN文檔中原生端調(diào)用RN的方法使用通知來(lái)實(shí)現(xiàn),期待朋友們有好的方法,期待賜教。
推送主要代碼:
AppDelegate.h
頁(yè)面
#import <UIKit/UIKit.h>
#import <UMPush/UMessage.h>
//?。。?!一定要實(shí)現(xiàn)這個(gè)代理方法 :UNUserNotificationCenterDelegate
@interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
AppDelegate.m
頁(yè)面
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNUMConfigure.h"
#import <UMShare/UMShare.h>
#import "YouMengNotice.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Push's basic setting
UMessageRegisterEntity * entity = [[UMessageRegisterEntity alloc] init];
//type是對(duì)推送的幾個(gè)參數(shù)的選擇,可以選擇一個(gè)或者多個(gè)。默認(rèn)是三個(gè)全部打開(kāi),即:聲音,彈窗,角標(biāo)
entity.types = UMessageAuthorizationOptionBadge|UMessageAuthorizationOptionAlert|UMessageAuthorizationOptionSound;
// 需要實(shí)現(xiàn)代理,用于下面代理方法的實(shí)現(xiàn)。
[UNUserNotificationCenter currentNotificationCenter].delegate=self;
[UMessage registerForRemoteNotificationsWithLaunchOptions:launchOptions Entity:nil completionHandler:^(BOOL granted, NSError * _Nullable error) {
if (granted) {
NSLog(@"deviceToken+++++++++");
} else {
}
}];
}
#pragma mark - Push
//在這個(gè)方法打印出 deviceToken, 便于在友盟后臺(tái)添加測(cè)試設(shè)備進(jìn)行測(cè)試
-(void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{
[UMessage registerDeviceToken:deviceToken];
NSLog(@"deviceToken+++++++++%@",[[[[deviceToken description] stringByReplacingOccurrencesOfString: @"<" withString: @""]
stringByReplacingOccurrencesOfString: @">" withString: @""]
stringByReplacingOccurrencesOfString: @" " withString: @""]);
}
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error{
}
// 次方法在iOS10以后,已經(jīng)不再支持
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
{
//關(guān)閉友盟自帶的彈出框
[UMessage setAutoAlert:NO];
[UMessage didReceiveRemoteNotification:userInfo];
[YouMengNotice OCsendMessageToReactNative:userInfo];
}
//iOS10新增:處理前臺(tái)收到通知的代理方法
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler{
NSDictionary * userInfo = notification.request.content.userInfo;
if([notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
//應(yīng)用處于前臺(tái)時(shí)的遠(yuǎn)程推送接受
//關(guān)閉友盟自帶的彈出框
[UMessage setAutoAlert:NO];
//必須加這句代碼
[UMessage didReceiveRemoteNotification:userInfo];
// 在這里自己實(shí)現(xiàn)來(lái)在接收到遠(yuǎn)程推送時(shí),主動(dòng)調(diào)用RN端的,把通知內(nèi)容傳給RN,這樣就可以控制RN收到推送時(shí)跳轉(zhuǎn)到指定頁(yè)面來(lái)。
[YouMengNotice OCsendMessageToReactNative:userInfo];
}else{
//應(yīng)用處于前臺(tái)時(shí)的本地推送接受
}
completionHandler(UNNotificationPresentationOptionSound|UNNotificationPresentationOptionBadge|UNNotificationPresentationOptionAlert);
}
//iOS10新增:處理后臺(tái)點(diǎn)擊通知的代理方法
//這個(gè)方法是在APP接收到通知之后,點(diǎn)擊通知欄跳轉(zhuǎn)到APP時(shí)才調(diào)用的, 注意::!!如果直接點(diǎn)擊APP是沒(méi)用的
//知識(shí)點(diǎn)??! iOS的通知 分APP在前臺(tái)時(shí)顯示和點(diǎn)擊通知欄跳轉(zhuǎn)到APP顯示, 如果直接點(diǎn)擊APP的話是不會(huì)走上面的兩個(gè)回調(diào)方法的,之前理解錯(cuò)誤
-(void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler{
NSDictionary * userInfo = response.notification.request.content.userInfo;
if([response.notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
//應(yīng)用處于后臺(tái)時(shí)的遠(yuǎn)程推送接受
//必須加這句代碼
[UMessage didReceiveRemoteNotification:userInfo];
[YouMengNotice performSelector:@selector(OCsendMessageToReactNative:) withObject:userInfo afterDelay:15];
// [YouMengNotice OCsendMessageToReactNative:userInfo];
}else{
//應(yīng)用處于后臺(tái)時(shí)的本地推送接受
}
}
RN端實(shí)現(xiàn):
import PushUtil from "../Tools/PushUtil.js";
import { NativeModules, NativeEventEmitter } from "react-native";
const { YouMengNotice } = NativeModules;
const myNativeEvt = new NativeEventEmitter(YouMengNotice); //創(chuàng)建自定義事件接口
componentDidMount() {
//收到原生端發(fā)來(lái)的推送消息,這里處理頁(yè)面跳轉(zhuǎn)邏輯
myNativeEvt.addListener("OCSendToRN", (e) => {
console.log("原生端的消息");
msg(JSON.stringify(e));
});
//添加tag,即分組,在推送時(shí)可以對(duì)不同分組用戶進(jìn)行推送
// PushUtil.addTag("ccj",(code, res) =>{
// Alert.alert("提示", ""+code+JSON.stringify(res));
// })
PushUtil.addTag("個(gè)人用戶", (code, res) => {
// Alert.alert("提示", ""+code+JSON.stringify(res));
});
}
原生與RN交互參考:
http://www.lxweimin.com/p/91bc0dea6821(在iOS12測(cè)試可以)
http://www.lxweimin.com/p/99c32dc5cf29
https://blog.csdn.net/teagreen_red/article/details/79392477
參考:
http://www.lxweimin.com/p/d54b259f7cb0
http://www.lxweimin.com/p/32edded653ab
https://www.cnblogs.com/czq1989/p/5098871.html
推送注意事項(xiàng):http://www.lxweimin.com/p/e5a45a7e80a7