关于接入react-native 接入微信支付功能记录（原生同理）

原创已于 2023-02-23 11:43:29 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #微信 #react native

于 2022-01-13 20:28:13 首次发布

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在React Native项目中集成微信支付功能，包括配置步骤、关键代码实现及调用流程。

1、如何申请微信支付我就不详细多讲解了网上太多了并且微信比支付宝麻烦太多太多了
2、进入正题我们进入我们的项目中进入android/app/build.gradle文件中在dependencies中添加引入

dependencies{
...
compile "com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+"
.....
}

3、在包下创建wxapi报名（好像是必须起这个名字呢）在包下创建文件weixinEntryActivity.java

package 包名

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.tencent.mm.opensdk.constants.ConstantsAPI;
import com.tencent.mm.opensdk.modelbase.BaseReq;
import com.tencent.mm.opensdk.modelbase.BaseResp;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.IWXAPIEventHandler;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;

public class weixinEntryActivity extends Activity implements IWXAPIEventHandler {
  
    private static final String TAG = "weixinEntryActivityextends";
    private IWXAPI api;
  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
      api = WXAPIFactory.createWXAPI(this, WxpayModule.APP_ID);
        api.handleIntent(getIntent(), this);
    }

    @Override
  protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    setIntent(intent);
        api.handleIntent(intent, this);
  }

  @Override
  public void onReq(BaseReq req) {
  }

  @Override
  public void onResp(BaseResp resp) {
    Log.d(TAG, "onPayFinish, errCode = " + resp.errCode);
    if (resp.getType() == ConstantsAPI.COMMAND_PAY_BY_WX) {
      WritableMap map = Arguments.createMap();
      map.putInt("errCode", resp.errCode);
      WxpayModule.promise.resolve(map);
      finish();
    }
  }
}

4、在包下创建weixinpayModule.java

package 包名;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.tencent.mm.opensdk.modelpay.PayReq;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;

class weixinpayModule extends ReactContextBaseJavaModule {

  private IWXAPI api;
  static String APP_ID = "";
  static Promise promise = null;

  weixinpayModule(ReactApplicationContext reactContext) {
    super(reactContext);
    api = WXAPIFactory.createWXAPI(reactContext, null);
  }

  @Override
  public String getName() {
    return "Wxpay";
  }

  @ReactMethod
  public void registerApp(String APP_ID) { // 向微信注册
    weixinpayModule.APP_ID = APP_ID;
    api.registerApp(APP_ID);
  }

  @ReactMethod
  public void pay(final ReadableMap order, Promise promise) {
    weixinpayModule.promise = promise;
    PayReq request = new PayReq();
    request.appId = order.getString("appid");
    request.partnerId = order.getString("partnerid");
    request.prepayId= order.getString("prepayid");
    request.packageValue = order.getString("package");
    request.nonceStr= order.getString("noncestr");
    request.timeStamp= order.getInt("timestamp")+"";
    request.sign= order.getString("sign");
    api.sendReq(request);
  }

  @ReactMethod
  public void isSupported(Promise promise) { // 判断是否支持调用微信SDK
    boolean isSupported = api.isWXAppInstalled();
    promise.resolve(isSupported);
  }

}

5、创建weixinpayPackage.java

package 包名；

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class weixinpayPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
          ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new weixinpayModule(reactContext));
    return modules;
  }
}

6、在我们MainApplication.java 中记得引用注册，在getPackages() 方法里面添加到list中即可。
7、创建wxpay.js 此时在react-native的页面里了上面的在android 里面的包里

import { NativeModules } from 'react-native';
export default NativeModules.Wxpay;

8、完成之后在我们启动的时候需要先注册

import wxpayfrom '地址';
Wxpay.registerApp("234234234234"); // 此为appid  微信申请的

9、使用

 //判断是否有微信
        let isSupported =await Wxpay.isSupported();
        console.log(isSupported)
        //支付
        let ret =await Wxpay.pay({
            appid:'123123123',
            partnerid: 'xxxxxx',  // 商家向财付通申请的商家id
            prepayid: 'xxxxxx',   // 预支付订单
            noncestr:'xxxxxx',   // 随机串，防重发
            timestamp: 1641713602,  // 时间戳，防重发.
            package: 'Sign=WXPay',    // 商家根据财付通文档填写的数据和签名
            sign: 'xxxxxxxxx'       // 商家根据微信开放平台文档对数据做的签名
            })
            console.log(ret)

10、终于结束了。。。。