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 equals news. The webpage link to share.    {String} imageUrl Provide a remote image if type equals image.    {String} videoUrl Provide a remote video if type equals video.    {String} musicUrl Provide a remote music if type equals audio.    {String} filePath Provide a local file if type equals file.    {String} fileExtension Provide the file type if type equals file.

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 实战】微信登录相关推荐

  1. 手把手教React Native实战开发视频教程 干货

    手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...

  2. 3、React Native实战——实现QQ的登录界面

    今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...

  3. React Native 实战:构建电商 App

    课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...

  4. android中设置lmargin简书,超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用...

    (一)前言 本文主要会涉及到以下内容: 微信开发者应用申请审核 安装配置微信分享库 微信好友/朋友圈功能实现 (二)应用申请审核 首先大家需要去微信开发平台去注册账号并且创建一个移动应用.(地址:ht ...

  5. 先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...

    导语 内容提要 本书作者Nader Dabit是AWS Mobile开发人员.React Native Training创始人和React Native Radio播客主持人.本书旨在帮助iOS.An ...

  6. 使用React Native 和 微信小程序 编写的一款阅读类app ———《轻松一刻》

    一款纯React Native原生代码 和 微信小程序 编写的app React Native源码地址:https://github.com/azhon/Time 微信小程序源码地址:https:// ...

  7. 16、React Native实战之TextInput组件

    文本输入框:基本组件 自动补全的搜索功能 TextInput的主要属性和事件如下: autoCapitalize:枚举类型,可选值有none  sentences  words  characters ...

  8. 【稀饭】react native 实战系列教程之首页列表UI实现

    首页设计与实现 首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来. 设计 (图丑,莫见怪~) ...

  9. 【稀饭】react native 实战系列教程之完成首页

    首页功能 前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图 可以看到,首页顶部一个标题栏,下面是'最新'.'最热'两个选项卡.我们要完成的有标题栏.选项卡 ...

最新文章

  1. SAP Cloud for Customer的Account Team里的role如何配置
  2. c#中的Form.Show和Form.ShowDialog的区别
  3. 支付宝php异步回调,支付宝支付成功之后异步回调处理
  4. LeetCode 1429. 第一个唯一数字(map+queue)
  5. 如何使用 vSphere Certificate Manager 替换 SSL 证书 (2097936)
  6. php 判断邮箱_php检测邮箱地址是否存在
  7. jquery 使用文档
  8. WinDbg蓝屏分析入门
  9. 第十二章UML与Rational Rose 软件
  10. Java高并发编程详解系列-Volatile关键字
  11. java中直线距离的计算_java计算两点间的距离方法总结
  12. 二维码编辑网站推荐,哪个更好用?
  13. 扫描仪产品国家抽检实施细则及信息技术类产品检测设备
  14. SQL1054错误Unknown column .... in on clause
  15. terracotta安装配置与集群过程
  16. maven完全离线开发【解决jar包自动从网络下载导致打包失败】
  17. 【计算机网络】吞吐量与瓶颈链路
  18. 如何将dxf或dwg等CAD文件与卫星影像地图叠加进行绘图设计?
  19. 人工智能基础:机器学习常见的算法介绍
  20. 在web页面预览PDF文件

热门文章

  1. 【原创】浅析密码学在互联网支付中的应用|RSA,Hash,AES,DES,3DES,SHA1,SHA256,MD5,SSL,Private Key,Public Key...
  2. videojs 动态加载视频
  3. 中缀表达式-后缀表达式M
  4. 没钱也创业——教你空手道白手创业
  5. 【VM】—VM安装包
  6. Error:npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\XX\package.json‘son‘
  7. 零基础带你学习MySQL—备份恢复数据库(三)
  8. JavaScript学习(五十八)—作用域链
  9. spring boot 实现发送邮箱验证码
  10. 有人说智能制造装备前景大好,那么智能制造装备产业园的潜力如何?