React Native微信分享 朋友圈分享 Android/iOS 通用
2016-06-16 09:17
633 查看
超详细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)
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_0012.jpg)
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_0022.jpg)
开始创建移动应用,填写应用名称,应用名称以及中英文的信息,移动应用图标分别为28x28何108x108的png格式图标。
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_0031.jpg)
然后下一步填写iOS项目的bundle ID以及android项目的包名和应用签名。请注意应用签名获取需要安装一下获取签名信息的APK包,同时你的android应用也需要打包以后安装在手机上面,这样再去获取。具体获取方式见下面的图
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_006.jpg)
下载获取第三方应用的签名信息apk
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_0041.jpg)
下载安装上面的签名信息包apk,然后在上面输入android项目的包名,点击获取签名信息
android项目的包名路径:android/app/build.gradle中的applicationId标签数据。
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_005.jpg)
把上面的签名信息填写到下面的网页上面,点击提交审核即可。然后就是等待吧,官方说是7个工作日,不过一般也就是几个小时就可以通过审核了吧。
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_007.jpg)
(三)安装配置微信分享库
github上面已经有封装微信分享的原生SDK库了,大家可以进行去下载安装,然后RN端就可以进行调用使用了。具体项目地址:https://github.com/weflex/react-native-wechat 不过该库不仅支持微信分享,还支持微信登录,收藏以及微信支付的。但是登录,支付之类的功能需要开通开发者认证权限,那是需要300元一年的啦~
3.1.库安装方法:npm install react-native-wechat --save
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_008.jpg)
3.2.Android版本安装配置方法
①.在android/settings.gradle文件中添加如下代码:
?
?
?
?
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_009.jpg)
⑤.在AndroidManifest.xml文件中添加刚刚创建的Actiivty的配置
?
?
①.我们之前已经执行过npm安装微信库了,接下来我们有两种方法进行链接第一种就是直接通过rnpm link,如下:
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_010.jpg)
当然如果大家这种方案没有成功链接的话,可以采用手动方式了,具体教程请点击进入
②.接下来在xcode中添加部分库依赖(Link Binary With Libraries):
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_011.jpg)
③.选中Targets-info配置中URL Schema中配置刚申请下来的appid
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_012.jpg)
④.为了iOS9.0的支持,在Targets-info中的Custom iOS Traget Properties标签中添加LSApplicationQueriesSchemes字段,值分别为wechat和weixin
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/weixin_013.jpg)
⑤.接下来需要在APPDelete.m文件中做一下Linking的处理配置(具体有关Linking的配置请点击查看)
?
上面我们已经把基本安装配置已经讲解完成了,下面我们通过实例来进行演示一下,主要演示分享到好友/朋友圈的链接以及文本,关于更多的分享实例例如文件,图片,视频,语言等等可以查看项目的说明文件即可。
分享实例步骤:
注册应用
本文/朋友圈分享
Android测试应用需要打包测试
iOS版本直接测试即可,代码和下面一样
让我们来看一下实例代码,今天主要演示好友文本/链接以及朋友圈文本/链接分享:
?
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/demo_011.jpg)
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/demo_02.jpg)
![](http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/06/demo_03.jpg)
(五)最后总结
今天带着大家从最基本开始一起来实现一下微信分享功能,当然除了分享文本和链接以外,还可以分享语音,视频,图片,文件等等。这些相关的使用API可以参考上面WeChat库中的文档即可。
刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
本文章实例项目地址:https://github.com/jiangqqlmj/RNWeChatDemo
尊重原创,未经授权不得转载:From Sky丶清(http://www.lcode.org/) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201608/31e0436b43563071f67845ef0e7f539c.jpg)
关注我的微博,可以获得更多精彩内容
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/89d15076902b3dc6508ba9ea255c1ae7.png)
相关文章推荐
- React Native控件之View视图解析
- React学习笔记3
- React学习笔记2
- React学习笔记1
- React Ajax this.IsMounted() is not a function
- React Native 学习之Text组件
- Windows下使用AndroidStudio+ReactNative开发Android应用
- 【muduo库学习】实现最简单的reactor模式
- react 常用命令
- 适配 react web
- React知识库内容精选:10篇文章让你迅速了解该框架
- React Native:从入门到原理
- React服务器端渲染
- 从 React Router 谈谈路由的那些事
- 轻松入门React和Webpack (React 热插拔)
- ReactJS组件生命周期详述
- java模式之Reactor
- React知识库内容精选:10篇文章让你迅速了解该技术
- ReactiveCocoa学习(二)
- 整理了一份React-Native学习指南