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
* 邮箱：[email protected]
* 希望每天叫醒你的不是闹钟而是梦想
*/
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
* 邮箱：[email protected]
* 希望每天叫醒你的不是闹钟而是梦想
*/
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
* 邮箱：[email protected]
* 希望每天叫醒你的不是闹钟而是梦想
*/
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，如下：
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，如有疑问请给我发简信吧，大家一块把坑踩平！！！