ReactNative支付之iOS微信支付20-05-06

写了ReactNative的微信支付，每次写都跳新的坑，所以赶紧记录一下。
看的这个文章集成的微信支付，reactnative支付宝支付看这里https://blog.csdn.net/unhappy_long/article/details/104199919
这位朋友写的很棒，跟着操作就OK了。

除了记录流程外，最后重点记录集成过程踩的坑

首先记录集成流程：

ios的导入方法

1)项目设置APPID，在Xcode中打开项目，设置项目属性中的URL Schemes为你的APPID。如图标红位置所示： image
2)添加微信白名单和修改http访问权限，默认的xcode是https的访问 image
3)添加必要的类库 这个pay相当于test，就是工程名字，不影响支付功能 image
这3个文件去微信开放平台下载
4)导入必要的库文件 image
5）在项目目录下创建Group Wxapi，并创建WxpayMoudle模块
6）编写WxpayModule.h代码如下：

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import "WXApiObject.h"
#import "WXApi.h"
 
@interface WxpayMoudle : NSObject <RCTBridgeModule, WXApiDelegate>
@end

7）编写WxpayModule.m代码如下：

#import "WxpayMoudle.h"
 
@implementation WxpayMoudle
 
RCTPromiseResolveBlock resolveBlock = nil;
 
- (instancetype)init
{
 self = [super init];
 if (self) {
   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleWXPay:) name:@"WXPay" object:nil];
 }
 return self;
}
 
- (void)dealloc
{
 [[NSNotificationCenter defaultCenter] removeObserver:self];
}
 
- (void)handleWXPay:(NSNotification *)aNotification
{
 NSString * errCode =  [aNotification userInfo][@"errCode"];
 resolveBlock(@{@"errCode": errCode});
}
 
RCT_EXPORT_METHOD(registerApp:(NSString *)APP_ID){
 [WXApi registerApp: APP_ID];//向微信注册
}
 
RCT_EXPORT_METHOD(pay:(NSDictionary *)order
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject){
 resolveBlock = resolve;
 //调起微信支付
 PayReq *req = [[PayReq alloc] init];
 req.partnerId = [order objectForKey:@"partnerId"];
 req.prepayId = [order objectForKey:@"prepayId"];
 req.nonceStr = [order objectForKey:@"nonceStr"];
 req.timeStamp = [[order objectForKey:@"timeStamp"] intValue];
 req.package = [order objectForKey:@"package"];
 req.sign = [order objectForKey:@"sign"];
 [WXApi sendReq:req];
}
 
RCT_REMAP_METHOD(isSupported, // 判断是否支持调用微信SDK
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject){
 if (![WXApi isWXAppInstalled]) resolve(@NO);
 else resolve(@YES);
}
 
RCT_EXPORT_MODULE(Wxpay);
 
@end

8)处理微信支付回调，在AppDelegate.m中添加如下代码：

//支付回调9以后
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary*)options {
 return  [WXApi handleOpenURL:url delegate:self];
}
//支付回调9以前
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
 return  [WXApi handleOpenURL:url delegate:self];
}
//ios9以后的方法
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
 return [WXApi handleOpenURL:url delegate:self];
}
 
#pragma mark - wx callback
 
- (void) onReq:(BaseReq*)req
{
 // TODO Something
}
 
- (void)onResp:(BaseResp *)resp
{
 //判断是否是微信支付回调 (注意是PayResp 而不是PayReq)
 if ([resp isKindOfClass:[PayResp class]])
 {
   //发出通知 从微信回调回来之后,发一个通知,让请求支付的页面接收消息,并且展示出来,或者进行一些自定义的展示或者跳转
   NSNotification * notification = [NSNotification notificationWithName:@"WXPay" object:nil userInfo:@{@"errCode":@(resp.errCode)}];
   [[NSNotificationCenter defaultCenter] postNotification:notification];
 }
}

致此微信支付的相关原生功能模块都写好了，android和ios的。接下来要react-native去调用这些原生的功能方法。react-native怎么和原生交互请看官方文档: image

第三步 react-native 端
1）修改原生代码后，需要重新打包运行程序：

react-native run-android # 运行Android端
react-native run-ios # 运行iOS端

2）编写Wxpay.js工具类

import { NativeModules } from 'react-native';
export default NativeModules.Wxpay;

3）在入口文件index.js向微信注册应用

import Wxpay from './your/path/to/Wxpay';
Wxpay.registerApp(APPID); //向微信注册

4）调用Wxpay模块发起微信支付：

import Wxpay from './your/path/to/Wxpay';
 
 
async pay(params) { // params 为后端提供的参数
    let isSupported = await Wxpay.isSupported();
    if (!isSupported) { // 判断是否支持微信支付
      alertModel('找不到微信应用，请安装最新版微信');
      return;
    }
    let ret = await Wxpay.pay(params); // 调起微信客户端，发起支付
    if (ret.errCode === 0) {
      // 支付成功回调
       alertModel('支付成功');
    } else {
      // 支付失败回调
      alertModel('支付失败');
    }
  }
 
服务端返回的params数据结构如
{
    "appId": "wx28f86efd23cc3dse",
    "partnerId": "1494562862",
    "prepayId": "wx24153040008020562a5d00291301203432",
    "nonceStr": "d7c18718502a444a1a88227b0915de84",
    "timeStamp": "1524555040",
    "package": "Sign=WXPay",
    "sign": "44718752BAC35C8C29896F7707A96A77"
}

OK 流程抄完了。。but,你懂的，成年人的世界没有那么顺利。接下来填坑

1.首先会报个错

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_WKWebView", referenced from:
      objc-class-ref in libWeChatSDK.a(WapAuthHandler.o)
  "_OBJC_CLASS_$_WKWebViewConfiguration", referenced from:
      objc-class-ref in libWeChatSDK.a(WapAuthHandler.o)
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

大概就是缺WKWebView的配置，虽然我没用WKWebView。。。这时需要到Xcode添加

截屏2020-05-06 19.05.09.png
2.这时还是不得行，然后发现下的库比较新儿代码比较老。。
这时需要把
[WXApi registerApp: "wxfd0426203eb8bc6c"];这行代码换成

[WXApi registerApp:@"wx0109800154cca3a7" universalLink:@"https://"];

然后把[WXApi sendReq:req];这行代码换成

[WXApi sendReq:req completion:^(BOOL success) {   
  }];

3.然后发现还是不得行发现少了这个：
在AppDelegate.m中引入WXApi.h及代理

截屏2020-05-06 19.11.58.png
4.然而还是不得行。。。
就找资料啊
然后就发现了iOS13适配篇：微信openSDK1.8.6更新导致不能进行微信登录和分享问题解决方案这个文章，简直是救星啊，感谢！根据该文章的第[4]条，在xcode的TARGETS的Info下添加weixinULAPI
截屏2020-05-06 19.18.01.png
后来终于调起了微信支付。加油~~