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

最新推荐文章于 2025-06-19 09:17:03 发布

原创

最新推荐文章于 2025-06-19 09:17:03 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在react-native应用中集成react-native-wechat组件，包括安装、配置步骤，以及iOS和Android平台的特定设置。此外，还列举了组件的主要API功能，如微信登录、分享和支付。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版权声明：本文为博主原创文章，未经博主允许不得转载。

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];
}