超详细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技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

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

    1. 微信开发者应用申请审核
    2. 安装配置微信分享库
    3. 微信好友/朋友圈功能实现
(二)应用申请审核

首先大家需要去微信开发平台去注册账号并且创建一个移动应用。(地址: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)',
                          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库中的文档即可。

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

本文章实例项目地址:https://github.com/jiangqqlmj/RNWeChatDemo

尊重原创，未经授权不得转载：From Sky丶清（http://www.lcode.org/） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博，可以获得更多精彩内容

React Native微信分享 朋友圈分享 Android/iOS 通用的更多相关文章

  1. Android分享到微信和朋友圈的工具类

    1.只要填写上正确的app_id,且引用上该工具类你就能实现分享到朋友圈和分享到微信. 2.需要到微信平台下载jar包,以及注册一个appid import android.content.Conte ...

  2. android 微信朋友分享，朋友圈分享

    android 微信朋友分享,朋友圈分享 包名必须写成  com.weixin WXEntryActivity package com.weixin.wxapi; import android.app ...

  3. Android 调用系统分享文字、图片、文件，可直达微信、朋友圈、QQ、QQ空间、微博

    原文:Android 调用系统分享文字.图片.文件,可直达微信.朋友圈.QQ.QQ空间.微博 兼容SDK 18以上的系统,直接调用系统分享功能,分享文本.图片.文件到第三方APP,如:微信.QQ.微博 ...

  4. ionic 实现微信朋友圈分享的完整开发流程

    最近开始要着手负责开发ionic的项目了,一直很好奇想实现一个微信朋友圈分享的功能,所以我就网上找了找文章来练手实现,果不其然,找到了几篇,但是发现它们的流程都不太详细,清楚,直接,还有不少坑. 今天 ...

  5. APP分享多张图片到微信和朋友圈

    产品需求: 微信分享多图至好友,朋友圈.由于微信禁用了分享9图至朋友圈功能,这里分享微信只是将图片保存至本地,具体让用户手动分享. 问题分析: 微信没有提供分享多图的SDK,因此我们实现调用系统自带的 ...

  6. 微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频

    今天微信 6.5.1 for iOS发布了,最主要的一个功能是可以在朋友圈分享相册中的视频,卖转发朋友圈视频软件的家伙估计要哭了.微信这次更新,更有利于个人号的运营,个人号的价值将更高.先定一个小目标 ...

  7. 微信朋友圈分享页面（JS-SDK 1.0）

    微信更新sdk后大量分享朋友圈代码失效,标题 缩略图 描述无法自定义 新版SDK分享文章步骤 1.绑定域名 (方法参考 http://mp.weixin.qq.com/wiki/7/aaa137b55 ...

  8. 纯Java实现微信朋友圈分享图

    纯Java实现微信朋友圈分享图 1.实现分享图的效果 2.开发环境 2.1 JDK * oracle's jdk 1.8以上 2.2 字体 * 若选择了微软雅黑字体又是代码部署到Linux,则需要安装 ...

  9. apiCloud 三方分享，微信好友分享，微信朋友圈分享，QQ分享，微博分享

    首先查看我的这篇有关三方登录的博客,地址是http://www.cnblogs.com/gqx-html/p/8303567.html,配置完三方数据后可以从上一篇文章中的链接跳转到各个登录查看api ...

随机推荐

  1. 第三篇 SQL Server代理警报和操作员

    本篇文章是SQL Server代理系列的第三篇,详细内容请参考原文. 正如这一系列的上一篇所述,SQL Server代理作业是由一系列的作业步骤组成,每个步骤由一个独立的类型去执行,除了步骤中执行的工 ...

  2. 教你安装CentOS 6.5如何选择安装包

    近来发现越来越多的运维小伙伴们都有最小化安装CentOS 6.5系统的洁癖,因此,找老男孩来咨询,这个“洁癖”好习惯啊,必须支持,,因此发布本文和大家分享下. (1)系统安装类型选择及自定义额外包组 ...

  3. 微软bing搜索搜索源码，可以直接运行

    微软联合HackerRank一起研发了一项新功能:源代码搜索.能够直接搜索代码并且进行编译运行. 如果不做说明,这项功能看上去简直就是Visual Studio中源代码搜索插件的翻版,不过其并不需要本 ...

  4. js eventhandler

    1.获取所有eventhandler 使用 getEventHandler(target) 2.target.addEventHandler(type,handler,userCapture?) 3. ...

  5. how to use automapper in c#, from cf~

    [DataContract] public class GroupDto { [DataMember] public int id { get; set; } [DataMember] public ...

  6. Linux 系统结构

    Linux的系统结构一般由四部分组成 内核 1)内核 操作系统的核心,具有最基本的功能:内存管理.进程管理.设备驱动管理.文件系统管理,网络管理 内核版本(kernel)查看的三种方法 cat /pr ...

  7. 每天一个shell知识--数组

    1.shell中数组的定义: 数组名=(value value1 value2 ) 也可以单独的设定数组的分量: arrayL[0]=value arrayL[1]=value1 2.${arrayL ...

  8. 。。。Hibernate 查询数据 事务管理。。。

    在Hibernate中,查询数据的时候,可能会需要事务的管理,为什么呢?因为在查询数据库的时候,Hibernate将数据从数据库里面查询出来之后,会先把数据放入Hibernate的session缓存里 ...

  9. 安装Eclipse并配置JacORB插件

    前人成果 •      eclipse中开发corba完整说明(jacORB版) http://blog.csdn.net/hq0927/article/details/8129534 •      ...

  10. java mvc控制器基本传值方式

    控制器----- @RequestMapping(value = "MatchDetail", method = RequestMethod.GET) public ModelAn ...