搗鼓了有一段時間了，終于搞完這個微信分享的接口接入模塊均函。直接看效果：
效果
第一步
首先你要有自己的打包簽名完的項目，運行在你的手機設(shè)備上菱涤，因為后面需要用到應(yīng)用簽名苞也。（具體怎么獲得后面會講解）
在自己的項目中，我們需要先把微信分享的布局寫好粘秆，按照上面的效果圖如迟，在這里貼出代碼，這個項目的源碼在這里攻走。我把它上傳到了github上了殷勘，大家自行參考。
/**
* Created by lam Date: 2018/8/31 Time: 下午14.25
*/
import React, {Component} from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Image,
Dimensions,
BackHandler
} from 'react-native';
const {width, height} = Dimensions.get('window');
import BackgroundPage from '../../common/BackgroundPage';
import {
Content,
Icon,
Card,
CardItem,
Text,
Left,
} from "native-base";
import {StatusBar} from "react-native";
import {zdp, zsp} from "../../utils/ScreenUtil";
import NavBar from "../../common/NavBar";
import ToastUtil from "../../utils/ToastUtil";
var WeChat = require('react-native-wechat');
export default class ShareScreen extends Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
WeChat.registerApp('wx86715bab7c585603');
this.state = {
isShowCard: false
};
}
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
//監(jiān)聽物理Back鍵回調(diào)方法returnData()告訴主頁面繼續(xù)播放視頻
onBackAndroid = () => {
const {navigate, goBack, state} = this.props.navigation;
state.params.returnData(2);
goBack();
return true;
};
//leftPress回調(diào)方法returnData()告訴主頁面繼續(xù)播放視頻
leftPress() {
this.props.navigation.state.params.returnData(2);
this.props.navigation.goBack();
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar
translucent={true}
animated={true}
backgroundColor={"#73808080"}
barStyle={"light-content"}
/>
<View style={styles.sBar} backgroundColor={'#1D82E2'}/>
<NavBar title={'邀請好友'}
leftIcon={"ios-arrow-back"}
leftPress={
this.leftPress
}/>
<Image source={require('../../assets/images/share.png')}
style={{width, height, position: 'absolute'}}/>
<View style={{
width: width,
height: zdp(80),
backgroundColor: '#fffbff99',
justifyContent: 'center',
alignItems: 'center',
bottom: 0,
position: 'absolute'
}}>
<TouchableOpacity activeOpacity={0.5}
onPress={this.wxShare}
style={{
width: width - zdp(40),
height: zdp(45),
justifyContent: 'center',
backgroundColor: 'red',
alignItems: 'center',
borderRadius: zdp(20),
shadowColor: 'grey',
shadowOffset: {width: 0, height: 5},
elevation: zdp(5)
}}>
<Text style={{fontSize: zsp(20), color: 'white'}}>
立即邀請好友加入
</Text>
</TouchableOpacity>
</View>
{this.state.isShowCard ? <BackgroundPage
backgroundColor={this.state.isShowCard ? '#e4e1e177' : 'transparent'}
onPress={() => {
this.setState({
isShowCard: false
});
}}/> : null}
{this.state.isShowCard ? this.getCardView() : null}
</View>);
}
wxShare = () => {
this.setState({
isShowCard: true
});
};
getCardView = () => {
// const card =
return (
<Content style={{
width: width - zdp(60),
marginTop: zdp(150),
alignSelf: 'center',
position: 'absolute'
}} padder>
<Card style={styles.mb}>
<CardItem header bordered>
<Text>邀請好友</Text>
</CardItem>
{this.getButtonCardItem('微信好友', 'logo-googleplus', '#DD5044', () => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({type: 'text', description: '測試微信好友分享文本'})
.catch((error) => {
ToastUtil.showShort(error.message);
});
} else {
ToastUtil.showShort('沒有安裝微信軟件昔搂，請您安裝微信之后再試');
}
});
console.log('微信分享');
})}
{this.getButtonCardItem('朋友圈', 'logo-facebook', '#3B579D', () => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({
title: '微信朋友圈測試鏈接',
description: '分享自:江清清的技術(shù)專欄(www.lcode.org)',
thumbImage: 'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg',
type: 'news',
webpageUrl: 'http://www.lcode.org'
})
.catch((error) => {
ToastUtil.showShort(error.message);
});
} else {
ToastUtil.showShort('沒有安裝微信軟件玲销，請您安裝微信之后再試');
}
});
console.log('dianji');
})}
</Card>
</Content>);
};
getButtonCardItem = (title, iconName, iconColor, onPress) => {
return (
<CardItem button onPress={
onPress
}>
<Left>
<Icon
active
name={iconName}
style={{color: iconColor}}
/>
<Text>{title}</Text>
</Left>
</CardItem>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#FFF"
},
text: {
alignSelf: "center",
marginBottom: zdp(7)
},
mb: {
marginBottom: zdp(15)
},
sBar: {
height: StatusBar.currentHeight,
width: width
},
});
第二步
2.1、申請微信開發(fā)平臺的賬戶（https://open.weixin.qq.com/）：
微信開發(fā)平臺
2.2摘符、 進(jìn)入管理中心創(chuàng)建移動應(yīng)用贤斜，填寫基本信息：
（注意策吠，應(yīng)用名稱要唯一，上傳的應(yīng)用圖標(biāo)要符合標(biāo)準(zhǔn)）
303191077566995359.jpg
2.2瘩绒、 填寫平臺信息：
這里回答一下前面提到的應(yīng)用簽名的問題猴抹。
親身實踐過，RN調(diào)試版和發(fā)布版只有發(fā)布版(app-release.apk)有對應(yīng)的簽名草讶，需要把App打包簽名后運行到手機上，然后記住App的包名炉菲，下載微信官方提供的簽名工具Gen_signatura_Android2.apk：下載鏈接
輸入應(yīng)用的包名：
復(fù)制獲取到的應(yīng)用簽名
點擊"Copy to clipboard"復(fù)制應(yīng)用簽名堕战，至此我們就拿到了App的應(yīng)用簽名。
2.3拍霜、 提交
提交審核需要一段時間的周期嘱丢，一般一天不到就可以審核完成，但是有時候說不準(zhǔn)祠饺，周期幾天的都有越驻。。
審核成功后的界面道偷，我們可以直接使用微信的分享到朋友圈和發(fā)送給朋友的接口缀旁。
第三步
在RN上接入微信依賴庫react-native-wechat，集成微信SDK（由于我是用Windows的勺鸦，這里只提供Android端的集成步驟）
3.1并巍、 安裝react-native-wechat
//npm 安裝
npm install react-native-wechat --save
//yarn 安裝
yarn add react-native-wechat
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') // Add this line only.
}
在MainActivity.java或者M(jìn)ainApplication.java文件中添加以下代碼：
import com.theweflex.react.WeChatPackage; // Add this line before public class MainActivity
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new WeChatPackage() // Add this line
);
}
在應(yīng)用程序包中創(chuàng)建一個名為'wxapi'的包换途，并在其中創(chuàng)建一個名為'WXEntryActivity'的類懊渡。以便可以獲得微信的授權(quán)和分享權(quán)限。
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();
}
}
在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中添加：
-keep class com.tencent.mm.sdk.** {
*;
}
OK军拟，至此需要做的準(zhǔn)備也做好了剃执，現(xiàn)在只需要在代碼中調(diào)用react-native-wechat庫中提供的方法就可以了！
3.3懈息、 使用
首先我們需要注冊App：
//建議在應(yīng)用啟動時初始化肾档，初始化之前無法使用此模塊的其他方法。WeChat模塊只需要初始化一次辫继。
//const wechat = require('react-native-wechat')
import *as wechat from 'react-native-wechat'
// If you register here
componentDidMount (){
wechat.registerApp('your appid')
}
在你寫的方法代碼中這樣使用 ：
{this.getButtonCardItem('微信好友', 'logo-googleplus', '#DD5044', () => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToSession({type: 'text', description: '測試微信好友分享文本'})
.catch((error) => {
ToastUtil.showShort(error.message);
});
} else {
ToastUtil.showShort('沒有安裝微信軟件阁最，請您安裝微信之后再試');
}
});
console.log('微信分享');
})}
{this.getButtonCardItem('朋友圈', 'logo-facebook', '#3B579D', () => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if (isInstalled) {
WeChat.shareToTimeline({
title: '微信朋友圈測試鏈接',
description: '分享自:江清清的技術(shù)專欄(www.lcode.org)',
thumbImage: 'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg',
type: 'news',
webpageUrl: 'http://www.lcode.org'
})
.catch((error) => {
ToastUtil.showShort(error.message);
});
} else {
ToastUtil.showShort('沒有安裝微信軟件，請您安裝微信之后再試');
}
});
console.log('dianji');
})}
其中
- title是分享時顯示的標(biāo)題骇两，
- description是描述的內(nèi)容體速种，
- webpageurl點擊后打開的鏈接，
- thumbImage低千，這個是分享時左側(cè)現(xiàn)實的圖片配阵，
- imageUrl馏颂，這個和webpageurl類似，是分享的圖片地址棋傍，
- videoUrl這是分享的視頻地址
- musicUrl這是分享的音樂地址
- filePath這是分享文件地址救拉，可以分享文件
- fileExtension，這個是分享的文件的后綴瘫拣，如果分享的是doc文檔亿絮，如：fileExtension：‘.doc’;
此外還有監(jiān)聽的方法：addListener(eventType, listener[, context])
效果如下所示：
發(fā)送給好友：
分享到朋友圈：
四、注意事項
出現(xiàn)點擊微信分享后麸拄，返回錯誤碼-6：
- 申請key不正確派昧。
如簽名是79:1E:0B:61:1B:2F:E0:24,要填寫成791E0B611B2FE024. - 運行打包時用的簽名和申請微信key用的簽名不是同一個簽名
點擊微信分享沒反應(yīng)：
打印日志觀察是否有錯誤信息；試著關(guān)機重啟拢切。
改包名的話集中在三個地方更改：
（1）java的類包 rename
（2）微信接口包 包名.wxapi
（3）AndroidManifest.xml 中 包名屬性
改完需要等一會蒂萎，十分鐘左右，如果還是不行淮椰，點擊分享之后沒反應(yīng)五慈，可以跟我一樣手機關(guān)機重啟一下，微信可能有緩存了~
OK主穗，結(jié)束泻拦！
參考文章：
React-Native之微信好友、朋友圈分享忽媒、支付
React Native綁定微信分享/登錄/支付（演示+實現(xiàn)步驟+注意事項）
打安卓包聪轿，更換包名 的 三個 關(guān)鍵點 微信登錄接入流程
react-native-wechat微信組件的使用
