react-native封装自己的支付宝,微信支付并发布到NPM
react-native开发经常会使用到第三方 比如说支付.
因为很多封装好的支付 GitHub 已经不维护了,所以自己封装一下,方便以后使用.
这里强调下,我的开发环境是mac
先下载必须的组件,微信和支付宝的官网SDK
微信支付文档
[支付宝支付文档]
组件名就叫做react-native-lht-pay 下面就开始
首先要先创建模板项目
大家可以自行去GitHub查看,这个没什么好说的,不是重点
使用react-native-create-library
npm install -g react-native-create-library
//名字可以自己定义
react-native-create-library --package-identifier com.lht.pay --platforms android,ios lht-pay
重新命名一下自己的项目
为什么不直接写react-native-lht-pay 因为你上传npm后会自动生成react-native前缀
会变成这个样子 react-native-react-native-lht-pay
所以自己改了下名字
mv lht-pay react-native-lht-pay
先装下 tree 为了看下目录结构,装下这个插件
只是为了看的更清楚目录结构,大家可以忽略这里
brew install tree
创建完成后会看到一个文件夹
image.png
把名字改成组件名字
image.png
再看下目录结构
.
├── README.md
├── android
│ ├── build.gradle
│ └── src
│ └── main
│ ├── AndroidManifest.xml
│ └── java
│ └── com
│ └── lht
│ └── pay
│ ├── RNLhtPayModule.java
│ └── RNLhtPayPackage.java
├── index.js
├── ios
│ ├── RNLhtPay.h
│ ├── RNLhtPay.m
│ ├── RNLhtPay.podspec
│ ├── RNLhtPay.xcodeproj
│ │ └── project.pbxproj
│ └── RNLhtPay.xcworkspace
│ └── contents.xcworkspacedata
└── package.json
创建好之后我们开始写代码
封装原生需要编写iOS 安卓 双端的代码,有能力的小伙伴可以开工了.
先创建一个 react-native 空项目,放到边,等最后集成测试使用.
iOS这边必须用空项目来导入,不然无法读取包.
先说安卓吧
使用安卓studio 打开刚才创建的模板里的android 文件
image.png
这里只给一些少许代码
package com.lht.pay;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
public class RNLhtPayModule extends ReactContextBaseJavaModule {
public static String WX_APPID = "";
private final ReactApplicationContext reactContext;
public RNLhtPayModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}
@Override
public String getName() {
return "RNLhtPay";
}
@ReactMethod
public void setAlipaySandbox(Boolean isSandbox) {
if(isSandbox){
EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
}else {
EnvUtils.setEnv(EnvUtils.EnvEnum.ONLINE);
}
}
@ReactMethod
public void alipay(final String orderInfo, final Callback promise) {
Runnable payRunnable = new Runnable() {
@Override
public void run() {
PayTask alipay = new PayTask(getCurrentActivity());
Map<String, String> result = alipay.payV2(orderInfo, true);
WritableMap map = Arguments.createMap();
map.putString("memo", result.get("memo"));
map.putString("result", result.get("result"));
map.putString("resultStatus", result.get("resultStatus"));
promise.invoke(map);
}
};
// 必须异步调用
Thread payThread = new Thread(payRunnable);
payThread.start();
}
安卓里的代码我就不再赘述了,需要些的很多,可以自己参考我的GitHub
主要是 微信和阿里的SDK 自己编写了一些代码之类的
安卓有个地方需要说明下
项目下的build.gradle 文件里的
repositories {
flatDir {
dirs 'libs' //因为支付宝的SDK 换成了AAR格式 所以导入方式改成这样,这个是给小白指明的
}
maven{
url 'https://maven.google.com'
name 'Google'
}
maven{ url 'https://jitpack.io'}
jcenter()
mavenCentral()
google()
}
还有一个地方 需要提醒一下
项目的build.gradle 文件里的
dependencies {
...
//这里是支付宝新的导入方式
compile (name:'alipaySdk-15.6.8-20191021122514', ext: 'aar') //这里包名我没有改,能看到包是什么时候更新的,后期为了更好维护
implementation 'androidx.annotation:annotation:+' //这里要添加AndroidX 组件,因为RN现在已经支持androidx了
...
}
好了 如果你能build success 那么就配置好了
image.png
下面我们开始封装iOS
还记得刚才创建的react-native 空项目吧....
现在用上了
目前我的 react-native 版本是 0.61.4 后期有更新的话看情况再更新插件
cocoapod 就不用多说了吧,这个必须有
我还没有研究怎么把iOS封装到pod里 使用,等有时间了 好好研究下,完善插件.
现在把整个react-native-lht-pay 放到 paydemo 的node_modules里(是整个插件哈)
image.png
现在是要测试我们的插件能不能使用和修复bug
就模拟下 真正的项目来做一下,iOS这边也需要环境才能跑的起来,所以先粘贴进项目
iOS拖入到Libraries文件夹下
image.png
这里有一个静态文件的知识,其实我不是很精通,但是我可以配置和使用.
iOS 打包成静态库(并且静态库里需要有第三方SDK ) 这个我找了一些资料,
有些人说可以,有些人说不可以,静态库分为2种,一种是.a一种是Frameworks
支付宝的是Frameworks静态库,微信的是.a静态文件,这就尴尬了,
这里也需要大神帮忙下
AlipaySDK 为什么不能在项目内的工程导入 而是必须放到当前项目才能变异成功
然后把 这2个文件导入到自己的插件工程
AlipaySDK.framework AlipaySDK.bundle
image.png
切记一点
就是拖入项目的时候 AlipaySDK.framework
image.png
而AlipaySDK.bundle 是需要选中 add to targets的
然后微信的这几个文件也导入进来
image.png
这时候我们的.a 静态库会是 红色的
image.png
我们需要build一下 他就会变成黑色, 正常情况下,xcode 是会自动build的.
然后就是添加支付宝的一些依赖了 这些官网都有
image.png
他会报一个错误
image.png
image.png
只要改成这样的导入方式就没问题了,这个问题 pod里写代码也可以解决掉
image.png
然后主项目里 添加一些依赖项 要导入自己的依赖项
把阿里的那些库都导入进来 你再build项目
image.png
RNLhtPay.h
#if __has_include("RCTBridgeModule.h")
#import "RCTBridgeModule.h"
#else
#import <React/RCTBridgeModule.h>
#endif
#import "WXApi.h"
@interface RNLhtPay : NSObject <RCTBridgeModule,WXApiDelegate>
@end
RNLhtPay.m
这里就简单些一个方法,其他的自己定义
RCT_EXPORT_METHOD(setAlipayScheme:(NSString *)scheme){
alipayScheme = scheme;
}
最后就是编写js 代码了 找到模板项目的 index.js 文件
大体上完成了,
下面就是上传到npm GitHub了
GitHub我晚点放出,因为要调试,还要写文档,需要商户的ID 和回调地址.
封装好后我会上传 GitHub 给大家看源码
npm registry
npm registry就相当于一个包注册管理中心。它管理着全世界的开发者们发布上来的各种插件，同时开发者们可以通过npm install的方式安装所需要的插件。
npm官方registry为：http://registry.npmjs.org/
国内速度较快的为：https://registry.npm.taobao.org/
查看
你可以查看当前使用的registry:
$ npm config get registry
切换
当然也可以通过命令切换当前使用的npm registry
# 全局切换
$ npm config set registry http://registry.npmjs.org/
有时候你可能只想在执行某些npm命令时临时切换，这个时候，可以使用--registry来指定临时切换的registry，比如在npm发布
$ npm publish --registry http://registry.npmjs.org/
就可以临时指定，当然，在命令执行结束之后，registry仍然会恢复到原来的registry
要发布组件到npm registry，你必须要是npm registry的注册用户，通过：
$ npm adduser
来新增一个用户，或者你已经在[官网](https://www.npmjs.com/)注册了一个用户，可以通过：
$ npm login
来登陆npm registry账户。
利用以下两种方式来确认你是否创建/登陆成功npm registry
1. 命令`$ npm whoami`确认本地是否成功登陆认证成功
2. 在线打开 [https://npmjs.com/~username](https://npmjs.com/~username) 查看是否创建账户成功
如果有.gitignore但是没有.npmignore文件，那么.gitignore可以充当.npmignore的作用
需要注意:
做好以上准备之后，就可以发布了。这里需要注意，首次发布跟后面更新发布是不一样的。
第一次发布的话，直接执行命令：
$ npm publish
就搞定了，可以在线查看确认是否发布成功。访问链接(<package>是你发布的npm package名)：
https://www.npmjs.com/package/<package>
看看是否已经有内容了，有内容说明发布成功了。
更新发布
如果不是首次发布，需要执行两个命令
$ npm version <update_type>
$ npm publish
$ npm version命令是用来自动更新版本号，update_type取值有patch minor major。那么在什么场景应该选择什么update_type呢？
image.png
最后提示发布成功 我们就科一去看看了
image.png
好了 写的不是很好,有很多地方忘记截图 或者有纰漏,请大家多谅解.
