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教程