作者:流域 | 来源:互联网 | 2023-08-19 15:02
序言:ReactNative无论是在社区和应用程度上,在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持,虽然没有完整的Demo,不过在我做过一个相关集成的项目后,在
序言:React Native无论是在社区和应用程度上,在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持,虽然没有完整的Demo,不过在我做过一个相关集成的项目后,在此我把相关的步骤和方法总结出来和大家分享,希望能够帮助大家少走弯路,快速集成。
微信支付——IOS集成
一、IOS配置
相较于支付宝,微信在IOS端的集成要简单的多,可以参考官方文档,但是有几个坑需要注意一下,接下来请跟着以下步骤来实现:
1. 打开XCode,并且打开该项目,添加"URL Schema"值,如下图:
2.打开Build Phases添加以下依赖
3.在AppDelegate.m中,添加以下代码(由于我们先前集成了支付宝,所以部分代码需要进行修改):
#import
- (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 *)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 进行沟通交流学习
源码:https://github.com/likeconan/Alipay_Wechat_Integration