react-native-wxpay插件的使用（iOS）

功能：

通过微信SDK(v1.8.2)实现微信支付功能

使用步骤：

一、链接WXPay库

参考：https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content

手动添加：

1、添加react-native-wxpay插件到你工程的node_modules文件夹下
2、添加WXPay库中的.xcodeproj文件在你的工程中
3、点击你的主工程文件，选择Build Phases，然后把刚才所添加进去的.xcodeproj下的Products文件夹中的静态库文件（.a文件），拖到Link Binary With Libraries组内。

自动添加：

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

react-native link

由于AppDelegate中使用WXPay库，所以我们需要打开你的工程文件，选择Build Settings，然后搜索Header Search Paths，然后添加库所在的目录 $(SRCROOT)/../node_modules/react-native-wxpay/ios/WXPay

二、开发环境配置

参考：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417694084&token=&lang=zh_CN

1、引入系统库

左侧目录中选中工程名，在TARGETS->Build Phases-> Link Binary With Libaries中点击“+”按钮，在弹出的窗口中查找并选择如下所需的库，单击“Add”按钮，将库文件添加到工程中。

• SystemConfiguration.framework
• libz.dylib
• libsqlite3.0.dylib
• libc++.dylib
• Security.framework
• CoreTelephony.framework
• CFNetwork.framework

如图所示：

2、环境配置

在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“URL type”添加“URL scheme”为你所注册的应用程序id

在工程文件中选择Build Setting，在"Other Linker Flags"中加入"-Objc -all_load"

三、配置plist文件

在iOS9中为了能正常调起微信支付的功能，必须在"Info.plist"中将微信的URL scheme列为白名单，否则无法调起，配置如下：

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

四、简单使用

方法

1、重写AppDelegate的openURL方法：

#import "WXPay.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  if ([sourceApplication isEqualToString:@"com.tencent.xin"]) {
    return [[WXPay shareInstance] handleOpenURL: url];
  }else{
    return NO;
  }
}


// NOTE: 9.0以后使用新API接口
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
  if ([options[@"UIApplicationOpenURLOptionsSourceApplicationKey"]  isEqualToString:@"com.tencent.xin"]) {
    return [[WXPay shareInstance] handleOpenURL: url];
  }else{
    return NO;
  }
}

2、js文件

//index.ios.js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  AlertIOS,
  ScrollView,
  TouchableHighlight,
  NativeAppEventEmitter
} from 'react-native';

import WXPay from 'react-native-wxpay';

let appid = 'wxd930ea5d5a258f4f';

function show(title, msg) {
    AlertIOS.alert(title+'', msg+'');
}

export default class TextReactNative extends Component {
  componentDidMount() {
        this.registerApp();
        NativeAppEventEmitter.addListener(
            'finishedPay',
            (response) => {
                if (parseInt(response.errCode) === 0) {
                    alert('支付成功');
                }else if (parseInt(response.errCode) === -2){
                    alert('用户取消');
                } else {
                    alert(response.strMsg);
                }
            }
        );
    }
    registerApp() {
        WXPay.registerApp(appid, (res) => {
            show('registerApp', res);
        });
    }
    isWXAppInstalled() {
        WXPay.isWXAppInstalled((res) => {
            show('isWXAppInstalled', res);
        });
    }
    isWXAppSupportApi() {
        WXPay.isWXAppSupportApi((res) => {
            show('isWXAppSupportApi', res);
        });
    }
    wechatPay() {
        WXPay.pay({
            'timestamp': '1412000000',
            'partnerid': '1900000109',
            'prepayid': 'WX1217752501201407033233368018',
            'noncestr': '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',
            'package': 'Sign=WXPay',
            'sign': 'C380BEC2BFD727A4B6845133519F3AD6'
        },(res) => {
            
        });
    }
    render() {
        return (
            <ScrollView contentContainerStyle={styles.wrapper}>
                
                <Text style={styles.pageTitle}>WeChat SDK for React Native (iOS)</Text>

                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.registerApp}>
                    <Text style={styles.buttonTitle}>registerApp</Text>
                </TouchableHighlight>
                
                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.isWXAppInstalled}>
                    <Text style={styles.buttonTitle}>isWXAppInstalled</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.isWXAppSupportApi}>
                    <Text style={styles.buttonTitle}>isWXAppSupportApi</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.wechatPay}>
                    <Text style={styles.buttonTitle}>wechatPay</Text>
                </TouchableHighlight>
                
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
  wrapper: {
        paddingTop: 60,
        paddingBottom: 20,
        alignItems: 'center',
    },
    pageTitle: {
        paddingBottom: 40
    },
    button: {
        width: 200,
        height: 40,
        marginBottom: 10,
        borderRadius: 6,
        backgroundColor: '#f38',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonTitle: {
        fontSize: 16,
        color: '#fff'
    }
  
});

github链接：
https://github.com/zhoumeitong/react-native-wxpay