android微信支付插件,React Native集成微信支付【Android】

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调用

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 createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List createNativeModules(

ReactApplicationContext reactContext) {

List 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，如下：

android:name=".wxapi.WXPayEntryActivity"

android:exported="true"

android:launchMode="singleTop" />

4.注册模块

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

@Override

protected List getPackages() {

return Arrays.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，如有疑问请给我发简信吧，大家一块把坑踩平！！！