超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用

2016/06/16 | React Native技术文章 | Sky丶清| 暂无评论 | 121 views

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

现阶段大家在使用React Native开发项目的时候，基本都会使用到微信好友或者微信朋友圈分享功能吧，那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能。

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

本文主要会涉及到以下内容:

微信开发者应用申请审核
安装配置微信分享库
微信好友/朋友圈功能实现

(二)应用申请审核

首先大家需要去微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com)

开始创建移动应用,填写应用名称,应用名称以及中英文的信息，移动应用图标分别为28×28何108×108的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文件中添加如下代码:

123	`include` `':RCTWeChat'` `project(':RCTWeChat').projectDir =` `new` `File(rootProject.projectDir,` `'../node_modules/react-native-wechat/android')`

②.在android/app/build.gradle文件中的dependencies标签中添加模块依赖

123456789 ... dependencies { ... compile project(':RCTWeChat') // Add this line only. }

③.在MainActivity.java文件中添加如下代码

123456789101112131415 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. */@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() , new WeChatPackage() // Add this line );}

④.在android项目中创建wxapi包名，在该包名底下创建WXEntryActivity.java类，该类用于去微信获取请求以及响应。

123456789101112131415 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的配置

123456789101112 <manifest> ... <application> ...  <activity android:name=".wxapi.WXEntryActivity" android:label="@string/app_name" android:exported="true" /> </application></manifest>

⑥.混淆设置,在proguard-rules.pro中添加如下代码，当然如果不混淆就不安全啦

123	`-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的配置请点击查看)

123456 - (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版本直接测试即可,代码和下面一样

让我们来看一下实例代码，今天主要演示好友文本/链接以及朋友圈文本/链接分享:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 /** * 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);