超详细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. Java文件操作①——XML文件的读取

    一.邂逅XML 文件种类是丰富多彩的,XML作为众多文件类型的一种,经常被用于数据存储和传输.所以XML在现今应用程序中是非常流行的.本文主要讲Java解析和生成XML.用于不同平台.不同设备间的数据 ...

  2. [OpenS-CAD]屏幕坐标转换分析

    蓝色为地理坐标系XOY,记为坐标系A:黄色为屏幕坐标系xoy,记为坐标系B.地图的左下角点为(X0,Y0)可很容易的平移到坐标原点.因此这里只考虑地图位于坐标原点的情况,如图二也记为坐标系A. 设地理 ...

  3. nginx 414 Request-URI Too Large

    症状 nginx 414 Request-URI Too Large #客户端请求头缓冲区大小,如果请求头总长度大于小于128k,则使用此缓冲区, #请求头总长度大于128k时使用large_clie ...

  4. kfed (kernel file editor：内核文件编辑器)

    kfed是没有在文档中标出的asm工具,在oracle 11gR1中被引入.可以被用来读写asm元数据,特别是磁盘头和asm元数据的内容. kfed是一个单独的工具,不依赖与asm实例,所以可以对mo ...

  5. JS语法部分-数组

    数组的长度是动态变化的,里面可以防止任意类型的元素 var a=new Array() 数组元素的复制:a[0]=123        a[2]=456 数组的取值:a[i] 数组的属性:  a.le ...

  6. HTML--表单，图片热点，网页划区和拼接

    一.图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: <img src="/ usemap="longzhu"> ...

  7. Smarty模板

    Smarty模板 是做什么用的?? 是将前端的显示和后台的逻辑进行分离,就相当于把前台显示的页面和后台要实现的某些功能的逻辑给分离出来了,分离在两个文件里,也就是说,前端只负责显示,后端只负责逻辑操作 ...

  8. linux第7天 I/O的五种模型, select

    服务器端避免僵尸进程的方法: 1)通过忽略SIGCHLD信号,解决僵尸进程 signal(SIGCHLD, SIG_IGN) 2)通过wait方法,解决僵尸进程 signal(SIGCHLD, han ...

  9. HDU 1052 Tian Ji -- The Horse Racing（贪心）（2004 Asia Regional Shanghai）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1052 Problem Description Here is a famous story in Ch ...

  10. bzoj1758 [Wc2010]重建计划 & bzoj2599 [IOI2011]Race

    两题都是树分治. 1758这题可以二分答案avgvalue,因为avgvalue=Σv(e)/s,因此二分后只需要判断Σv(e)-s*avgvalue是否大于等于0,若大于等于0则调整二分下界,否则调 ...