基于react native的ios原生微信客服，微信支付以及判断是否安装微信

微信open SDK

环境

RN@0.73.6 React@18.2 XCode@15.3

引入SDK：WechatOpenSDK-XCFramework.xcframework

xcode配置请按照ios接入指南

ios 创建CustomerServiceChat类

CustomerServiceChat.h

#import <React/RCTBridgeModule.h>
#import <WXApi.h>

@interface CustomerServiceChat : NSObject <RCTBridgeModule, WXApiDelegate>

@property (nonatomic, copy) RCTPromiseResolveBlock savedResolve;
@property (nonatomic, copy) RCTPromiseRejectBlock savedReject;

@end

CustomerServiceChat.m

#import "CustomerServiceChat.h"
#import <React/RCTLog.h>

#define APP_ID @"wx"
#define UNIVERSAL_LINK @"https://xxx.com/"

@implementation CustomerServiceChat

#define NOT_REGISTERED (@"registerApp required.")
#define INVOKE_FAILED (@"WeChat API invoke returns false.")

RCT_EXPORT_MODULE();

//微信客服
RCT_EXPORT_METHOD(open:(NSString *)corpId url:(NSString *)url
                  resolve:(RCTPromiseResolveBlock)resolve
                                   reject:(RCTPromiseRejectBlock)reject)
{
  RCTLogInfo(@"Pretending to create an event %@ at %@", corpId, url);
  // 注册微信
  [WXApi registerApp:APP_ID universalLink:UNIVERSAL_LINK];
  NSLog(@"compare result %@",@"start time < end time");
  NSDictionary *object = @{
      @"corpId": corpId,
      @"url": url
    };
    
    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:object options:0 error:nil];
    NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];

    resolve(jsonString);
  
  WXOpenCustomerServiceReq *req = [[WXOpenCustomerServiceReq alloc] init];
        req.corpid = corpId;  //企业ID
        req.url = url;      //客服URL
    return [WXApi sendReq:req completion:nil];

}

//判断是否安装微信app
RCT_EXPORT_METHOD(isWeChatInstalled:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
    dispatch_async(dispatch_get_main_queue(), ^{
        if ([WXApi isWXAppInstalled]) {
            resolve(@"ok");
        } else {
            resolve(@"no");
        }
    });
}


//微信支付(暂时没有微信支付回调，请服务端写接口监听支付状态)
RCT_EXPORT_METHOD(pay:(NSDictionary *)data
    resolve:(RCTPromiseResolveBlock)resolve
    reject:(RCTPromiseRejectBlock)reject)
{
      // 注册微信
      [WXApi registerApp:APP_ID universalLink:UNIVERSAL_LINK];
    
      PayReq* req             = [PayReq new];
      req.partnerId           = data[@"partnerId"];
      req.prepayId            = data[@"prepayId"];
      req.nonceStr            = data[@"nonceStr"];
      req.timeStamp           = [data[@"timeStamp"] unsignedIntValue];
      req.package             = data[@"package"];
      req.sign                = data[@"sign"];
      void ( ^ completion )( BOOL );
      completion = ^( BOOL success )
      {
        resolve(@[success ? [NSNull null] : INVOKE_FAILED]);
        return;
      };
      [WXApi sendReq:req completion:completion];
  
  
}


@end

AppDelegate.h

#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import "WXApi.h"

@interface AppDelegate : RCTAppDelegate<WXApiDelegate>

@end

##AppDelegate.mm

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTLinkingManager.h>

#ifdef NSFoundationVersionNumber_iOS_9_x_Max
#import <UserNotifications/UserNotifications.h>
#endif


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"BanDaiMatch";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self getBundleURL];
}

- (NSURL *)getBundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

//weixin
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
    return  [WXApi handleOpenURL:url delegate:self];
}

- (BOOL)application:(UIApplication *)application
  continueUserActivity:(NSUserActivity *)userActivity
  restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable
  restorableObjects))restorationHandler {
  // 触发回调方法
  [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
  return [WXApi handleOpenUniversalLink:userActivity
  delegate:self];
}


@end

react native端调用

创建wxCustomer.js用于架起桥梁连接ios原生代码

import {NativeModules} from 'react-native';

export default NativeModules.CustomerServiceChat;