React Native 集成微信支付流程

第一步，先利用终端进入项目的跟路径，去添加微信支付的第三方库
输入命令回车 npm install react-native-wechat@1.9.5 --save 卸载的库npm uninstall react-native-wechat --save

B74B0C84-6EEE-4112-BE8A-AE6450A42B7A.png

第二步在项目跟路径下把第三方库添加到项目里 react-native link react-native-wechat

aaa.png

检验一下Libraries有没有添加成功

0B16A8DC-BC7E-4DB9-8437-66423FFD5F20.png

设置ATS权限 App Transport Security Settings

53D78175-F4C2-4B54-9306-54F8EDBD3400.png

设置微信链接
LSApplicationQueriesSchemes

3342C8AF-58E1-4175-BE24-C6E79E97FFEA.png

打开项目，添加

02BB5D89-C92D-40CF-8DD6-F5F352090C54.png

添加成功

50B7C7FE-8C77-4023-B9B9-492C75A25153.png

添加配置文件

E5AD7916-F614-45E5-B10A-E2C45EA9D9CC.png

添加$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS

7443501C-0896-4682-8C6B-84BE7A4D52BD.png

项目中引入库 #import <React/RCTLinkingManager.h>

51998F98-AE92-41C6-A5A6-2E7960559486.png

添加方法

• (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{
  return [RCTLinkingManager application:application openURL:url
  sourceApplication:sourceApplication annotation:annotation];
  }

D1F924EC-3B58-4134-A6E3-07BF4D2E8AE8.png

添加依赖库 SystemConfiguration.framework CoreTelephony.framework libsqlite3.0.tdb libc++.tbd libz.tbd

9EC8F12A-F306-4F9B-9564-CA88C0BAFD29.png

添加成功后

36E97842-671B-48A2-9113-4D51E9FF2D59.png

代码实现

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import * as WeChat from 'react-native-wechat'//引入微信支付和分享的第三方库
export default class wechat extends Component {
constructor(props) {
    super(props);
    WeChat.registerApp('申请的APPID')
            .then(e => {
                console.log(e)
            })
            .catch(err => {
                console.log(err)
            })
  }
openShare = (number) =>{
 WeChat.isWXAppInstalled()
              .then((e) => {
                    if (e) {
                        this.isWXAppSupportApi(number);
                    } else {
                        this.openWeChatUrl();
                        }
                    })
              .catch(() => {
                // Toast.showTop('请安装微信!')
               });
}

isWXAppSupportApi = (scene) => {

        WeChat.isWXAppSupportApi()
            .then(e => {
                console.log(e);
                if (e){
                    if (scene === 0) {
                        this.shareToSession()

                    } else if(scene === 1){
                        this.shareToTimeline()
                    }else{
                      let formData = new FormData();  
                      formData.append("totalAmount","0.01");  
                        formData.append("description","111");  
                        formData.append("userId","1");  
                        formData.append("token","1B3CEF76-4DD2-4B17-9898-8FDEC7835C1B");   
                        // alert('支付');
                        fetch('http://sq.hc-it.com/ToPay',{
                          method:'POST',
                          headers:{},
                          body:formData,
                        })
                             .then((response) => response.json())
                             .then((responseJson) =>{

                              this.pay(responseJson);
                             })
                             .catch((error) =>{
                              alert('失败');
                              console.log(error);
                             }).down();
                    }
                } else {
                    // Toast.showTop('抱歉当前版本不支持微信分享!');
                    // this.refs.modal.close()
                }
            })
            .catch(() => {
                // Toast.showTop('抱歉当前版本不支持微信分享!');
                // this.refs.modal.close()
            })
pay = (responseJson) =>{
      console.log(responseJson);
        const aaa = { 
            partnerId: responseJson.partnerid,  // 商家向财付通申请的商家id
            prepayId: responseJson.prepayid,   // 预支付订单
            nonceStr: responseJson.noncestr,   // 随机串，防重发
            timeStamp: responseJson.timestamp,  // 时间戳，防重发
            package: responseJson.package,    // 商家根据财付通文档填写的数据和签名
            sign: responseJson.paysign, 
        };
        console.log(aaa);
        WeChat.pay(aaa)
            .then(e =>{
            if (e.errCode == '0') {
                    // Toast.showTop('支付成功!');
            } else {
                    // Toast.showTop('抱歉,支付失败!');
            }
        }).catch(() =>{

        })
    }
render(){
    <View style={style.container}>
        <TouchableOpacity  style={styles.btnStyle} activeOpacity=         {0.8} onPress={ () => this.openShare(2)}>
           <Text>微信支付</Text>
        </TouchableOpacity>
    </View>
}
}