Taro-RN使用 react-native-wechat-lib 集成微信支付-IOS(从微信注册应用到应用接入微信支付)全*

壮士阿

已于 2022-02-07 13:29:44 修改

阅读量2.3k

点赞数 1

文章标签： ios 微信 react native taro 微信支付

于 2021-10-13 11:32:25 首次发布

本文链接：https://blog.csdn.net/qq_39580561/article/details/120737526

版权

组件库版本

“@tarojs/taro”: “3.3.9”,
“@tarojs/taro-rn”: “^3.3.9”,
“react”: “^17.0.0”,
“react-native”: “^0.64.0”,
“react-native-wechat-lib”: “^1.1.26”, （库地址）
iOS SDK 1.8.7.1
Android SDK 5.5.6
Xcode V13.0

😎😎😎😎😎😎😎😎😎😎😎😎😎😎😎起点😎😎😎😎😎😎😎😎😎😎😎😎😎😎
首先要去微信开发平台申请应用，ios应用需要增加Universal Links，也就是唤醒app文件，操作步骤如下或者参考相关文章参考地址：

增加APP唤醒文件Universal Links

（如果Universal Links已经配置完成，可以直接跳转到操作步骤进行项目配置）

第一步，进入苹果开发者中心，选择【Certificates,identifiers&Profiles】
选择【Identifiers】,从当中找到与app相同的【Bundle ID】
进入后将APP的【Team ID（App ID）】保存下来【同一账号的Team ID都是相通的】
向下翻，打开【Associated Domains】（目前来看都是默认打开的，没打开钩上就行）
在本地新建文件，文件名为【apple-app-site-association】，没有后缀
打开文件，将下面的代码复制进去，将第3步的【Team ID】与第2步的【Bundle ID】添加进去，并用小数点符号连接，例如“appID”: “7A4FGS.com.aaa.app”。

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "将第3步的Team ID放这里.将第2步的Bundle ID放这里",
        "paths": [ "*" ] //相关注意事项见下文
      }
    ]
  }
}

在这里注意paths，建议Universal Links配置path，例如 ["/sdksample/*"] 避免全域命中Universal Links跳转
以SDK Sample配置为例:

{ "appID": "teamID.com.tencent.xin.SDKSample", "paths": ["/sdksample/*"] }

测试配置是否成功:
1） Safari输入Universal Links(包括完整路径)+随机字符串(例如: abc)
SDK Sample的Universal Links：
在浏览器地址栏输入 https://help.wechat.com/sdksample/
2）下拉页面检查是否有打开app的入口提示(如下图),如果有提示，说明配置成功

7.将【apple-app-site-association】文件保存好放到后台

注意事项：
a. 一定是有https服务
b. 一定要将【apple-app-site-association】文件放在根目录或者.well-known目录下（需要新建.well-known文件）
c. 打开以下【文件地址】会直接下载该文件或者直接显示该文件内容
d. 不能有端口号！
【例如： https://aaa.github.io/apple-app-site-association】
【例如：https://aaa/github.io/.well-known/apple-app-site-association】

8.如果要配置多个APP，只需要继续在“details”中添加就好了，“details”是个数组(注意path，每个app都应有一个属于自己的paths)

例如
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "8888SSS.com.aaa.jd",
        "paths": [ "/aaa/*" ]
      },
      {
        "appID": "8888SSS.com.bbb.jd",
        "paths": [ "/bbb/**" ]
      },
      {
        "appID": "8888SSS.com.ccc.jd",
        "paths": [ "/ccc/**" ]
      }
    ]
  }
}

8.做完以上操作，Universal Links的基本配置就完成了，接下来将进行测试，进入测试页面苹果官方测试页面
在这里插入图片描述
9. 将刚刚配置好并放到服务器上的【apple-app-site-association】文件域名粘贴到输入框中，例如【https://aaa.github.io】，然后点击【Test URL】注意事项：不能有文件路径，要带上https 例如【https://aaa.github.io】
10. 翻到底部，如果出现下面图片说明测试成功
在这里插入图片描述
注意【如果有的时候出现{404，500，503}等等等状况有可能是网络问题，不用紧张】

