关于接入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、终于结束了。。。。