React Native with Expokit 集成Ping++调用支付宝微信支付完全攻略

2023年4月4日 386次阅读 来源: Ray Bao

最近开发项目需要在Expo项目中添加支付宝和微信的支付支持，后台已经实现了Ping++ SDK，接下来我会把我的解决步骤记录下来。（不讨论后端实现）

环境

OS: macOS mojave
node version: 11.1.0
expo sdk: 32.0.0（31.0.0也测试通过）
pingpp: pingpp-react-native:^1.0.3
Android Studio: 3.2.1
Xcode: 10.1

第一步 把Expo项目分离成为带 expokit 的 react native项目

可能需要科学上网

Ejecting to ExpoKit​ docs.expo.io

第二步 安装并连接pingpp-react-native到项目

安装

npm install pingpp-react-native --save
或
yarn add pingpp-react-native

连接

react-native link pingpp-react-native
(如果没有则需要安装react-native-cli组件
yarn add react-native-cli)

第三步 分别配置项目下ios和android

iOS配置

用xcode打开项目下ios目录下的 ——.xcworkspace 文件，TARGET -> General -> Linked Frameworks and Libraries ，添加添加所需依赖 Frameworks：

CFNetwork.framework 
SystemConfiguration.framework 
Security.framework 
QuartzCore.framework 
CoreTelephony.framework 
CoreMotion.framework 
CoreLocation.framework 
libc++.tbd 
libz.tbd

iOS 9 以上版本如果需要使用支付宝和微信渠道，需要在 Info.plist 添加以下代码：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>wechat</string>
  <string>alipay</string>
  <string>alipays</string>
</array>

为了用户操作完成后能够跳转回你的应用，请务必添加 URL Schemes：在 Xcode 中，选择你的工程设置项，选中 TARGETS 一栏，在 Info 标签栏的 URL Types 添加 URL Schemes，如果使用微信，填入微信平台上注册的应用程序 id（为 wx 开头的字符串）。如果不使用微信，则自定义，建议起名稍复杂一些，尽量避免与其他程序冲突。允许英文字母和数字，首字母必须是英文字母，不允许特殊字符。

iOS 9 限制了 http 协议的访问，如果 App 需要访问 http://，需要在 Info.plist 添加如下代码：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

渠道为百度钱包或者渠道为支付宝但未安装支付宝钱包时，交易结果会在调起插件时的 Completion 中返回。渠道为微信、支付宝(安装了支付宝钱包)、银联或者测试模式时，请实现 UIApplicationDelegate 的 – application:openURL:xxxx: 方法: 打开 AppDelegate.m，添加一个函数来触发支付完成后的回调

//iOS 8 及以下 
- (BOOL)application:(UIApplication *)application             
openURL:(NSURL *)url   
sourceApplication:(NSString *)sourceApplication          
annotation:(id)annotation {     
  BOOL canHandleURL = [Pingpp handleOpenURL:url withCompletion:nil];     
  return canHandleURL; 
} 
//iOS 9 及以上 
- (BOOL)application:(UIApplication *)app             
openURL:(NSURL *)url             
options:(NSDictionary *)options {     
  BOOL canHandleURL = [Pingpp handleOpenURL:url withCompletion:nil];     
  return canHandleURL; 
}

如果出现找不到Pingpp依赖

请在头部添加

import "/*把Libraries->PingppModule.xcodeproj->PingppModule->lib->Pingpp.h拖入到这个双引号中*/"

android配置

使用android studio打开项目下的android目录，等待gradle同步。

如果有提示升级gradle，请忽略不要升级。

注册Activity

<!-- Ping++ SDK -->
 <activity
     android:name="com.pingplusplus.android.PaymentActivity"
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"
     android:launchMode="singleTop"
     android:theme="@android:style/Theme.Translucent.NoTitleBar" >
 </activity>

 <!-- 微信支付 sdk ，也是 Ping++ sdk 调用入口 -->
 <activity-alias
     android:name="<!-- 此处填入你的android包名例如com.xxx.rnapp -->.wxapi.WXPayEntryActivity"
     android:exported="true"
     android:targetActivity="com.pingplusplus.android.PaymentActivity" />
 <!-- 支付宝 sdk -->
 <activity
     android:name="com.alipay.sdk.app.H5PayActivity"
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"
     android:exported="false"
     android:screenOrientation="behind" >
 </activity>
 <activity
     android:name="com.alipay.sdk.auth.AuthActivity"
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"
     android:exported="false"
     android:screenOrientation="behind" >
 </activity>

上面有官方文档没有提及的地方，由于Expo转Expokit项目的特殊性，在微信支付 sdk下的activity-alias标签下的android:name中请在.wxapi前填入你的android包名（如果不知道是什么请查看项目根路径下的app.json配置下的android->package字段）。

打开app下的build.gradle

修改release字段下的minifyEnabled，由true改为false

（此处困扰我好久，因为还是对原生开发不了解）

配置完毕，但是编译时可能会出现的错误：

  1. android studio编译出现 AAPT2 error

在gradle.properties文件中填入如下一行

android.enableAapt2=false

2. android studio其他编译错误

在Android Studio->Preferences->Build, Excution, Deployment->Instant Run下把Enable Instant Run … （第一个勾）取消勾选。

3. xcode编译时出现如下错误

'React/RCTBridgeModule.h' file not found

点击左侧target -> PingppModule.xcodeproj

在右侧 Build Settings ->Search Paths -> Header Search Paths 更改为你的项目路径下 /*你的项目路径*/node_modules/react-native/React/ 路径绝对地址

然后把报错行 import <React/RCTBridgeModule.h>

修改为 import “RCTBridgeModule.h”

大概有两到三处,做同样处理即可

重新编译可解决

4. android studio编译出现如下错误

Process 'command './node_modules/expokit/detach-scripts/run-exp.sh'' finished with non-zero exit value 1

编译前需运行

expo start

和

expo publish

5. ios运行时无法跳转微信支付

在target 项目 设置-> Info -> URL Types 下添加一个

在Url Schemes中填入你在微信开放平台申请的AppID，此id一般以wx开头

    原文作者：Ray Bao
    原文地址: https://zhuanlan.zhihu.com/p/57090005
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