React-Native Component（543）
上一篇简单地讲了&ReactNative&如何接入支付宝支付，那么这一篇就介绍如何接入微信API吧。我们实际用到的一般有微信登录、微信分享、微信支付这三个功能。
微信的东西比较支付宝申请起来要略微麻烦点，步骤多，而且有些资质认证要给微信钱，心太黑。废话不多说，登录微信开放平台，创建你的App应用，改填的都填了，提交 —— 审核1～2天 —— 通过 —— 申请微信支付 —— 继续审核 … MD这步一次性通过是有多难 !
微信支付申请通过了会收到一份邮件，里面有你的微信支付商户账号的信息（记得保存），然后用这个账号和密码登录微信商户平台。这里关键的一步是：
进入&账户中心&—&&API安全&—&&设置一个32位的密钥
准备工作都做好了，我们就可以开始开发了。
感谢大react-native社区，为我们这种菜鸟提供了如此全面的微信三方模块react-native-wechat，完全能满足现阶段的所有微信API需求啊！
支持npm安装：
npm install react-native-wechat --save 1
让&ReactNative完全支持ES7
async和await是ES7比较新的提案，让ReactNative完全支持stage-0，首先我们需要安装&babel-preset-react-native-stage-0&模块:
npm install babel-preset-react-native-stage-0 --save-dev 1
并设置&.babelrc
&presets&: [ &react-native-stage-0& ],
link和配置
上一篇已经介绍了&react-native link&命令，可以把客户端所需的模块链接到IOS和Android目录里。
react-native link react-native-wechat 1
当然，只执行上面的命令还不够。我们还需要手动添加一些配置
微信的配置和支付宝差别不大。
（1）添加下面几个framework和library：
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
注意：CoreTelephony.framework、libc++z、libz，这三项和支付宝模块的重复，引一次就够了。
（2）添加&URL
Schema&，值是你应用的微信appid
（3）给&LSApplicationQueriesSchemes&添加三个值&alipay、weixin、wechat
或者直接编辑&Info.plist：
&LSApplicationQueriesSchemes&
注意：如果你不需要支付宝支付，&alipay&可以不加
（4）修改&AppDelegate.m
如果你不需要支付宝支付，这个函数可以这么写：
#import &../Libraries/LinkingIOS/RCTLinkingManager.h&
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
如果你既要支付宝支付，也需要微信支付。那么应该这么写：
#import &../Libraries/LinkingIOS/RCTLinkingManager.h&
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
if([[sourceApplication substringToIndex:10] isEqualToString:@&com.alipay&]){
[AlipayModule handleCallback:url];
return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}12345678910
（1） 修改android/settings.gradle
include ':RCTWeChat'
project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')12
（2）修改android/app/build.gradle
dependencies {
compile project(':RCTWeChat')
（3）修改MainActivity.java or MainApplication.java
import com.theweflex.react.WeChatP
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new MainReactPackage(),
new WeChatPackage()
}1234567891011121314
（4）创建一个新的package&取名wxapi&，在里面创建class&取名WXEntryActivity
package your.package.
import android.app.A
import android.os.B
import com.theweflex.react.WeChatM
public class WXEntryActivity extends Activity{
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
}1234567891011121314
（5）修改AndroidManifest.xml
android:name=&.wxapi.WXEntryActivity&
android:label=&@string/app_name&
android:exported=&true&
&12345678910
（6）修改&proguard-rules.pro
-keep class com.tencent.mm.sdk.** {
初始化模块
react-native-wechat&使用前必须初始化一次（有且仅一次）。建议放在项目的入口文件里：
// ...省略
componentDidMount() {
WeChat.registerApp('你的appid')
微信登录需要用到的是&WeChat.sendAuthRequest&这个方法。
获取微信CODE
首先介绍一下它参数：
执行&WeChat.sendAuthRequest获取CODE：
let code = await WeChat.sendAuthRequest(&snsapi_userinfo&, &123&);1
该方法会返回一个字符串，类似&F1Rc90jSw6t1Cf44t14sg4-&一串CODE。
获取微信access_token
包装一个&GET类型的fetch请求，URL如下：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code1
这个接口会返回&access_token&和 用户的&openid。示例如下：
&access_token&: &JWk5IxV5bFGOdTm2A4zhuGuIB_xGRM5cPbU5nYbkuEihHu6FClMn5zjVZ6QCTYrMv_oCMxW8szuNAOadYIYo6wiOObeesEeNgHeWNvkJolQ&,
&expires_in&: 7200,
&refresh_token&: &WPhskoRBAmDyM1EbrPRvWSCU8LL3Ndn0Brong9ZG434L1Imkxugu2JKOghfIuP1P3JqcCyB2anxAwXRuFr7EMxP_rygeWy1Noi0zPJue_YU&,
&openid&: &oDwRbw9zFEO36l3Vcq6bHXFWB13k&,
&scope&: &snsapi_userinfo&,
&unionid&: &o3KCIw-vFiuq0SBHe-3bhjbCQY3o&
获取微信授权后的用户信息
包装一个&GET类型的fetch请求，URL如下：
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID1
这个接口会返回 授权用户的微信基本信息，示例如下：
&openid&: &oDwRbw9zFEO36l3Vcq6bHXFWB13k&,
&nickname&: &思^_^诚&,
&language&: &zh_CN&,
&city&: &Hangzhou&,
&province&: &Zhejiang&,
&country&: &CN&,
&headimgurl&: &/mmopen/PiajxSqBRaEKujUoq5z4PScxKqQESxMxj6VDYnIHT4ZibVDMmSb69dq6EbLPAUJ15mMH9pIxFNu9JZszyx1F6ibcw/0&,
&privilege&: [],
&unionid&: &o3KCIw-vFiuq0SBHe-3bhjbCQY3o&
}123456789101112
微信分享用到的是&WeChat.shareToTimeline(opt)(分享到朋友圈)
和&WeChat.shareToSession(opt)（分享给微信好友或微信群)，这两个方法的入参是一样的。
为了方便，微信分享我做成了一个react-native组件, 感兴趣的可以点击看看&
* [分享到朋友圈]
{[Object]} opt 入参对象
{ thumbImage:'', title: '', webpageUrl: '' }
async handleShareWeixinCircle(opt) {
this.lock = true
let result = await WeChat.shareToTimeline({
type: &news&,
} catch (e) {
console.error(e)
} finally {
this.lock = false
this.close()
* [分享给微信好友或微信群]
{[Object]} opt 入参对象
{ thumbImage:'', title: '', webpageUrl: '' }
async handleShareWeixinFriend(opt) {
this.lock = true
let result = await WeChat.shareToSession({
type: &news&,
} catch (e) {
console.error(e)
} finally {
this.lock = false
this.close()
}123456789101112131415161718192021222324252627282930313233343536373839
我这里用到的是分享网页，更多分享功能参见&
微信支付用到的是&WeChat.pay(opt)&方法
后端的工作
后端需要为我们提供一个支付接口 去调取微信支付的&“统一下单”&接口，然后返回下面这些东西：&
appid: '',
partnerid: '',
prepayid: '',
noncestr: '',
timestamp: '',
package: '',
}123456789
注意：后端要严格区分大小写，这几个变量必须都小写。否则会报 “支付签名验证失败” 这类的错误
前端的工作
有了react-native-wechat，微信支付其实也就调用一个方法的事情。类似支付宝支付的action，下面是最原始的实现代码（建议把fetch封装一下）。
export function weixinPay(opt) {
return (dispatch) =& {
const uri = `http:`;
/*支付接口*/
const headers = {
...CONFIG.HEADERS,
'Authorization': opt.token,
/*发起支付请求*/
fetch(uri, { method: 'POST', headers: headers, body: JSON.stringify(opt.body)})
.then((response) =& {
if (response.status === 200) {
return response.json()
return {code: response.status}
.then((data) =& {
if (String(data.code) == '0') {
/*打开微信进行支付*/
pay(data.result, opt.success, opt.fail)
/*预支付失败的后续操作*/
opt.error && opt.error(data.error.message)
async function pay(res, success, fail) {
let result = await WeChat.pay({
partnerId: res.partnerid,
/*商家向财付通申请的商家id*/
prepayId: res.prepayid,
/*预支付订单*/
nonceStr: res.noncestr,
/*随机串，防重发*/
timeStamp: res.timestamp,
/*时间戳，防重发*/
package: res.package,
/*商家根据财付通文档填写的数据和签名*/
sign: res.sign,
/*商家根据微信开放平台文档对数据做的签名*/
/*支付成功的后续操作*/
success && success()
} catch (error) {
/*支付失败的后续操作*/
fail && fail( error ===-2 ? &用户取消& : &订单支付失败&)
}123456789101112131415161718192021222324252627282930313233343536373839404142434445
重申一下，ReactNative开发的App是NativeApp，不是WebApp或者HybridApp，所以我们需要开通的是支付宝的App支付功能，别申请错了。申请完成之后就可以接下去开发了。
支付宝支付
接入支付宝支付前建议先查看&，先按照要求创建应用并完成配置。不过要注意以下两点：
第一，App支付不能在沙箱做测试，所以我们需要先 “上线” 应用，这个过程会有1天的审核时间。&
第二，调试时建议添加个一分钱的商品作为测试商品，开发免不了要支付几次。
支付宝支付我们使用了ReactNative社区推荐的&&模块，可以使用&npm&安装
npm install react-native-yunpeng-alipay --save 1
最新版&React Native&(&=0.31) 已经支持&link&命令，不需要再使用三方的&rnpm来&link&引用了。
react-native link react-native-yunpeng-alipay1
这个操作会把&react-native-yunpeng-alipay&模块下的客户端模块自动映射到
ReactNative工程的对应的 IOS和 Android目录里。 注意，自动link并不是万能的，有些模块我们需要再手动添加一些引用。
对于IOS端，除了上面的link操作之外，我们还需要手动做下面的三件事：
添加Frameworks和Libraries
打开xcode，TARGET&-&&General&-&&Linked
Frameworks and Libraries&，添加
添加&URL Schema
打开&Info.plist，添加一项URL
打开&AppDelegate.m，添加一个函数来触发支付完成后的回调
#import &AlipayModule.h&
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
[AlipayModule handleCallback:url];
return YES;
Android端配置
Android端配置比较简单，除了上面的link操作外，我们还需要修改Manifest文件
修改Manifest
在商户应用工程的AndroidManifest.xml文件里面添加声明：
android:name=&com.alipay.sdk.app.H5PayActivity&
android:configChanges=&orientation|keyboardHidden|navigation&
android:exported=&false&
android:screenOrientation=&behind& &
android:name=&com.alipay.sdk.auth.AuthActivity&
android:configChanges=&orientation|keyboardHidden|navigation&
android:exported=&false&
android:screenOrientation=&behind& &
&123456789101112
和权限声明：
android:name=&android.permission.INTERNET& /&
android:name=&android.permission.ACCESS_NETWORK_STATE& /&
android:name=&android.permission.ACCESS_WIFI_STATE& /&
android:name=&android.permission.READ_PHONE_STATE& /&
android:name=&android.permission.WRITE_EXTERNAL_STORAGE& /&12345
添加混淆规则
在商户应用工程的proguard-project.txt里添加以下相关规则：
-libraryjars libs/alipaySDK-.jar
-keep class com.alipay.android.app.IAlixPay{*
-keep class com.alipay.android.app.IAlixPay$Stub{*
-keep class com.alipay.android.app.IRemoteServiceCallback{*
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*
-keep class com.alipay.sdk.app.PayTask{ public *
-keep class com.alipay.sdk.app.AuthTask{ public *12345678
Action封装
我们的App开发采用的是redux框架，为了方便使用，我把支付宝支付封装成了Action，你可以参考一下。
* @desc 三方支付
* @author Jafeney
* @detetime 2016-11-08
import Alipay from 'react-native-yunpeng-alipay'
import * as CONFIG from '../config'
export function alipay(opt) {
return (dispatch) =& {
const uri = `http:`;
/*支付接口*/
const headers = {
...CONFIG.HEADERS,
Authorization: opt.token
/*调用支付接口*/
fetch(uri, {method: 'POST', headers: headers, body: JSON.stringify(opt.body)})
.then((response) =& {
if (response.status === 200) {
return response.json()
return {code: response.status}
.then((data) =& {
if (String(data.code) == '0') {
/*打开支付宝进行支付*/
Alipay.pay(data.result).then((data) =& {
if (data.length && data[0].resultStatus) {
/*处理支付结果*/
switch (data[0].resultStatus) {
case &9000&:
opt.success && opt.success(data)
case &8000&:
opt.fail && opt.fail('支付结果未知,请查询订单状态')
case &4000&:
opt.fail && opt.fail('订单支付失败')
case &5000&:
opt.fail && opt.fail('重复请求')
case &6001&:
opt.fail && opt.fail('用户中途取消')
case &6002&:
opt.fail && opt.fail('网络连接出错')
case &6004&:
opt.fail && opt.fail('支付结果未知,请查询订单状态')
opt.fail && opt.fail('其他失败原因')
opt.fail && opt.fail('其他失败原因')
}, (err) =& {
opt.fail && opt.fail('支付失败，请重新支付')
opt.error && opt.error('支付参数错误')
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
@欢迎关注我的&&和&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1769948次
积分：19821
积分：19821
排名：第435名
原创：117篇
转载：1777篇
评论：82条
(106)(98)(101)(99)(137)(209)(392)(324)(117)(150)(5)(25)(88)(86)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'}