對我來說link沒有成功過,所以參考了其他人的文章,原文:https://www.jianshu.com/p/6a792118fae4
第一步:要去:https://open.weixin.qq.com (微信開發平台)注冊賬號並且創建一個移動應用。
創建應用的時候需要填寫Bundle ID(ios)和包名(安卓)
Bundle ID在哪里? 原文:https://blog.csdn.net/a546822414/article/details/71403641
1、修改 info.plist 文件中的 Bundle identifier(改成你想要的那個Bundle identifier,如:com.example.xxx),編譯通過后,此時你會發現個 project ->Target ->General 中的 Bundle identifier發生了變化,變成了 com.example.xxx。
2、修改 Project -> Build Setting -> Packaging -> Produce Bundle Identifier
安卓的包名在哪?
在android/app/src/main/java,
應用簽名(安卓需要):需要下載簽名生成工具,輸入包名獲取
下載簽名生成工具
第二步安裝:npm install react-native-wechat --save
安卓配置:
1.在android/settings.gradle文件下添加以下代碼:
include ':RCTWeChat' project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
2.在android/app/build.gradle的dependencies部分添加以下代碼:
dependencies {
compile project(':RCTWeChat') }
3.在MainActivity.java或者MainApplication.java(我是配置了這個文件)文件中添加以下代碼:
import com.theweflex.react.WeChatPackage; @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( ... new WeChatPackage() ); }
4.創建名為'wxapi'的文件夾,

並在文件夾內創建WXEntryActivity.java,用於獲得微信的授權和分享權限。再創建WXPayEntryActivity.java,用於獲得微信的授權和支付權限。
WXEntryActivity.java代碼:
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(); } }
WXPayEntryActivity.java代碼
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(); } }
5.在AndroidManifest.xml添加聲明
<manifest> <application> <activity android:name=".wxapi.WXEntryActivity" android:label="@string/app_name" android:exported="true" /> <activity android:name=".wxapi.WXPayEntryActivity" android:label="@string/app_name" android:exported="true" /> </application> </manifest>
6.在proguard-rules.pro中添加(代碼為混淆設置):直接復制在文件最后一行
-keep class com.tencent.mm.sdk.** { *; }
ios配置
1.打開xcode,選中Libaries---》Add Files to “項目名”

2.添加項目下的node_modules/react-native-wechat/ios/RCTWeChat.xcodeproj
3.添加庫文件(看圖片第5步可以添加,以下5個庫文件是要添加的)
SystemConfiguration.framework CoreTelephony.framework libsqlite3.0 libc++ libz
4.添加url type
5.iOS9 以上,添加 微信白名單
6.在項目的AppDelegate.m添加以下代碼
#import <React/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]; }
以下是配置完后組件使用:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
ToastAndroid,
} from 'react-native';
import * as WeChat from 'react-native-wechat';
//import fs from 'react-native-fs';
class CustomButton extends Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
export default class RNWeChatDemo extends Component {
constructor(props) {
super(props);
//應用注冊
// WeChat.registerApp('wx17256bd80120bb2b');
}
componentDidMount(){
WeChat.registerApp('wx17256bd80120bb2b').then(function(){
// return WeChat.openWXApp()
})}
render() {
return (
<View style={{margin:20}}>
<Text style={styles.welcome}>
微信好友/朋友圈分享實例
</Text>
<CustomButton text='微信好友分享-文本'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({type: 'text', description: '測試微信好友分享文本'})
.catch((error) => {
ToastShort(error.message);
});
} else {
ToastShort('沒有安裝微信軟件,請您安裝微信之后再試');
}
});
}}
/>
<CustomButton text='微信好友分享-鏈接'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({
title:'微信好友測試鏈接',
description: '分享自:江清清的技術專欄(www.lcode.org)',
thumbImage: 'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg',
type: 'news',
webpageUrl: 'http://www.lcode.org'
})
.catch((error) => {
ToastShort(error.message);
});
} else {
ToastShort('沒有安裝微信軟件,請您安裝微信之后再試');
}
});
}}
/>
<CustomButton text='微信朋友圈分享-文本'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({type: 'text', description: '測試微信朋友圈分享文本'})
.catch((error) => {
ToastShort(error.message);
});
} else {
ToastShort('沒有安裝微信軟件,請您安裝微信之后再試');
}
});
}}
/>
<CustomButton text='微信朋友圈分享-鏈接'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({
title:'微信朋友圈測試鏈接',
description: '分享自:江清清的技術專欄(www.lcode.org)',
thumbImage: 'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg',
type: 'news',
webpageUrl: 'http://www.lcode.org'
})
.catch((error) => {
ToastShort(error.message);
});
} else {
ToastShort('沒有安裝微信軟件,請您安裝微信之后再試');
}
});
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
button: {
margin:5,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
},
});