react-native-wxpay

react-native-wxpay

功能：

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

使用步骤：

一、链接WXPay库

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

手动添加：

1、添加react-native-wxpay插件到你工程的node_modules文件夹下

2、添加AMap库中的.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'
}

});