ReactNative-IOS 支付篇-微信

废话不多说，直接来操作步骤介绍。

1.安装插件

在项目根目录下面采用npm方式安装

react-native install react-native-wechat

由于react-native install 命令会自动link静态库，所以不需要再react-native link。用xcode打开工程run,如果发现该库没有添加进来，可以手动导入add files ，然后添加静态库文件 libRCTWeChat.a

2.添加依赖库

SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
libRCTWeChat.a

问题点：如果RN环境是0.44版本一下，安装这个插件时，会另外多安装两个静态库导致报错，lib-third,lib-con.只要删掉这两个历来就行了。

3.添加URL Scheme

一般采用在微信注册的开发App的appKey作为scheme，编辑info.plist，如：wx1234567890

4.添加白名单

编辑infoplist，添加LSApplicationQueriesSchemes白名单

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

5.在原生项目工程添加头文件索引

Build Setting -> Search Paths -> Header Search Paths,新增 $(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS

6.修改AppDelegate.m文件

#import "RCTLinkingManager.h"

//MARK:9.0以前使用的方法
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(nullable NSString *)sourceApplication annotation:(id)annotation
	{
	  if ([url.host isEqualToString:@"pay"]){
	    return [RCTLinkingManager application:application openURL:url
	                        sourceApplication:sourceApplication annotation:annotation];
	  }
	  return NO;
	}

//MARK:9.0以后使用的方法

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
	{
	  if ([url.host isEqualToString:@"pay"]){
	    NSString *sourceApplication = [options objectForKey:UIApplicationOpenURLOptionsSourceApplicationKey];
	    id annotation = [options objectForKey:UIApplicationOpenURLOptionsAnnotationKey];
	    return [RCTLinkingManager application:app openURL:url sourceApplication:sourceApplication annotation:annotation];
	  }
	  return NO;

7.前端调用样例

a.导入微信支付组件 import * as WeChat from 'react-native-wechat'

b.在页面加载完成的方法中注册微信AppId

componentDidMount() {

         //注册微信appId
        let appId = "wx1234567890";
        WeChat.registerApp(appId).then((data)=>{
            console.log("注册成功:"+data);
        },(err)=>{
            console.log("注册失败:"+err);
        });

c.方法调用实例

WeChat.isWXAppInstalled().then((data)=>{
            console.log(data);
            if (data){

                var playload = {
                    partnerId: "***********",  //商家向财付通申请的商家id
                    prepayId: "wx**************",    //预支付订单
                    nonceStr: "*********",    //随机串，防重发
                    timeStamp: "1526006388",  //时间戳，防重发
                    package: "Sign=WXPay",      //商家根据财付通文档填写的数据和签名
                    sign: "*************",            //商家根据微信开放平台文档对数据做的签名
                }
                WeChat.pay(playload).then((resp)=>{

                    console.log("支付成功:"+JSON.stringify(resp))
                },(err)=>{
                    var payResultStr = "";
                    switch (err.code){
                        case 0:{
                            payResultStr = "支付成功";
                        }break;
                        case -1:{
                            payResultStr = "普通错误类型";
                        }break;
                        case -2:{
                            payResultStr = "用户点击取消并返回";
                        }break;
                        case -3:{
                            payResultStr = "发送失败";
                        }break;
                        case -4:{
                            payResultStr = "授权失败";
                        }break;
                        case -5:{
                            payResultStr = "微信不支持";
                        }break;
                    }
                    console.log("支付失败:"+err+payResultStr);
                });

            }else{
                console.log("没有安装微信");
            }
        },(err)=>{
            console.log(err);
        });

ReactNative-IOS 支付篇-微信

猜你喜欢