（Android）react-native-wechat组件的使用总结（重点微信支付）

参照react-native-wechat组件的官方网址：https://github.com/yorkie/react-native-wechat

api的详细用法：http://www.jianshu.com/p/3f424cccb888

1、初始化一个wxzf的RN项目，我使用的是0.46.1版本。

2、安装react-native-wechat组件

npm install react-native-wechat --save
或者用

yarn add react-native-wechat --save
3、用Android Studio打开项目的android部分

在android/settings.gradle文件下添加以下代码：

include ':react-native-wechat'
project(':react-native-wechat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
在android/app/build.gradle的dependencies部分添加以下代码：

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules

//添加这一行代码
compile project(':react-native-wechat')
}
4、在MainApplication.java文件中添加以下代码：

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new WeChatPackage() // Add this line
);
}不要忘记用Alt+Enter引包。
tip：当Android Studio没有加载出来react-native-wechat的Android部分时候，将该项目关闭重启即可。

5、在应用程序包中创建一个名为'wxapi'的包，并在其中创建一个名为'WXEntryActivity'的类。以便可以获得微信的授权和分享权限。



WXEntryActivity.java 文件的内容：

package com.wxzf.wxapi;

import android.app.Activity;
import android.os.Bundle;

import com.theweflex.react.WeChatModule;

/**
* Created by admin on 2017/11/1.
*/

public class WXEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}tip:对Android新手来说只复制主代码，用Alt+Enter引包就行。

6、在“wxapi”的包中创建一个名为“WXPayEntryActivity”的类。 以便可以获得微信支付权限。
WXPayEntryActivity.java文件内容：

package com.wxzf.wxapi;

import android.app.Activity;
import android.os.Bundle;

import com.theweflex.react.WeChatModule;

/**
* Created by admin on 2017/11/1.
*/

public class WXPayEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule
4000
.handleIntent(getIntent());
finish();
}
}
7、在AndroidManifest.xml添加声明

<!--注册activity-->
<activity
android:name=".wxapi.WXEntryActivity"
android:label="@string/app_name"
android:exported="true"
/>
<!--注册activity-->
<activity
android:name=".wxapi.WXPayEntryActivity"
android:label="@string/app_name"
android:exported="true"
/>

8、在proguard-rules.pro中添加：

-keep class com.tencent.mm.sdk.** {
*;
}
到目前为止对组件的配置完成了。

9、实现微信分享、微信支付的操作。

//建议在应用启动时初始化，初始化之前无法使用此模块的其他方法。WeChat模块只需要初始化一次。
//const wechat = require('react-native-wechat')
import *as wechat from 'react-native-wechat'
// If you register here
componentDidMount (){
wechat.registerApp('your appid')
}
判断是否安装微信如果安装打开微信：
<TouchableOpacity style={styles.btn} onPress={()=>{
wechat.isWXAppInstalled()
.then((isInstalled)=>{
if(isInstalled){
wechat.openWXApp()
}else {
ToastAndroid.show('没有安装微信软件，请您安装微信之后再试', ToastAndroid.SHORT)
}
})
}
}>
<Text>判断是否安装微信</Text>
</TouchableOpacity>
分享到朋友圈：

<TouchableOpacity style={styles.btn} onPress={()=>{
wechat.shareToTimeline({
type: 'imageUrl',
title: 'web image',
description: 'share web image to time line',
mediaTagName: 'email signature',
messageAction: undefined,
messageExt: undefined,
imageUrl: 'http://www.ncloud.hk/email-signature-262x100.png'
}).then((success)=>{
console.log(success)
}).catch((error)=>{
console.log(error)
})
}}>
<Text>分享到朋友圈</Text>
</TouchableOpacity>

注意：Android和IOS不同的地方在于，一定先要在微信开放平台创建移动应用，获得到appid并且将对应的权限全部开通。才能够使用分享和支付功能。


下面是Android平台中的应用签名和包名，正式版本和debug版本的应用签名是不一样的，在https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319167&token=0aa7d87035ea33a0e939fe446ee1e7f96c7a2fa7&lang=zh_CN网址上面下载签名生成工具（或者通过百度GenSignature下载），通过输入包名（AndroidManifest.xml中package="com.wxzf"引号引的内容是包名）获得签名。



微信支付：
<TouchableOpacity style={styles.btn} onPress={()=>{
wechat.pay(
{
partnerId: '', // 商家向财付通申请的商家id
prepayId: '', // 预支付订单
nonceStr: '', // 随机串，防重发
timeStamp: '', // 时间戳，防重发
package: '', // 商家根据财付通文档填写的数据和签名
sign: '' // 商家根据微信开放平台文档对数据做的签名
}
).then((success)=>{
console.log(success)
}).catch((error)=>{
console.log(error)
})
}}>
<Text>微信支付</Text>
</TouchableOpacity>

至此，前端的操作基本完成。