(一)前言
React Native開發(fā)使用到微信好友或者微信朋友圈分享功能，閑來沒事寫一下舱禽，需要的可以看下
(二)應(yīng)用申請審核
首先微信開發(fā)平臺(tái)去注冊賬號(hào)并且創(chuàng)建一個(gè)移動(dòng)應(yīng)用炒刁。(地址:https://open.weixin.qq.com)
將所必填的信息填寫完整，應(yīng)用名稱以及中英文（英文是選填的）的信息誊稚，移動(dòng)應(yīng)用圖標(biāo)分別為28x28何108x108的png格式圖標(biāo)翔始。
繼續(xù)點(diǎn)擊下一步填寫iOS項(xiàng)目的bundle ID以及android項(xiàng)目的包名和應(yīng)用簽名罗心。請注意應(yīng)用簽名獲取需要安裝一下獲取簽名信息的APK包，同時(shí)你的android應(yīng)用也需要打包以后安裝在手機(jī)上面城瞎，這樣再去獲取渤闷。具體獲取方式見下面的圖
下載獲取第三方應(yīng)用的簽名信息apk
下載安裝上面的簽名信息包apk,然后在上面輸入android項(xiàng)目的包名，點(diǎn)擊獲取簽名信息
android項(xiàng)目的包名路徑:android/app/build.gradle中的applicationId標(biāo)簽數(shù)據(jù)脖镀。
把上面的簽名信息填寫到下面的網(wǎng)頁上面,點(diǎn)擊提交審核即可飒箭。然后就是等待吧，官方說是7個(gè)工作日蜒灰，不過一般也就是幾個(gè)小時(shí)就可以通過審核了吧补憾。
(三)安裝配置微信分享庫
官放項(xiàng)目地址:https://github.com/weflex/react-native-wechat 該庫不僅支持微信分享，還支持微信登錄卷员，收藏以及微信支付的盈匾。但登錄，支付之類的功能需要開通開發(fā)者認(rèn)證權(quán)限毕骡，需要300元一年削饵。
3.1.進(jìn)入根目錄安裝：
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或者M(jìn)ainApplication.java（我是配置了在這個(gè)文件內(nèi)）文件中添加以下代碼：
import com.theweflex.react.WeChatPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new WeChatPackage()
);
}
如下圖所示：
創(chuàng)建名為'wxapi'的文件夾，并在文件夾內(nèi)創(chuàng)建WXEntryActivity.java未巫，用于獲得微信的授權(quán)和分享權(quán)限窿撬。
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();
}
}
創(chuàng)建名為'wxapi'的文件夾，并在文件夾內(nèi)創(chuàng)建WXPayEntryActivity.java叙凡，用于獲得微信的授權(quán)和支付權(quán)限劈伴。
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添加聲明
<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>
在proguard-rules.pro中添加(代碼為混淆設(shè)置)：
-keep class com.tencent.mm.sdk.** {
*;
}
ios配置
自動(dòng)配置執(zhí)行以下命令：
react-native link react-native-wechat
react-native-wechat ios dependency
本人不推薦自動(dòng)配置，因?yàn)闀?huì)報(bào)以下錯(cuò)誤：
接下來看手動(dòng)配置方法：
1.點(diǎn)擊Libraries右側(cè)的ADD Files to
選擇如下內(nèi)容：
2.在工程Build Phases ? Link Binary With Libraries中添加libRCTWeChat.a
3.在工程target的Build Phases->Link Binary with Libraries中加入下面庫文件：
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
4.在TARGETS 下項(xiàng)目名 -> info ,添加我們申請得到的微信 AppId填寫在 "URL type"的"URL Schema"處握爷，ldentifier填寫為：weixin
5.iOS9 以上跛璧，添加 微信白名單
6.在項(xiàng)目的AppDelegate.m添加以下代碼，啟動(dòng)[LinkingIOS]
#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];
}
配置完成了新啼，累死寶寶了～～～
接下來就是運(yùn)用：
在組件內(nèi)引入：
import * as WeChat from 'react-native-wechat'
并且在構(gòu)造函數(shù)內(nèi)添加你的appid：
WeChat.registerApp('你的appid');
如下圖：
然后就是點(diǎn)擊分享了：
先自定義一個(gè)組件（為了復(fù)用追城，縮減代碼）：
class OButton extends Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
使用組件：
<View style={{margin:20}}>
<Text style={styles.welcome}>
微信分享
</Text>
<OButton text='微信好友分享的文本'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({type: 'text', description: '測試微信好友分享的文本內(nèi)容'})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('請安裝微信');
}
});
}}
/>
<OButton text='微信好友分享鏈接'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({
title:'微信好友測試的鏈接',
description: '分享的標(biāo)題內(nèi)容',
thumbImage: '分享的標(biāo)題圖片',
type: 'news',
webpageUrl: '分享的鏈接'
})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('請安裝微信');
}
});
}}
/>
<OButton text='微信朋友圈分享的文本'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({type: 'text', description: '測試微信朋友圈分享的文本內(nèi)容'})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('請安裝微信');
}
});
}}
/>
<OButton text='微信朋友圈分享的鏈接'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({
title:'分享的標(biāo)題',
description: '分享的標(biāo)題內(nèi)容',
thumbImage: '分享的標(biāo)題圖片',
type: 'news',
webpageUrl: '分享的鏈接'
})
.catch((error) => {
Alert.alert(error.message);
});
} else {
Alert.alert('請安裝微信');
}
});
}}
/>
<OButton text='微信支付'
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.pay({
partnerId: 'xxxxxx', // 商家向財(cái)付通申請的商家id
prepayId: 'xxxxxx', // 預(yù)支付訂單
nonceStr:'xxxxxx', // 隨機(jī)串，防重發(fā)
timeStamp: 'xxxxxxx' , // 時(shí)間戳燥撞，防重發(fā).
package: 'Sign=WXPay', // 商家根據(jù)財(cái)付通文檔填寫的數(shù)據(jù)和簽名
sign: 'xxxxxxxxx' // 商家根據(jù)微信開放平臺(tái)文檔對數(shù)據(jù)做的簽名
}).then((requestJson)=>{
//支付成功回調(diào)
if (requestJson.errCode=="0"){
//回調(diào)成功處理
}
}).catch((err)=>{
Alert.alert('支付失敗')
})
} else {
Alert.alert('請安裝微信');
}
});
}}
/>
</View>
最后再給大家說一個(gè)小bug,若是出現(xiàn)點(diǎn)擊微信分享閃退問題時(shí)座柱，請檢查你app的簽名是否正確，因?yàn)殚_發(fā)版和公布版的簽名是不一致的物舒，需要改成公布版的色洞，簽名獲取方式微信開放平臺(tái)有apk,也可以給我要。
如果還是閃退冠胯，終極大招；鹬睢！涵叮！清除微信緩存就好了２氧濉！割粮！親測有效６芡搿！舀瓢！
覺得有用的小伙伴點(diǎn)個(gè)關(guān)注和小紅心就行??廷雅，么么噠。
