【转】react-native-wechat组件使用介绍

react-native-wechat 具有微信 登录，分享，收藏（v1.9.9+） 和支付的功能，适合iOS/Android 双平台使用

安装 react-native-wechat

//npm 安装npm install react-native-wechat --save//yarn 安装yarn add react-native-wechat

配置 react-native-wechat

• iOS

自动配置执行以下命令：

react-native link react-native-wechat

link成功命令行会提示

Linking react-native-wechat ios dependency

或者你还可以手动配置

a.用xcode打开你的项目, 右键点击左侧项目目录Libraries文件夹 ➜ Add Files to <...>

b.去node_modules ➜ react-native-wechat ➜ ios ➜ 选择 RCTWeChat.xcodeproj

c.在工程Build Phases ➜ Link Binary With Libraries中添加libRCTWeChat.a(直接拖拽过去)

工程配置

在工程target的Build Phases->Link Binary with Libraries中加入以下库文件：

SystemConfiguration.frameworkCoreTelephony.frameworklibsqlite3.0libc++libz

点击TARGETS 下的项目名 -> info ,添加你的 申请的 微信 AppID到 “URL type”的”URL Schema”处

添加URL Schema

iOS9 以上，添加 微信白名单

QQ20170329-170004.png

或打开 info.plist源码添加：

<key>LSApplicationQueriesSchemes</key><array>    <string>weixin</string>    <string>wechat</string></array>

在你项目的AppDelegate.m添加以下代码，启动[LinkingIOS]

#import <React/RCTLinkingManager.h>- (BOOL)application:(UIApplication *)application openURL:(NSURL *)urlsourceApplication:(NSString *)sourceApplication annotation:(id)annotation{  return [RCTLinkingManager application:application openURL:url                            sourceApplication:sourceApplication annotation:annotation];}

• Android

在android/settings.gradle文件下添加以下代码：

include ':RCTWeChat'project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')

在android/app/build.gradle的dependencies部分添加以下代码：

dependencies {  compile project(':RCTWeChat')    // Add this line only.}

在MainActivity.java或者MainApplication.java文件中添加以下代码：

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. */@Overrideprotected List<ReactPackage> getPackages() {  return Arrays.<ReactPackage>asList(    new MainReactPackage(),     new WeChatPackage()        // Add this line  );}

在应用程序包中创建一个名为’wxapi’的包，并在其中创建一个名为’WXEntryActivity’的类。以便可以获得微信的授权和分享权限。

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();  }}

（可选）在应用程序包中创建一个名为“wxapi”的包，并在其中创建一个名为“WXPayEntryActivity”的类。 以便可以获得微信支付权限。

package your.package.wxapi;import android.app.Activity;import android.os.Bundle;import com.theweflex.react.WeChatModule;public class WXPayEntryActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    WeChatModule.handleIntent(getIntent());    finish();  }}

在AndroidManifest.xml添加声明

<manifest>  <application>    <activity      android:name=".wxapi.WXEntryActivity"      android:label="@string/app_name"      android:exported="true"    />    <activity      android:name=".wxapi.WXPayEntryActivity"      android:label="@string/app_name"      android:exported="true"    />  </application></manifest>

在proguard-rules.pro中添加：

-keep class com.tencent.mm.sdk.** {   *;}

API

• registerApp(appid) ：注册APP
• registerAppWithDescription(appid, appdesc) ： 注册APP（仅支持iOS）
• isWXAppInstalled() ：检查微信是否安装
• isWXAppSupportApi()
• getApiVersion() ：获得微信SDK的版本
• openWXApp() ：打开微信APP
• sendAuthRequest([scope[, state]]) ：发送微信登录授权
• shareToTimeline(data) ： 分享到朋友圈
• shareToSession(data) ：分享到朋友
• pay(data) ：调用微信支付
• addListener(eventType, listener[, context]) ：监听状态
• once(eventType, listener[, context]) ：监听状态
• removeAllListeners() ：移除所有监听

方法接口描述

• registerApp(appid)：注册微信SDK

registerApp(appid)

@params

参数名类型默认值描述appidstring无微信后台的appid

示例代码

//建议在应用启动时初始化，初始化之前无法使用此模块的其他方法。WeChat模块只需要初始化一次。//const wechat = require('react-native-wechat')import *as wechat from 'react-native-wechat'// If you register herecomponentDidMount (){  wechat.registerApp('your appid')}

• registerAppWithDescription(appid, appdesc):注册微信SDK(仅对iOS有效)

registerAppWithDescription(appid, appdesc)

params

参数名类型默认值描述appidstring无微信后台的appidappdescstring无对你的APP的描述

• isWXAppInstalled() : 检查微信是否安装

isWXAppInstalled()

return
{Promise}

示例代码

