功能:
通过微信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
二、开发环境配置
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>
四、简单使用
方法
Event Name | Returns | Notes |
---|---|---|
registerApp | res | 向微信终端程序注册第三方应用 |
isWXAppSupportApi | res | 判断当前微信的版本是否支持OpenApi |
isWXAppSupport | res | 判断当前微信的版本是否支持该插件 |
isWXAppInstalled | res | 检测是否已安装微信 |
getApiVersion | res | 获取当前微信SDK的版本号 |
getWXAppInstallUrl | res | 获取微信的itunes安装地址 |
openWXApp | res | 打开微信 |
sendAuthReq | res | 发起认证请求 |
pay | res | 支付 |
finishedPay | res | 支付结果监听事件 |
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'
}
});