React Native集成微信支付【Android】

wechat.jpg

本次博客主要講解主要在RN中集成微信支付以及被我踩平的坑，需要一定的原生集成經(jīng)驗(yàn)！

一. 導(dǎo)入微信SDK

用Android Studio打開RN項(xiàng)目中的android部分，在app/build.gradle添加如下代碼：

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

重新Sync Now.

二. 編寫代碼供JS調(diào)用

具體流程可以參考官網(wǎng)的示例：個(gè)人建議先看一遍這個(gè)比較好理解后面的代碼。
https://reactnative.cn/docs/0.48/native-modules-android.html#content

1.創(chuàng)建Module

在包名com.xx.xx下創(chuàng)建包名wxapi，注意此處包名一定要為wxapi，否則會(huì)出問題。

在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
 * 希望每天叫醒你的不是鬧鐘而是夢(mèng)想
 */
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注冊(cè)到微信
    }

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

    @ReactMethod
    public void pay(String text, Promise promise) {
        //此處的text為調(diào)用后臺(tái)的統(tǒng)一下單接口返回的字符串，我放在此處解析的。
        WxpayModule.promise = promise;
        Log.e("WXPayEntryActivity", "支付參數(shù)：" + 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(), "支付出現(xiàn)錯(cuò)誤 " + 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.創(chuàng)建Package

在wxapi下新建WxpayPackage.java實(shí)現(xiàn)接口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
 * 希望每天叫醒你的不是鬧鐘而是夢(mèng)想
 */
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的相關(guān)配置，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
 * 希望每天叫醒你的不是鬧鐘而是夢(mèng)想
 */
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 {
                //把支付結(jié)果返回出去。
                WritableMap map = Arguments.createMap();
                map.putInt("errCode", resp.errCode);
                WxpayModule.promise.resolve(map);
                finish();
            } catch (IllegalViewOperationException e) {
                WxpayModule.promise.reject(e);
            }
        }
    }
}

在AndroidManifest.xml中注冊(cè)Activity，如下：

<activity
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true"
    android:launchMode="singleTop" />
4.注冊(cè)模塊

參考官方提供的Toast模塊，我們還需要注冊(cè)剛才編寫的模塊，其他編寫的模塊都要在此一塊注冊(cè)，在MainApplication中的getPackages方法中添加代碼：

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

三. JS調(diào)用原生模塊代碼

  • 1.創(chuàng)建Wxpay.js，代碼如下：
import { NativeModules } from 'react-native';
export default NativeModules.Wxpay;//Wxpay就是WxpayModule中g(shù)etName方法返回的字符串。
  • 2.開始調(diào)用微信，代碼如下：
//先導(dǎo)入Wxpay.js
import Wxpay from "../utils/Wxpay";

//調(diào)用方法，responseData為下單接口后臺(tái)返回?cái)?shù)據(jù)
async startWxPay(responseData) {
    var {isSupported} = await  Wxpay.isSupported();
    if (!isSupported) {
        Alert.alert("找不到微信應(yīng)用，請(qǐng)安裝最新版微信:")
        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出來，使用簽名工具獲取簽名信息，然后把簽名和包名配置到開放平臺(tái)上，至此，微信支付的集成全部結(jié)束，如果你的APPID和簽名信息都準(zhǔn)確無誤就可以調(diào)的起微信了。

OK，如有疑問請(qǐng)給我發(fā)簡(jiǎn)信吧，大家一塊把坑踩平?。?！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容