React Native集成微信支付【Android】

作者: BraveJoy | 来源:发表于2018-05-17 16:30 被阅读89次

wechat.jpg

本次博客主要讲解主要在RN中集成微信支付以及被我踩平的坑，需要一定的原生集成经验！

一. 导入微信SDK

用Android Studio打开RN项目中的android部分，在app/build.gradle添加如下代码：

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

重新Sync Now.

二. 编写代码供JS调用

具体流程可以参考官网的示例：个人建议先看一遍这个比较好理解后面的代码。
https://reactnative.cn/docs/0.48/native-modules-android.html#content

1.创建Module

在包名com.xx.xx下创建包名wxapi，注意此处包名一定要为wxapi，否则会出问题。

在wxapi下新建WxpayModule.java继承自ReactContextBaseJavaModule，代码如下：

WxpayModule.java

import android.util.Log;
import android.widget.Toast;

import com.facebook.react.bridge.Arguments;
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.WritableMap;
import com.facebook.react.uimanager.IllegalViewOperationException;
import com.senlan.supermarket.utils.JsonData;
import com.tencent.mm.opensdk.modelpay.PayReq;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;
/**
 * 类文件：
 * 作者：zhuyong on 2018/5/10 14:04
 * 邮箱：99305919@qq.com
 * 希望每天叫醒你的不是闹钟而是梦想
 */
public class WxpayModule extends ReactContextBaseJavaModule {

    private IWXAPI api;
    public static String APP_ID = "";//这里填写你的APPID
    public static Promise promise = null;

    WxpayModule(ReactApplicationContext reactContext) {
        super(reactContext);
        api = WXAPIFactory.createWXAPI(reactContext, APP_ID);
        api.registerApp(APP_ID);    // 将该app注册到微信
    }

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

    @ReactMethod
    public void pay(String text, Promise promise) {
        //此处的text为调用后台的统一下单接口返回的字符串，我放在此处解析的。
        WxpayModule.promise = promise;
        Log.e("WXPayEntryActivity", "支付参数：" + text);
        JsonData jsonData = JsonData.create(text);
        JsonData bizHead = jsonData.optJson("bizHead");
        String code = bizHead.optString("bizRetCode");
        String message = bizHead.optString("bizRetMsg");
        if (code.equals("1000")) {
            JsonData bizInfo = jsonData.optJson("bizInfo");
            String appid = bizInfo.optString("appid");
            String sign = bizInfo.optString("sign");
            String partnerid = bizInfo.optString("partnerid");
            String prepayid = bizInfo.optString("prepayid");
            String mPackage = bizInfo.optString("package");
            String noncestr = bizInfo.optString("noncestr");
            String timestamp = bizInfo.optString("timestamp");

            PayReq request = new PayReq();
            request.appId = appid;
            request.partnerId = partnerid;
            request.prepayId = prepayid;
            request.packageValue = mPackage;
            request.nonceStr = noncestr;
            request.timeStamp = timestamp;
            request.sign = sign;
            api.sendReq(request);
        } else {
            Toast.makeText(getReactApplicationContext(), "支付出现错误 " + message, Toast.LENGTH_SHORT).show();
        }
    }

    @ReactMethod
    public void isSupported(Promise promise) { // 判断是否安装了微信客户端
        boolean isSupported = api.isWXAppInstalled();
        try {
            WritableMap map = Arguments.createMap();
            map.putBoolean("isSupported", isSupported);
            promise.resolve(map);
        } catch (IllegalViewOperationException e) {
            promise.reject(e);
        }
    }
}

2.创建Package

在wxapi下新建WxpayPackage.java实现接口ReactPackage，代码如下：

WxpayPackage.java

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;
/**
 * 类文件：
 * 作者：zhuyong on 2018/5/10 14:04
 * 邮箱：99305919@qq.com
 * 希望每天叫醒你的不是闹钟而是梦想
 */
public class WxpayPackage 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 WxpayModule(reactContext));
        return modules;
    }

}

3.新建WXPayEntryActivity

这一步属于微信官方的集成代码，上面两部分属于RN的相关配置，WXPayEntryActivity.java一定要新建在wxapi类目下，代码如下：

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

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.IllegalViewOperationException;
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;

/**
 * 类文件：
 * 作者：zhuyong on 2018/5/10 14:04
 * 邮箱：99305919@qq.com
 * 希望每天叫醒你的不是闹钟而是梦想
 */
public class WXPayEntryActivity extends Activity implements IWXAPIEventHandler {

    private static final String TAG = "WXPayEntryActivity";
    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) {
        if (resp.getType() == ConstantsAPI.COMMAND_PAY_BY_WX) {
            try {
                //把支付结果返回出去。
                WritableMap map = Arguments.createMap();
                map.putInt("errCode", resp.errCode);
                WxpayModule.promise.resolve(map);
                finish();
            } catch (IllegalViewOperationException e) {
                WxpayModule.promise.reject(e);
            }
        }
    }
}

在AndroidManifest.xml中注册Activity，如下：

<activity
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true"
    android:launchMode="singleTop" />

4.注册模块

参考官方提供的Toast模块，我们还需要注册刚才编写的模块，其他编写的模块都要在此一块注册，在MainApplication中的getPackages方法中添加代码：

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            /**
             * 控制微信支付的插件
             */
            new WxpayPackage()
    );
}

三. JS调用原生模块代码

1.创建Wxpay.js，代码如下：

import { NativeModules } from 'react-native';
export default NativeModules.Wxpay;//Wxpay就是WxpayModule中getName方法返回的字符串。

2.开始调用微信，代码如下：

//先导入Wxpay.js
import Wxpay from "../utils/Wxpay";

//调用方法，responseData为下单接口后台返回数据
async startWxPay(responseData) {
    var {isSupported} = await  Wxpay.isSupported();
    if (!isSupported) {
        Alert.alert("找不到微信应用，请安装最新版微信:")
        return;
    }
    var {errCode} = await  Wxpay.pay(responseData);
    if (errCode == 0) {
        ToastAndroid.show("支付成功", ToastAndroid.SHORT)
    } else if (errCode == -1) {
        ToastAndroid.show("支付失败", ToastAndroid.SHORT)
    } else if (errCode == -2) {
        ToastAndroid.show("取消支付", ToastAndroid.SHORT)
    }
}

最后，就是需要使用签名文件打包apk出来，使用签名工具获取签名信息，然后把签名和包名配置到开放平台上，至此，微信支付的集成全部结束，如果你的APPID和签名信息都准确无误就可以调的起微信了。

OK，如有疑问请给我发简信吧，大家一块把坑踩平！！！

网友评论

ReactNative

本文标题：React Native集成微信支付【Android】

本文链接：https://www.haomeiwen.com/subject/ixibdftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！