(一)前言
本文主要會涉及到以下內(nèi)容:
微信開發(fā)者應(yīng)用申請審核
安裝配置微信分享庫
微信好友/朋友圈功能實現(xiàn)
(二)應(yīng)用申請審核
首先大家需要去微信開發(fā)平臺去注冊賬號并且創(chuàng)建一個移動應(yīng)用粒蜈。(地址:https://open.weixin.qq.com)
開始創(chuàng)建移動應(yīng)用,填寫應(yīng)用名稱,應(yīng)用名稱以及中英文的信息蒿柳，移動應(yīng)用圖標(biāo)分別為28x28何108x108的png格式圖標(biāo)麸澜。
然后下一步填寫iOS項目的bundle ID以及android項目的包名和應(yīng)用簽名烂瘫。請注意應(yīng)用簽名獲取需要安裝一下獲取簽名信息的APK包椒袍，同時你的android應(yīng)用也需要打包以后安裝在手機上面沐绒，這樣再去獲取谋作。具體獲取方式見下面的圖
下載獲取第三方應(yīng)用的簽名信息apk
下載安裝上面的簽名信息包apk,然后在上面輸入android項目的包名息裸，點擊獲取簽名信息
android項目的包名路徑:android/app/build.gradle中的applicationId標(biāo)簽數(shù)據(jù)。
把上面的簽名信息填寫到下面的網(wǎng)頁上面,點擊提交審核即可岭洲。然后就是等待吧宛逗，官方說是7個工作日，不過一般也就是幾個小時就可以通過審核了吧钦椭。
(三)安裝配置微信分享庫
github上面已經(jīng)有封裝微信分享的原生SDK庫了拧额，大家可以進行去下載安裝，然后RN端就可以進行調(diào)用使用了彪腔。具體項目地址:https://github.com/weflex/react-native-wechat不過該庫不僅支持微信分享侥锦，還支持微信登錄，收藏以及微信支付的德挣。但是登錄恭垦，支付之類的功能需要開通開發(fā)者認證權(quán)限，那是需要300元一年的啦~
3.1.庫安裝方法:npm install react-native-wechat --save
3.2.Android版本安裝配置方法
①.在android/settings.gradle文件中添加如下代碼:
include':RCTWeChat'
project(':RCTWeChat').projectDir =newFile(rootProject.projectDir,'../node_modules/react-native-wechat/android')
②.在android/app/build.gradle文件中的dependencies標(biāo)簽中添加模塊依賴
...
dependencies {
...
compile project(':RCTWeChat')// Add this line only.
}
③.在MainActivity.java文件中添加如下代碼
importcom.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
protectedList getPackages() {
returnArrays.asList(
newMainReactPackage()
,newWeChatPackage()// Add this line
);
}
④.在android項目中創(chuàng)建wxapi包名格嗅，在該包名底下創(chuàng)建WXEntryActivity.java類番挺，該類用于去微信獲取請求以及響應(yīng)。
packageyour.package.wxapi;
importandroid.app.Activity;
importandroid.os.Bundle;
importcom.theweflex.react.WeChatModule;
publicclassWXEntryActivityextendsActivity{
@Override
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}
⑤.在AndroidManifest.xml文件中添加剛剛創(chuàng)建的Actiivty的配置
...
...
android:name=".wxapi.WXEntryActivity"
android:label="@string/app_name"
android:exported="true"
/>
⑥.混淆設(shè)置,在proguard-rules.pro中添加如下代碼屯掖，當(dāng)然如果不混淆就不安全啦
-keepclasscom.tencent.mm.sdk.** {
*;
}
3.3.iOS版本安裝配置方法
①.我們之前已經(jīng)執(zhí)行過npm安裝微信庫了玄柏，接下來我們有兩種方法進行鏈接第一種就是直接通過rnpm link，如下:
當(dāng)然如果大家這種方案沒有成功鏈接的話贴铜，可以采用手動方式了粪摘，具體教程請點擊進入
②.接下來在xcode中添加部分庫依賴(Link Binary With Libraries):
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
③.選中Targets-info配置中URL Schema中配置剛申請下來的appid
④.為了iOS9.0的支持，在Targets-info中的Custom iOS Traget Properties標(biāo)簽中添加LSApplicationQueriesSchemes字段绍坝，值分別為wechat和weixin
⑤.接下來需要在APPDelete.m文件中做一下Linking的處理配置(具體有關(guān)Linking的配置請點擊查看)
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return[RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
(四)微信好友/朋友圈分享實例
上面我們已經(jīng)把基本安裝配置已經(jīng)講解完成了徘意，下面我們通過實例來進行演示一下，主要演示分享到好友/朋友圈的鏈接以及文本轩褐，關(guān)于更多的分享實例例如文件椎咧，圖片，視頻把介，語言等等可以查看項目的說明文件即可勤讽。
分享實例步驟:
注冊應(yīng)用
本文/朋友圈分享
Android測試應(yīng)用需要打包測試
iOS版本直接測試即可,代碼和下面一樣
讓我們來看一下實例代碼，今天主要演示好友文本/鏈接以及朋友圈文本/鏈接分享:
/**
* Sample React Native App
*https://github.com/facebook/react-native
* @flow
*/
importReact, { Component } from'react';
import{
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
ToastAndroid,
} from'react-native';
var WeChat=require('react-native-wechat');
//import fs from 'react-native-fs';
classCustomButtonextendsComponent {
render() {
return(
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
{this.props.text}
);
}
}
classRNWeChatDemoextendsComponent {
constructor(props) {
super(props);
//應(yīng)用注冊
WeChat.registerApp('wx8d560da3ba038e7e');
}
render() {
return(
微信好友/朋友圈分享實例
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToSession({type:'text', description:'測試微信好友分享文本'})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('沒有安裝微信軟件拗踢，請您安裝微信之后再試');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToSession({
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) => {
ToastShort(error.message);
});
}else{
ToastShort('沒有安裝微信軟件地技，請您安裝微信之后再試');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToTimeline({type:'text', description:'測試微信朋友圈分享文本'})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('沒有安裝微信軟件，請您安裝微信之后再試');
}
});
}}
/>
onPress={() => {
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) => {
ToastShort(error.message);
});
}else{
ToastShort('沒有安裝微信軟件秒拔，請您安裝微信之后再試');
}
});
}}
/>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize:20,
textAlign:'center',
margin:10,
},
button: {
margin:5,
backgroundColor:'white',
padding:15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor:'#cdcdcd',
},
});
AppRegistry.registerComponent('RNWeChatDemo', () => RNWeChatDemo);
運行效果:
(五)最后總結(jié)
今天帶著大家從最基本開始一起來實現(xiàn)一下微信分享功能，當(dāng)然除了分享文本和鏈接以外，還可以分享語音砂缩，視頻作谚，圖片，文件等等庵芭。這些相關(guān)的使用API可以參考上面WeChat庫中的文檔即可妹懒。
剛創(chuàng)建的React Native交流6群:426762904,歡迎各位大牛,React Native技術(shù)愛好者加入交流!同時博客右側(cè)歡迎微信掃描關(guān)注訂閱號,移動技術(shù)干貨,精彩文章技術(shù)推送!
本文章實例項目地址:https://github.com/leechuanjun/TLReactNativeProject/tree/dev-1.1.0-combat
來源：超詳細React Native實現(xiàn)微信好友/朋友圈分享功能-Android/iOS雙平臺通用-江清清的技術(shù)專欄
