【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 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

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.效果

  暂无,如果有任何问题,可留言讨论交流。

时间: 2024-07-29 16:58:34

【React Native 实战】微信登录的相关文章

东方耀 手把手教React Native实战开发视频教程+源码笔记全集

课程序号标题 第0课0.手把手教React Native实战之开山篇_视频 第1课1.手把手教React Native实战之环境搭建_视频_Windows环境 第1课1.手把手教React Native实战之环境搭建[Mac真机]同时调试开发Android&IOS 第2课2.手把手教React Native实战之从React到RN 第3课3.手把手教React Native实战之flexbox布局(RN基础) 第4讲4.手把手教React Native实战之flexbox布局(伸缩属性) 第5讲

React Native之微信分享(iOS Android)

React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 一,应用申请审核 大家需要去微信开发平台去注册账号并且创建一个移动应用.(地址:https://open.weixin.qq.com),然后根据流程申请即可.但是需要注意的是Android需要获取签名信息: 下载安装上面的签名信息包apk,然后在上面输入android项目的包名,点

Native VS React Native VS 微信小程序

随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那么,React Native 和 Native 和 微信小程序 三者比较起来到底哪者更强呢?今天从适应性(适合什么项目).开发限制.软件迭代更新.成本角度谈谈自己对三者的看法. 个人角度: 适应性(适应什么项目) 大项目.游戏项目:Native 中大型项目:react native 小项目:微信小程

React Native电商项目实战混合APP开发 React Native实战 混合APP实战开发

React Native  和 angular+ionic 是目前网络上最火的混合APP开发语言,其功能强大能够开发出安卓和IOS程序! ------------------课程目录------------------ <React Native电商项目实战>├<01React Native初体验>│  ├01-React Native简介.mp4│  ├02-React Native环境搭建.mp4│  ├03-React Native初体验及其它环境搭建.mp4│  └04-R

6、手把手教React Native实战之JSX入门

React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法.,最后每个HTML标签都转化为JavaScript代码来运行 1.环境 2.载入方式 3.标签  HTML标签 与  ReactJS创建的组件类标签(首字母一定要大写) 4.转换 解析器 `<h3>输入</h3&

【React Native 实战】二维码扫描

1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 react-native-barcode-scanner-universal react-native-barcode-scanner-universal是react-native-barcodescanner和react-native-camera的结合,react-native-barcodes

【稀饭】react native 实战系列教程之影片数据获取并解析

获取网络数据 在上一节,我们已经通过模拟数据,并将UI展示出来.这节我们将获取网络数据.数据来源于网络,仅用于学习使用. fetch介绍 fetch是react native的一个网络请求库,使用该库不用引入模块,可以直接使用.一个简单的请求如下: fetch('http://facebook.github.io/react-native/movies.json') 发起请求之后,我们还需要对它的响应进行处理,只要这样 fetch('http://facebook.github.io/react

3、手把手教React Native实战之flexbox布局

flexbox是Flexible Box的缩写,弹性盒子布局  主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 按照伸缩流的方向布局 伸缩容器有主轴和交叉轴组成! 主轴既可以是水平轴,也可以是垂直轴 flexbox目前还处于

4、手把手教React Native实战之flexbox布局(伸缩属性)

###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空间,也不放大,语法为:flex-grow:整数值 3.flex-shrink 定义伸缩项目的收缩能力,默认值为1 ,其语法为:flex-shrink:整数值 4.flex-basis 用来设置伸缩项目的基准值,剩余的空间按比率进行伸缩,其语法为:flex-basis:length | auto,默认