超詳細React Native實現微信好友/朋友圈分享功能-Android/iOS雙平台通用
尊重版權,未經授權不得轉載
本文來自:江清清的技術專欄(http://www.lcode.org)
(一)前言
現階段大家在使用React Native開發項目的時候，基本都會使用到微信好友或者微信朋友圈分享功能吧，那么今天我就帶大家實現以下RN微信好友以及朋友圈的分享功能。
剛創建的React Native交流6群:426762904,歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
本文主要會涉及到以下內容:
- 微信開發者應用申請審核
- 安裝配置微信分享庫
- 微信好友/朋友圈功能實現
(二)應用申請審核
首先大家需要去微信開發平台去注冊賬號並且創建一個移動應用。(地址:https://open.weixin.qq.com)
開始創建移動應用,填寫應用名稱,應用名稱以及中英文的信息，移動應用圖標分別為28x28何108x108的png格式圖標。
然后下一步填寫iOS項目的bundle ID以及android項目的包名和應用簽名。請注意應用簽名獲取需要安裝一下獲取簽名信息的APK包，同時你的android應用也需要打包以后安裝在手機上面，這樣再去獲取。具體獲取方式見下面的圖
下載獲取第三方應用的簽名信息apk
下載安裝上面的簽名信息包apk,然后在上面輸入android項目的包名，點擊獲取簽名信息
android項目的包名路徑:android/app/build.gradle中的applicationId標簽數據。
把上面的簽名信息填寫到下面的網頁上面,點擊提交審核即可。然后就是等待吧，官方說是7個工作日，不過一般也就是幾個小時就可以通過審核了吧。
(三)安裝配置微信分享庫
github上面已經有封裝微信分享的原生SDK庫了，大家可以進行去下載安裝，然后RN端就可以進行調用使用了。具體項目地址:https://github.com/weflex/react-native-wechat 不過該庫不僅支持微信分享，還支持微信登錄，收藏以及微信支付的。但是登錄，支付之類的功能需要開通開發者認證權限，那是需要300元一年的啦~
3.1.庫安裝方法:npm install react-native-wechat --save
3.2.Android版本安裝配置方法
①.在android/settings.gradle文件中添加如下代碼:
|
1
2
3
|
include
':RCTWeChat'
project(
':RCTWeChat'
).projectDir =
new
File(rootProject.projectDir,
'../node_modules/react-native-wechat/android'
)
|
②.在android/app/build.gradle文件中的dependencies標簽中添加模塊依賴
|
1
2
3
4
5
6
7
8
9
|
...
dependencies {
...
compile project(
':RCTWeChat'
)
// Add this line only.
}
|
③.在MainActivity.java文件中添加如下代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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
);
}
|
④.在android項目中創建wxapi包名，在該包名底下創建WXEntryActivity.java類，該類用於去微信獲取請求以及響應。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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文件中添加剛剛創建的Actiivty的配置
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<manifest>
...
<application>
...
<!-- 微信Activity -->
<activity
android:name=
".wxapi.WXEntryActivity"
android:label=
"@string/app_name"
android:exported=
"true"
/>
</application>
</manifest>
|
⑥.混淆設置,在proguard-rules.pro中添加如下代碼，當然如果不混淆就不安全啦
|
1
2
3
|
-keep
class
com.tencent.mm.sdk.** {
*;
}
|
3.3.iOS版本安裝配置方法
①.我們之前已經執行過npm安裝微信庫了，接下來我們有兩種方法進行鏈接第一種就是直接通過rnpm link，如下:
當然如果大家這種方案沒有成功鏈接的話，可以采用手動方式了，具體教程請點擊進入
②.接下來在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標簽中添加LSApplicationQueriesSchemes字段，值分別為wechat和weixin
⑤.接下來需要在APPDelete.m文件中做一下Linking的處理配置(具體有關Linking的配置請點擊查看)
|
1
2
3
4
5
6
|
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return
[RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
|
(四)微信好友/朋友圈分享實例
上面我們已經把基本安裝配置已經講解完成了，下面我們通過實例來進行演示一下，主要演示分享到好友/朋友圈的鏈接以及文本，關於更多的分享實例例如文件，圖片，視頻，語言等等可以查看項目的說明文件即可。
分享實例步驟:
- 注冊應用
- 本文/朋友圈分享
- Android測試應用需要打包測試
- iOS版本直接測試即可,代碼和下面一樣
讓我們來看一下實例代碼，今天主要演示好友文本/鏈接以及朋友圈文本/鏈接分享:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
/**
* Sample React Native App
* @flow
*/
import
React, { 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';
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>
);
}
}
class
RNWeChatDemo
extends
Component {
constructor(props) {
super(props);
//應用注冊
WeChat.registerApp(
'wx8d560da3ba038e7e'
);
}
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)'
,
type:
'news'
,
})
.
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)'
,
type:
'news'
,
})
.
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'
,
},
});
AppRegistry.registerComponent(
'RNWeChatDemo'
, () => RNWeChatDemo);
|
運行效果:
(五)最后總結
今天帶着大家從最基本開始一起來實現一下微信分享功能，當然除了分享文本和鏈接以外，還可以分享語音，視頻，圖片，文件等等。這些相關的使用API可以參考上面WeChat庫中的文檔即可。
剛創建的React Native交流6群:426762904,歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
本文章實例項目地址:https://github.com/jiangqqlmj/RNWeChatDemo
尊重原創，未經授權不得轉載：From Sky丶清（http://www.lcode.org/） 侵權必究！
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)
關注我的微博，可以獲得更多精彩內容
