1. 程式人生 > >React Native (IOS和Android) 支付寶和微信支付整合實戰(微信IOS篇)

React Native (IOS和Android) 支付寶和微信支付整合實戰(微信IOS篇)

序言React Native無論是在社群和應用程度上,在國內外是十分廣泛和普及的。而支付寶和微信在支付模組上都有或多或少的支援,雖然沒有完整的Demo,不過在我做過一個相關整合的專案後,在此我把相關的步驟和方法總結出來和大家分享,希望能夠幫助大家少走彎路,快速整合。

微信支付——IOS整合

一、IOS配置

相較於支付寶,微信在IOS端的整合要簡單的多,可以參考官方文件,但是有幾個坑需要注意一下,接下來請跟著以下步驟來實現:

1. 開啟XCode,並且開啟該專案,新增"URL Schema"值,如下圖:


2.開啟Build Phases新增以下依賴


3.在AppDelegate.m中,新增以下程式碼(由於我們先前集成了支付寶,所以部分程式碼需要進行修改):

#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  
  if ([url.host isEqualToString:@"safepay"]) {
    //跳轉支付寶錢包進行支付,處理支付結果
    [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) {
      NSLog(@"result = %@",resultDic);
    }];
    return YES;
  }else{
    return [RCTLinkingManager application:application openURL:url
                        sourceApplication:sourceApplication annotation:annotation];
  }

}

// NOTE: 9.0以後使用新API介面
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
  if ([url.host isEqualToString:@"safepay"]) {
    //跳轉支付寶錢包進行支付,處理支付結果
    
    [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) {
      NSLog(@"result = %@",resultDic);
    }];
    
    return YES;
  }else{
    return [RCTLinkingManager application:app openURL:url options:options];
    
  }
  
}

4. 按照官方的文件,此時應該一切準備完畢,但是實際上當你執行的時候,會出現這樣類似的報錯,之所以這樣,是因為還未新增完整wechat的依賴


接著你應該展開Libraries資料夾,然後新增RCTWechat.xcodeproj,RCTWechat.xcodeproj在/node_modules/react-native-wechat/ios/ 資料夾下,如下圖


然後開啟Build Phases,將libRCTWeChat.a拖入依賴中,如圖:


二、React Native呼叫方法

由於react-native-wechat已經幫我們整合完畢,所以IOS端和Android端前端方法一致,無需進行其他修改。至此react native IOS端的整合已經完畢了。

鳴謝:我是一名來自盛安德的Shinetecher,感謝盛安德公司及同事們對IT技術的支援,分享和熱情,讓我有時間和動力完成此博文。

聯絡:歡迎各位朋友有任何問題和建議留言至此部落格下,或者新增本人微訊號:liyijia428 進行溝通交流學習