react-native-wechat|react-native-wechat （react-native 微信分享、支付)
(一)前言
React Native开发使用到微信好友或者微信朋友圈分享功能，闲来没事写一下，需要的可以看下
(二)应用申请审核
首先微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com)
文章图片
333.png
文章图片
91C99A79-B61F-4C25-8DFE-E75A4E675B1D.png 将所必填的信息填写完整，应用名称以及中英文（英文是选填的）的信息，移动应用图标分别为28x28何108x108的png格式图标。
文章图片
35D07917-5C6C-45C5-BED9-603EF65A9A5B.png 继续点击下一步填写iOS项目的bundle ID以及android项目的包名和应用签名。请注意应用签名获取需要安装一下获取签名信息的APK包，同时你的android应用也需要打包以后安装在手机上面，这样再去获取。具体获取方式见下面的图
文章图片
03ED3C36-033C-4474-B3F9-36CB0593A654.png 下载获取第三方应用的签名信息apk
文章图片
image
【react-native-wechat|react-native-wechat （react-native 微信分享、支付)】下载安装上面的签名信息包apk,然后在上面输入android项目的包名，点击获取签名信息
android项目的包名路径:android/app/build.gradle中的applicationId标签数据。
文章图片
image
把上面的签名信息填写到下面的网页上面,点击提交审核即可。然后就是等待吧，官方说是7个工作日，不过一般也就是几个小时就可以通过审核了吧。
文章图片
5DCFCDB9-E647-478F-9CCE-C057E3181E07.png (三)安装配置微信分享库
官放项目地址:https://github.com/weflex/react-native-wechat 该库不仅支持微信分享，还支持微信登录，收藏以及微信支付的。但登录，支付之类的功能需要开通开发者认证权限，需要300元一年。
3.1.进入根目录安装：
npm install react-native-wechat --save
3.2.Android版本安装配置方法
在android/settings.gradle文件下添加以下代码：
include ':RCTWeChat'
project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
在android/app/build.gradle的dependencies部分添加以下代码：
dependencies {
compile project(':RCTWeChat')
}
在MainActivity.java或者MainApplication.java（我是配置了在这个文件内）文件中添加以下代码：
import com.theweflex.react.WeChatPackage;
@Override
protected List getPackages() {
return Arrays.asList(
...
new WeChatPackage()
);
}
如下图所示：
文章图片
7E5148D1-761C-46DE-BC8B-412CB818A00D.png 创建名为'wxapi'的文件夹，并在文件夹内创建WXEntryActivity.java，用于获得微信的授权和分享权限。
WXEntryActivity.java代码：package your.package.wxapi;
import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;
public class WXEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}
创建名为'wxapi'的文件夹，并在文件夹内创建WXPayEntryActivity.java，用于获得微信的授权和支付权限。
WXPayEntryActivity.java代码package your.package.wxapi;
import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;
public class WXPayEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}在AndroidManifest.xml添加声明
在proguard-rules.pro中添加(代码为混淆设置)：
-keep class com.tencent.mm.sdk.** {
*;
}
ios配置
自动配置执行以下命令：
react-native link react-native-wechatreact-native-wechat ios dependency本人不推荐自动配置，因为会报以下错误：
文章图片
99836874C019220D17AA109CA4B4F5A4.jpg
接下来看手动配置方法：
1.点击Libraries右侧的ADD Files to
文章图片
屏幕快照 2018-02-05 上午10.04.14.png
选择如下内容：
0C055476-FF19-41DC-9CD4-FC82CDACDA7B.png
2.在工程Build Phases ? Link Binary With Libraries中添加libRCTWeChat.a
文章图片
C9352A2F-B689-4273-9C04-91D51AC39B26.png 3.在工程target的Build Phases->Link Binary with Libraries中加入下面库文件：
文章图片
2B9E893E-DB71-423A-9270-D4C64219FF5F.png
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
4.在TARGETS 下项目名 -> info ,添加我们申请得到的微信 AppId填写在 "URL type"的"URL Schema"处，ldentifier填写为：weixin
文章图片
B82A7741-D712-49AC-B668-2B5AC5EE6280.png
5.iOS9 以上，添加 微信白名单
文章图片
4FA96B25-E505-41C3-81AA-D655152D3DC7.png
6.在项目的AppDelegate.m添加以下代码，启动[LinkingIOS]
#import - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
配置完成了，累死宝宝了～～～
接下来就是运用：
在组件内引入：
import * as WeChat from 'react-native-wechat'并且在构造函数内添加你的appid：
WeChat.registerApp('你的appid');
如下图：
文章图片
A586CFCA-6BA4-42C1-A2EC-EED5AB0A0CB2.png
然后就是点击分享了：
先自定义一个组件（为了复用，缩减代码）：
class OButton extends Component {
render() {
return (
{this.props.text}
);
}
}
使用组件：
微信分享
{
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({type: 'text', description: '测试微信好友分享的文本内容'})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('请安装微信');
}
});
}}
/>
{
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({
title:'微信好友测试的链接',
description: '分享的标题内容',
thumbImage: '分享的标题图片',
type: 'news',
webpageUrl: '分享的链接'
})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('请安装微信');
}
});
}}
/>
{
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({type: 'text', description: '测试微信朋友圈分享的文本内容'})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('请安装微信');
}
});
}}
/>
{
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({
title:'分享的标题',
description: '分享的标题内容',
thumbImage: '分享的标题图片',
type: 'news',
webpageUrl: '分享的链接'
})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('请安装微信');
}
});
}}
/> {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.pay({
partnerId: 'xxxxxx',// 商家向财付通申请的商家id
prepayId: 'xxxxxx',// 预支付订单
nonceStr:'xxxxxx',// 随机串，防重发
timeStamp: 'xxxxxxx',// 时间戳，防重发.
package: 'Sign=WXPay',// 商家根据财付通文档填写的数据和签名
sign: 'xxxxxxxxx'// 商家根据微信开放平台文档对数据做的签名
}).then((requestJson)=>{
//支付成功回调
if (requestJson.errCode=="0"){
//回调成功处理
}
}).catch((err)=>{
Alert.alert('支付失败')
})
} else {
Alert.alert('请安装微信');
}
});
}}
/>
最后再给大家说一个小bug,若是出现点击微信分享闪退问题时，请检查你app的签名是否正确，因为开发版和公布版的签名是不一致的，需要改成公布版的，签名获取方式微信开放平台有apk,也可以给我要。
如果还是闪退，终极大招！！！清除微信缓存就好了！！！亲测有效！！！
觉得有用的小伙伴点个关注和小红心就行，么么哒。
友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！
推荐阅读
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
- react-native中Text包含Image大小问题
- React-Native开发工具|React-Native开发工具 -- Vs Code
- react-native 打包apk步骤
- react-native|react-native 获取百度地图sha1
- react|react-native支付宝，微信支付对接接口
- 使用react-native仿写一个qq音乐播放
- react-native|react-native redux 与 react-redux 的基本使用
- React-native 开发小技巧
- react-native|react-native 安卓真机调试报错Could not expand ZIP