(一)前言
本文主要會(huì)涉及到以下內(nèi)容:
微信開(kāi)發(fā)者應(yīng)用申請(qǐng)審核
安裝配置微信分享庫(kù)
微信好友/朋友圈功能實(shí)現(xiàn)
(二)應(yīng)用申請(qǐng)審核
首先大家需要去微信開(kāi)發(fā)平臺(tái)去注冊(cè)賬號(hào)并且創(chuàng)建一個(gè)移動(dòng)應(yīng)用。(地址:https://open.weixin.qq.com)
開(kāi)始創(chuàng)建移動(dòng)應(yīng)用,填寫(xiě)應(yīng)用名稱,應(yīng)用名稱以及中英文的信息，移動(dòng)應(yīng)用圖標(biāo)分別為28x28何108x108的png格式圖標(biāo)。
然后下一步填寫(xiě)iOS項(xiàng)目的bundle ID以及android項(xiàng)目的包名和應(yīng)用簽名。請(qǐng)注意應(yīng)用簽名獲取需要安裝一下獲取簽名信息的APK包，同時(shí)你的android應(yīng)用也需要打包以后安裝在手機(jī)上面，這樣再去獲取。具體獲取方式見(jiàn)下面的圖
下載獲取第三方應(yīng)用的簽名信息apk
下載安裝上面的簽名信息包apk,然后在上面輸入android項(xiàng)目的包名，點(diǎn)擊獲取簽名信息
android項(xiàng)目的包名路徑:android/app/build.gradle中的applicationId標(biāo)簽數(shù)據(jù)。
把上面的簽名信息填寫(xiě)到下面的網(wǎng)頁(yè)上面,點(diǎn)擊提交審核即可。然后就是等待吧，官方說(shuō)是7個(gè)工作日，不過(guò)一般也就是幾個(gè)小時(shí)就可以通過(guò)審核了吧。
(三)安裝配置微信分享庫(kù)
github上面已經(jīng)有封裝微信分享的原生SDK庫(kù)了，大家可以進(jìn)行去下載安裝，然后RN端就可以進(jìn)行調(diào)用使用了。具體項(xiàng)目地址:https://github.com/weflex/react-native-wechat不過(guò)該庫(kù)不僅支持微信分享，還支持微信登錄，收藏以及微信支付的。但是登錄，支付之類的功能需要開(kāi)通開(kāi)發(fā)者認(rèn)證權(quán)限，那是需要300元一年的啦~
3.1.庫(kù)安裝方法: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項(xiàng)目中創(chuàng)建wxapi包名，在該包名底下創(chuàng)建WXEntryActivity.java類，該類用于去微信獲取請(qǐng)求以及響應(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í)行過(guò)npm安裝微信庫(kù)了，接下來(lái)我們有兩種方法進(jìn)行鏈接第一種就是直接通過(guò)rnpm link，如下:
當(dāng)然如果大家這種方案沒(méi)有成功鏈接的話，可以采用手動(dòng)方式了，具體教程請(qǐng)點(diǎn)擊進(jìn)入
②.接下來(lái)在xcode中添加部分庫(kù)依賴(Link Binary With Libraries):
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
③.選中Targets-info配置中URL Schema中配置剛申請(qǐng)下來(lái)的appid
④.為了iOS9.0的支持，在Targets-info中的Custom iOS Traget Properties標(biāo)簽中添加LSApplicationQueriesSchemes字段，值分別為wechat和weixin
⑤.接下來(lái)需要在APPDelete.m文件中做一下Linking的處理配置(具體有關(guān)Linking的配置請(qǐng)點(diǎn)擊查看)
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return[RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
(四)微信好友/朋友圈分享實(shí)例
上面我們已經(jīng)把基本安裝配置已經(jīng)講解完成了，下面我們通過(guò)實(shí)例來(lái)進(jìn)行演示一下，主要演示分享到好友/朋友圈的鏈接以及文本，關(guān)于更多的分享實(shí)例例如文件，圖片，視頻，語(yǔ)言等等可以查看項(xiàng)目的說(shuō)明文件即可。
分享實(shí)例步驟:
注冊(cè)應(yīng)用
本文/朋友圈分享
Android測(cè)試應(yīng)用需要打包測(cè)試
iOS版本直接測(cè)試即可,代碼和下面一樣
讓我們來(lái)看一下實(shí)例代碼，今天主要演示好友文本/鏈接以及朋友圈文本/鏈接分享:
/**
* 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)用注冊(cè)
WeChat.registerApp('wx8d560da3ba038e7e');
}
render() {
return(
微信好友/朋友圈分享實(shí)例
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToSession({type:'text', description:'測(cè)試微信好友分享文本'})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('沒(méi)有安裝微信軟件，請(qǐng)您安裝微信之后再試');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToSession({
title:'微信好友測(cè)試鏈接',
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('沒(méi)有安裝微信軟件，請(qǐng)您安裝微信之后再試');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToTimeline({type:'text', description:'測(cè)試微信朋友圈分享文本'})
.catch((error) => {
ToastShort(error.message);
});
}else{
ToastShort('沒(méi)有安裝微信軟件，請(qǐng)您安裝微信之后再試');
}
});
}}
/>
onPress={() => {
WeChat.isWXAppInstalled()
.then((isInstalled) => {
if(isInstalled) {
WeChat.shareToTimeline({
title:'微信朋友圈測(cè)試鏈接',
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('沒(méi)有安裝微信軟件，請(qǐng)您安裝微信之后再試');
}
});
}}
/>
);
}
}
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);
運(yùn)行效果:
(五)最后總結(jié)
今天帶著大家從最基本開(kāi)始一起來(lái)實(shí)現(xiàn)一下微信分享功能，當(dāng)然除了分享文本和鏈接以外，還可以分享語(yǔ)音，視頻，圖片，文件等等。這些相關(guān)的使用API可以參考上面WeChat庫(kù)中的文檔即可。
剛創(chuàng)建的React Native交流6群:426762904,歡迎各位大牛,React Native技術(shù)愛(ài)好者加入交流!同時(shí)博客右側(cè)歡迎微信掃描關(guān)注訂閱號(hào),移動(dòng)技術(shù)干貨,精彩文章技術(shù)推送!
本文章實(shí)例項(xiàng)目地址:https://github.com/leechuanjun/TLReactNativeProject/tree/dev-1.1.0-combat
來(lái)源：超詳細(xì)React Native實(shí)現(xiàn)微信好友/朋友圈分享功能-Android/iOS雙平臺(tái)通用-江清清的技術(shù)專欄
