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

b1a804c6306f

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,如有疑问请给我发简信吧,大家一块把坑踩平!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值