配置Xcode项目中的Universal Links。进入到项目中选择【Signing & Capabilities】，在点击左上角加号【Capability】
选择【Associated Domains】然后在里面添加一项，【applinks: 域名】。例如【applinks:github.ios】。注意前面需要加【applinks:】，不能有【https://】，不能有路径，注意结尾不要有【/】
现在Universal Links已经配置成功了，测试项目是否配置成功
重新将App打包安装到手机上
将文件地址粘贴到Safari浏览器中，例如：【https://aaa.github.io】,并进入页面
然后向下滑动页面，就会出现提示在APP中打开，点击后能跳转到APP即可
最后，你的app的Universal Links就为：【https://aaa.github.io】
在开发者中心注册微信应用时，需要添加Universal Links，但是微信要求以“/”结尾，那么应该填【https://aaa.github.io】
同样，App内使用微信SDK注册时，开发者中心填的啥，这里的Universal Links就填一样的

举例配置：
微信开放平台Universal Links：【https://aaa.github.io/】
Xcode中Targets Domains：【applinks:aaa.github.io】
APP启动时，微信SDK进行注册Universal Links：【https://aaa.github.io/】

补充：Paths路径的用法
1.Paths路径的用处：
当【apple-app-site-association】文件中，“details"数组添加了多个app对象，并且你的手机上同时安装着这些App时，就需要用path路径对App进行区分。
如果不区分就会导致App跳转错误，因为他们的Universal Links都是相同的。
2.如何使用Paths
使用Paths很简单，只需要在paths中添加【”/aaa/*"】（aaa为任意内容，*号为通配符）,例如：
{
 "applinks": {
  "apps": [],
  "details": [
   {
     "appID": "8888SSS.com.aaa.jd",
     "paths": [ "/aaa/*" ]
   },
   {
      "appID": "8888SSS.com.bbb.jd",
     "paths": [ "/bbb/**" ]
   },
   {
     "appID": "8888SSS.com.ccc.jd",
      "paths": [ "/ccc/**" ]
   }
  ]
 }
}
3.这样添加完后，还需要更改第三方平台注册时的Universal Links。
我们以微信为例，在原有的基础上添加上路径
例如：原本的Universal Links为【https://aaa.github.io/】
a3.现在为了区分同一个手机上，同一个账号发布的多个App，而加入了路径
"details": [
 {
   "appID": "7A4FDS.com.aaa.app",
   "paths": ["/aaa/*"]
 },
 {
   "appID": "7A4FDS.com.bbb.app",
   "paths": ["/bbb/*"]
 }
]
b3.将【apple-app-site-association】放到服务器中,并更改A微信平台的Universal Links

c3.Xcode中Targets配置的Universal Links不需要变，依然为【applinks:aaa.github.io】
d3.然后修改代码中注册微信时的Universal Links为【b3步骤图中】你填写的新Universal Links，例如：【http://aaa.github.io/aaa/】
//注册初始化微信      微信appid                     带路径的Universal Links
WeChat.registerApp('微信AppID', universalLink: '带路径的Universal Links。例如：https://aaa.github.io/aaa/')
举例配置
1.微信开放平台Universal Links：【https://aaa.github.io/aaa/】
2.Xcode中 Targets Domains：【appLinks:aaa.github.io】
3.APP启动时，微信SDK进行注册Universal Links：【https://aaa.github.io/aaa/】
注意:
1.添加paths路径时，应该为所有的app添加paths路径，并且需要更改平台配置信息，更改APP启动时注册信息，然后重新安装app。
否则会优先跳转到没有路径的app。
2.配置了路径后，使用Safari浏览器下滑并不会出现打开App的提示，建议初次使用者先使用默认通配符，测试跳转成功后再添加路径。

操作步骤

😅开始之前，你确定你已经拿到了【AppID】【商户号】【唤醒App文件地址Universal Links】

taro项目配置。（*在此之前确保你的APP唤醒文件已经能通过浏览器成功唤醒APP）

进入项目文件，打开命令行，执行 npm install react-native-wechat-lib --save
建议执行完后，在执行一次 npm install

空壳项目配置taro-native-shell

进入项目文件，打开命令行，执行 npm install react-native-wechat-lib --save
官网说还要执行 react-native link react-native-wechat-lib ,但是并不用执行，因为是自动引入，如果执行后，在ios目录运行 pod install的时候会提示让你取消引入，因为这个是自动引入
进入到ios目录下，执行pod install
使用xcode打开项目，按照官网上的步骤执行
6.1. 在xcode中Build Phases选项下Link Binary with Libraries引入6个包

6.2. 在xcode中Info选项下URL type添加URL Schema，其中URL Schemes为微信开发平台申请的appid

Cannot go back to APP from WeChat without configuration.
如果不配置，就无法从微信重新回到APP。

6.3. 使用编辑器打开ios目录下Info.plist添加以下内容

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>wechat</string>
  <string>weixinULAPI</string>
</array>

If not configured, apple will prevent you from jumping to WeChat due to security permissions.
如果不配置，因为安全权限问题，苹果会阻止你跳转到微信。

将以下内容复制到 AppDelegate.m

- (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];
}

wechat callback function, If not configured, When sharing is called, it appears “connecting” and then bounces back.
微信回调方法，如果不配置，分享的时候微信会出现"正在连接"，然后直接弹回APP。

#import <React/RCTLinkingManager.h>

// ios 8.x or older 不建议再使用这段配置，所以注释掉
// - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
// sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
// {
//   [RCTLinkingManager application:application openURL:url options:options];
//   return [WXApi handleOpenURL:url delegate:self];
// }

// ios 9.0+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
            options:(NSDictionary<NSString*, id> *)options
{
  // Triggers a callback event.
  // 触发回调事件
  [RCTLinkingManager application:application openURL:url options:options];
  return [WXApi handleOpenURL:url delegate:self];
}

Universal Links config, If not used, please ignore.
Universal Links 配置文件, 没使用的话可以忽略。

注意：不使用 Universal Links 会导致调用微信支付成功后无法获取回调事件。

下载微信官网ios开发工具包。SDK 文件包括 libWeChatSDK.a，WXApi.h，WXApiObject.h 三个
下载完成后解压，右击APP文件，【Add file to xxxx】，如下图
将解压后3个文件导入到项目内，如下图，点击Add（这里添加完后建议在ios目录下执行一次pod install）
将以下内容复制到AppDelegate.h

#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>

#import <UMCore/UMAppDelegateWrapper.h>
#import "WXApi.h"

 
@interface AppDelegate : UMAppDelegateWrapper <UIApplicationDelegate, RCTBridgeDelegate, WXApiDelegate>

@property (nonatomic, strong) UIWindow *window;

@end

Mainly need to add ‘#import “WXApi.h”’ and ‘wxapidelegate’.
主要是需要加上 ‘#import “WXApi.h”’ 和 ‘WXApiDelegate’ 。

在此项目的配置就差不多结束了，接下来就是taro代码的编写
打开taro项目，在项目入口文件【app.js】或者【app.tsx】加入以下代码

...
import * as WeChat from 'react-native-wechat-lib';
...

类组件写法
componentDidMount () {
    WeChat.registerApp('微信平台的appid', '微信平台的Universal Links');
}
函数组件写法
useEffect(() => {
    WeChat.registerApp('微信平台的appid', '微信平台的Universal Links');
}, [])

在要使用微信支付的页面中添加以下代码（⚠️注意：WeChat.pay中的【package】（暂时,具体的更改看微信啥时候更新）默认为【Sign=WXPay】；【sign】默认为【MD5】（sign在新版本中默认为MD5字符串，不过目前（截止2021年10月13日）文档还未更新））

import * as WeChat from 'react-native-wechat-lib';

//判断是否安装微信
WeChat.isWXAppInstalled()
    .then((isInstalled) => {
        console.log('是否安装微信', isInstalled);
        if (isInstalled) {
        	//执行支付
            WeChat.pay({
                partnerId: '1900000109',  // 商家向财付通申请的商家id
                prepayId: 'WX1217752501201407033233368018',   // 预支付订单
                nonceStr: '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',   // 随机串，防重发
                timeStamp: '1412000000',  // 时间戳，防重发.
                package: 'Sign=WXPay',    // 商家根据财付通文档填写的数据和签名, 默认为 ‘Sign=WXPay’
                sign: 'MD5'   // 商家根据微信开放平台文档对数据做的签名，默认为 ‘MD5’
            }).then((requestJson)=>{
                console.log('支付回调', requestJson);
                //支付成功回调
                if (requestJson.errCode === 0){
                    console.log('支付成功');
                }
            }).catch((err)=>{
                console.log('支付失败', err);
            })
            
        } else {
            Toast.fail({
                content: '您还没有安装微信，请安装微信之后再试',
                duration: 1.5
            })
        }
    });
#####################################################   
更多API参考地址： https://github.com/little-snow-fox/react-native-wechat-lib#api-%E6%96%87%E6%A1%A3
#####################################################