React Native實現微信分享

時間  2019-11-11
標籤 react native 實現 微信 分享 欄目 React 简体版
原文   原文鏈接
(一)前言

現階段你們在使用React Native開發項目的時候，基本都會使用到微信好友或者微信朋友圈分享功能吧，那麼今天我就帶你們實現如下RN微信好友以及朋友圈的分享功能。java

剛建立的React Native交流6羣:426762904,歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!node

本文主要會涉及到如下內容:react

    1. 微信開發者應用申請審覈
    2. 安裝配置微信分享庫
    3. 微信好友/朋友圈功能實現
(二)應用申請審覈

首先你們須要去微信開發平臺去註冊帳號而且建立一個移動應用。(地址:https://open.weixin.qq.com)android

開始建立移動應用,填寫應用名稱,應用名稱以及中英文的信息，移動應用圖標分別爲28x28何108x108的png格式圖標。ios

而後下一步填寫iOS項目的bundle ID以及android項目的包名和應用簽名。請注意應用簽名獲取須要安裝一下獲取簽名信息的APK包，同時你的android應用也須要打包之後安裝在手機上面，這樣再去獲取。具體獲取方式見下面的圖c++

下載獲取第三方應用的簽名信息apkgit

下載安裝上面的簽名信息包apk,而後在上面輸入android項目的包名，點擊獲取簽名信息github

android項目的包名路徑:android/app/build.gradle中的applicationId標籤數據。web

把上面的簽名信息填寫到下面的網頁上面,點擊提交審覈便可。而後就是等待吧，官方說是7個工做日，不過通常也就是幾個小時就能夠經過審覈了吧。sql

(三)安裝配置微信分享庫

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
  * https://github.com/facebook/react-native
  * @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)' ,
                           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( '沒有安裝微信軟件，請您安裝微信以後再試' );
                       }
                     });
               }}
         />
         <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)' ,
                           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( '沒有安裝微信軟件，請您安裝微信以後再試' );
                       }
                     });
               }}
         />
       </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庫中的文檔便可。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程