【React Native 实战】微信登录
1.前言
在今天无论是游戏开发还是app开发,微信作为第三方登录必不可少,今天我们就用react-native-wechat实现微信登录,分享和支付同样的道理就不过多的介绍了。
2.属性
1)registerApp(appid):
appid:String类型,从微信开放平台后台获取。
2)registerAppWithDescription(appid, appdesc):
此方法只支持iOS; appid: String类型,从微信后台获取; appdesc:String类型,描述信息。
3)openWXApp():
打开微信app。
4)sendAuthRequest([scope[, state]]):
微信登录请求,获取微信返回的token; scope:应用授权作用域,如获取用户个人信息则填写snsapi_userinfo。
5) shareToTimeline(data):
分享到朋友圈:
{Object}data
contain the message to send {String}thumbImage
Thumb image of the message, which can be a uri or a resource id. {String}type
Type of this message. Can be {news|text|imageUrl|imageFile|imageResource|video|audio|file} {String}webpageUrl
Required if type equalsnews
. The webpage link to share. {String}imageUrl
Provide a remote image if type equalsimage
. {String}videoUrl
Provide a remote video if type equalsvideo
. {String}musicUrl
Provide a remote music if type equalsaudio
. {String}filePath
Provide a local file if type equalsfile
. {String}fileExtension
Provide the file type if type equalsfile
.
6) shareToSession(data)
分享到好友或群,数据结构跟分享到朋友圈类似。
3.使用实例
1)安装react-native-wechat:
npm install react-native-wechat --save
2) 自动关联:
rnpm link react-native-wechat
非到万不得已的时候,最好不要手动关联
3)在MainApplication中加入如下代码
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 ); }
4)创建Package
名称为你应用的包名+ wxapi,在新建的包中创建一个名字为WXEntryActivity的类。如包名为com.platformproject,目录结构和代码如下
5)在AndroidManifest.xml中加入微信Activity,如下
6)在componentDidMount中调用registerApp
componentDidMount() {try {WeChat.registerApp('xxxx');//从微信开放平台申请} catch (e) {console.error(e);}console.log(WeChat);}
7)调用微信登录认证
import * as WeChat from 'react-native-wechat';//首先导入react-native-wechat
WeChat.sendAuthRequest("snsapi_userinfo");//在需要触发登录的时候调用
如果成功此时会弹出微信登录的认证界面,认证完就可以获取到token了。拿到token之后可以通过一下url进一步取到昵称,性别,头像等信息。
https://api.weixin.qq.com/sns/oauth2/access_token?appid="+Config.wechat_Appid+"&secret="+Config.wechat_AppSecret+"&code="+token+"&grant_type=authorization_code
如果弹出Scope参数错误或没有Scope权限,则需要从微信开放平台,认证开发者,申请开通登录等权限。
8)注意
微信开放平台,后台需要填写应用包名和应用签名,应用签名是使用微信开放平台提供的Android小工具生成的,手机安装小工具之后,输入应用的包名,即可生成对应的应用签名。
4.效果
暂无,如果有任何问题,可留言讨论交流。
转载于:https://www.cnblogs.com/zhangdw/p/6194345.html
【React Native 实战】微信登录相关推荐
- 手把手教React Native实战开发视频教程 干货
手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...
- 3、React Native实战——实现QQ的登录界面
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...
- React Native 实战:构建电商 App
课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...
- android中设置lmargin简书,超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用...
(一)前言 本文主要会涉及到以下内容: 微信开发者应用申请审核 安装配置微信分享库 微信好友/朋友圈功能实现 (二)应用申请审核 首先大家需要去微信开发平台去注册账号并且创建一个移动应用.(地址:ht ...
- 先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...
导语 内容提要 本书作者Nader Dabit是AWS Mobile开发人员.React Native Training创始人和React Native Radio播客主持人.本书旨在帮助iOS.An ...
- 使用React Native 和 微信小程序 编写的一款阅读类app ———《轻松一刻》
一款纯React Native原生代码 和 微信小程序 编写的app React Native源码地址:https://github.com/azhon/Time 微信小程序源码地址:https:// ...
- 16、React Native实战之TextInput组件
文本输入框:基本组件 自动补全的搜索功能 TextInput的主要属性和事件如下: autoCapitalize:枚举类型,可选值有none sentences words characters ...
- 【稀饭】react native 实战系列教程之首页列表UI实现
首页设计与实现 首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来. 设计 (图丑,莫见怪~) ...
- 【稀饭】react native 实战系列教程之完成首页
首页功能 前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图 可以看到,首页顶部一个标题栏,下面是'最新'.'最热'两个选项卡.我们要完成的有标题栏.选项卡 ...
最新文章
- SAP Cloud for Customer的Account Team里的role如何配置
- c#中的Form.Show和Form.ShowDialog的区别
- 支付宝php异步回调,支付宝支付成功之后异步回调处理
- LeetCode 1429. 第一个唯一数字(map+queue)
- 如何使用 vSphere Certificate Manager 替换 SSL 证书 (2097936)
- php 判断邮箱_php检测邮箱地址是否存在
- jquery 使用文档
- WinDbg蓝屏分析入门
- 第十二章UML与Rational Rose 软件
- Java高并发编程详解系列-Volatile关键字
- java中直线距离的计算_java计算两点间的距离方法总结
- 二维码编辑网站推荐,哪个更好用?
- 扫描仪产品国家抽检实施细则及信息技术类产品检测设备
- SQL1054错误Unknown column .... in on clause
- terracotta安装配置与集群过程
- maven完全离线开发【解决jar包自动从网络下载导致打包失败】
- 【计算机网络】吞吐量与瓶颈链路
- 如何将dxf或dwg等CAD文件与卫星影像地图叠加进行绘图设计?
- 人工智能基础:机器学习常见的算法介绍
- 在web页面预览PDF文件
热门文章
- 【原创】浅析密码学在互联网支付中的应用|RSA,Hash,AES,DES,3DES,SHA1,SHA256,MD5,SSL,Private Key,Public Key...
- videojs 动态加载视频
- 中缀表达式-后缀表达式M
- 没钱也创业——教你空手道白手创业
- 【VM】—VM安装包
- Error:npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\XX\package.json‘son‘
- 零基础带你学习MySQL—备份恢复数据库(三)
- JavaScript学习(五十八)—作用域链
- spring boot 实现发送邮箱验证码
- 有人说智能制造装备前景大好,那么智能制造装备产业园的潜力如何?