react-native-wechat微信组件的使用

最新推荐文章于 2024-05-14 10:08:10 发布

小本V

最新推荐文章于 2024-05-14 10:08:10 发布

阅读量1.4k

点赞数 2

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

自动配置执行以下命令：

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.framework
CoreTelephony.framework
libsqlite3.0
libc++
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 *)url
sourceApplication:(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.
 */
@Override
protected 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

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

示例代码

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

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

registerAppWithDescription(appid, appdesc)

params

参数名	类型	默认值	描述
appid	string	无	微信后台的appid
appdesc	string	无	对你的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_userinfo
state	`{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: '确定'}
          ])
      }
    })
};

参数名	类型	描述
errCode	Number	`ERR_OK = 0(用户同意) ERR_AUTH_DENIED = -4（用户拒绝授权）ERR_USER_CANCEL = -2（用户取消）`
errStr	String	无
openId	String	无
code	String	用户换取access_token的code，仅在ErrCode为0时有效

shareToTimeline(data) ：分享到朋友圈

shareToTimeline(data)

params

参数名	类型	描述
thumbImage	String	消息的Thumb图像，可以是uri或资源id
type	String	`{news/text/imageUrl/imageFile/imageResource/video/audio/file}`
webpageUrl	String	如果`type`为`news`,则使用此分享url
imageUrl	String	如果`type`为`image`,则使用此分享url
videoUrl	String	如果`type`为`video`,则使用此分享url
musicUrl	String	如果`type`为`audio`,则使用此分享url
filePath	String	如果`type`为`file`,则使用此获取本地文件
fileExtension	String	如果`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

参数名	类型	描述
errCode	Number	0 if authorization successed
errStr	String	Error 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

参数名	类型	描述
errCode	Number	0 if authorization successed
errStr	String	Error 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()

移除所有监听事件

作者：Juice_gg
链接：https://www.jianshu.com/p/3f424cccb888
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

小本V

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
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-wech...
复制链接

扫一扫