wechat.isWXAppInstalled()   .then( ( isInstalled ) => {        if ( isInstalled ) {           ...        } else {          toastShort( '没有安装微信软件，请您安装微信之后再试' );        }    } );

• isWXAppSupportApi() : 检查是否支持微信开放接口

isWXAppSupportApi()

return
{Promise}
示例代码

同isWXAppInstalled

• getApiVersion() ： 获取微信SDK版本

getApiVersion()

return
{Promise}
示例代码

同isWXAppInstalled

• openWXApp() ： 打开微信

openWXApp()

return
{Promise}

• sendAuthRequest([scope[, state]]) ： 微信登录授权请求

sendAuthRequest([scope[, state]])

params

参数名类型默认值描述scope{Array/String}无应用授权作用域，如获取用户个人信息则填写snsapi_userinfostate{String}无用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

return
{Promise}

示例代码

//微信登录示例WXLogin = () => {  let scope = 'snsapi_userinfo';  let state = 'wechat_sdk_demo';  //判断微信是否安装  wechat.isWXAppInstalled()    .then((isInstalled) => {      if (isInstalled) {        //发送授权请求        wechat.sendAuthRequest(scope, state)          .then(responseCode => {            //返回code码，通过code获取access_token            this.getAccessToken(responseCode.code);          })          .catch(err => {            Alert.alert('登录授权发生错误：', err.message, [              {text: '确定'}            ]);          })      } else {        Platform.OS == 'ios' ?          Alert.alert('没有安装微信', '是否安装微信？', [            {text: '取消'},            {text: '确定', onPress: () => this.installWechat()}          ]) :          Alert.alert('没有安装微信', '请先安装微信客户端在进行登录', [            {text: '确定'}          ])      }    })};

参数名类型描述errCodeNumberERR_OK = 0(用户同意) ERR_AUTH_DENIED = -4（用户拒绝授权）ERR_USER_CANCEL = -2（用户取消）errStrString无openIdString无codeString用户换取access_token的code，仅在ErrCode为0时有效

• shareToTimeline(data) ： 分享到朋友圈

shareToTimeline(data)

params

参数名类型描述thumbImageString消息的Thumb图像，可以是uri或资源idtypeString{news/text/imageUrl/imageFile/imageResource/video/audio/file}webpageUrlString如果type为news,则使用此分享urlimageUrlString如果type为image,则使用此分享urlvideoUrlString如果type为video,则使用此分享urlmusicUrlString如果type为audio,则使用此分享urlfilePathString如果type为file,则使用此获取本地文件fileExtensionString如果type为file,则使用此提供文件类型

示例代码

WeChat.shareToTimeline({    type: 'imageUrl',    title: 'web image',    description: 'share web image to time line',    mediaTagName: 'email signature',    messageAction: undefined,    messageExt: undefined,    imageUrl: 'http://www.ncloud.hk/email-signature-262x100.png'  });

return

参数名类型描述errCodeNumber0 if authorization successederrStrStringError message if any error occurred

• shareToSession(data) ：分享到好友

shareToSession(data)

示例代码

同 shareToTimeline(data) ：

• shareToFavorite(data) ：收藏（v1.9.9+）

shareToFavorite(data)

示例代码

同 shareToTimeline(data) ：

• pay(data) ： 微信支付

pay(data)

示例代码

const result = await WeChat.pay(  {    partnerId: '',  // 商家向财付通申请的商家id    prepayId: '',   // 预支付订单    nonceStr: '',   // 随机串，防重发    timeStamp: '',  // 时间戳，防重发    package: '',    // 商家根据财付通文档填写的数据和签名    sign: ''        // 商家根据微信开放平台文档对数据做的签名  });

return

参数名类型描述errCodeNumber0 if authorization successederrStrStringError message if any error occurred

• addListener(eventType, listener[, context]) : 监听状态

示例代码

        //监听分享状态        // 'SendMessageToWX.Resp' 分享监听字段        // 'PayReq.Resp'          支付监听字段        // 'SendAuth.Resp'        登录监听字段        wechat.addListener(            'SendMessageToWX.Resp',            (response) => {                if (parseInt(response.errCode) === 0) {                    toastShort('分享成功');                } else {                    toastShort('分享失败');                }            }        );

• once(eventType, listener[, context])

和addListener类似，但是被调用一次后会被移除

• removeAllListeners()

移除所有监听事件

---

本文参考react-native-wechat组件GitHub的说明文档翻译：https://github.com/weflex/react-native-wechat

---

问题搜集：
1、在安卓机上测试的同学经常会遇到比如调用微信支付时闪一下就没了的问题，这个问题100%跟签名有关，请检查你的签名。
debug版本和release版本的签名是不同的，请注意
2、如果遇到RN低于0.40版本无法使用的问题，请降级react-native-wechat试一下

原文链接