关于react native项目中使用react-native-wechat-lib@3.0.4

关于react native项目中使用react-native-wechat-lib@3.0.4

    • 插件官网
    • 安装依赖包(Android和iOS下载插件完成后记得更新依赖,)
    • Android中配置
      • 1.在项目文件夹下面创建文件夹wxapi(如上图)
      • 2.在文件MainApplication.java中如下配置
      • 3.在文件AndroidManifest.xml中添加如下配置
    • IOS配置
      • 1.在AppDelegate.h文件添加如下代码:
      • 2.在AppDelegate.mm文件添加如下代码:
      • 3.Info.plist文件
    • 在login.jsx页面中使用
    • 备注:文档官方文档更加详细

插件官网

https://www.npmjs.com/package/react-native-wechat-lib/v/3.0.4

安装依赖包(Android和iOS下载插件完成后记得更新依赖,)

npm i react-native-wechat-lib@3.0.4

Android中配置

在这里插入图片描述

1.在项目文件夹下面创建文件夹wxapi(如上图)

wxapi/WXEntryActivity.java

package 包名.wxapi;

// react-native-wechat-lib support (
import android.app.Activity;
import android.os.Bundle;
import com.wechatlib.WeChatLibModule;

public class WXEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatLibModule.handleIntent(getIntent());
    finish();
  }
}
// )

2.在文件MainApplication.java中如下配置

package 包名;

import android.app.Application;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.soloader.SoLoader;
import java.util.List;
// react-native-wechat-lib support (
import com.wechatlib.WeChatLibPackage;
// )

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new DefaultReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          // react-native-wechat-lib support (
          // Packages that cannot be autolinked yet can be added manually here, for example:
          packages.add(new WeChatLibPackage());
          // )
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        @Override
        protected boolean isNewArchEnabled() {
          return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
        }

        @Override
        protected Boolean isHermesEnabled() {
          return BuildConfig.IS_HERMES_ENABLED;
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      DefaultNewArchitectureEntryPoint.load();
    }
    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }
}

3.在文件AndroidManifest.xml中添加如下配置

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 相机权限 -->
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- 如果需要使用麦克风进行视频录制 -->
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <!-- 如果需要使用相机胶卷 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 地址定位 -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

        <intent-filter android:autoVerify="true">
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />

            <data
              android:host="xxx"
              android:pathPrefix="/"
              android:scheme="xxxxx" />

        </intent-filter>

      </activity>
      <!--  react-native-wechat-lib support ( -->
      <activity
        android:name=".wxapi.WXEntryActivity"
        android:label="@string/app_name"
        android:exported="true"
        android:taskAffinity="包名"
        android:launchMode="singleTask"
      />
      <!-- ) -->
    </application>
    <!--  react-native-wechat-lib support ( -->
    <queries>
      <package android:name="com.tencent.mm" />
    </queries>
    <!-- ) -->
</manifest>

IOS配置

在这里插入图片描述
到微信下载最新sdk,放在上图位置
在Xcode进行环境配置:如图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.在AppDelegate.h文件添加如下代码:

#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import "WXApi.h"

@interface AppDelegate : RCTAppDelegate<WXApiDelegate>

@end

2.在AppDelegate.mm文件添加如下代码:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTLinkingManager.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"项目名称";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
//ali
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}
//weixin
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
    return  [WXApi handleOpenURL:url delegate:self];
}

- (BOOL)application:(UIApplication *)application
  continueUserActivity:(NSUserActivity *)userActivity
  restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable
  restorableObjects))restorationHandler {
  // 触发回调方法
  [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
  return [WXApi handleOpenUniversalLink:userActivity
  delegate:self];
}

@end

3.Info.plist文件

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLName</key>
			<string>alipay</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>alipayxxxxx</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLName</key>
			<string>weixin</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>wxxxxxx</string>
			</array>
		</dict>
	</array>
<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>iosamap</string>
		<string>baidumap</string>
		<string>qqmap</string>
		<string>alipay</string>
		<string>weixin</string>
		<string>wechat</string>
		<string>weixinULAPI</string>
		<string>weixinURLParamsAPI</string>
	</array>

在login.jsx页面中使用

import * as WeChat from 'react-native-wechat-lib';

//微信授权登录
      WeChat.sendAuthRequest('snsapi_userinfo', 'wechat_sdk_demo')
        .then(response => {
          console.warn(response); // 处理授权登录后的结果
         
        })
        .catch(error => {
          console.warn(error); // 处理授权登录后的结果
        });

useEffect(() => {
    console.log('[登录]');
    WeChat.registerApp(
      'wxxxxx',
      'https://xxxxx.com/',
    );
    return () => {
      
    };
  }, []);

备注:文档官方文档更加详细

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/254876.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用数组模拟栈的相关操作【栈1.1】

public class ArrayStackDemo {public static void main(String[] args) {ArrayStack arrayStack new ArrayStack(4);Scanner sc new Scanner(System.in);boolean loop true;char key ;while (loop) {System.out.println("栈操作菜单项");System.out.println(&q…

教育机构小程序管理系统的全方位优化

随着互联网的快速发展&#xff0c;线上教育也日益受到人们的关注和欢迎。为了满足广大学生和家长的需求&#xff0c;教育机构纷纷开发出自己的小程序管理系统。本文将详细介绍如何使用乔拓云平台&#xff0c;一键开发出自己的教育机构小程序管理系统。 1.进入乔拓云后台 首先&…

【SpringBoot】参数校验及异常处理

实现注册功能时经常遇到参数校验的问题。 参数校验 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>参数前添加注解&#xff0c;并指定校验规…

60V恒流IC SL8443B内置功率MOS 兼容PWM 降压LED恒流驱动芯片

以下是根据您的要求&#xff0c;按照知识经验类文章的特征所写的一篇关于“60V恒流IC 内置5V功率MOS 兼容PWM 降压LED恒流驱动芯片 SL8443B”的文章&#xff1a; 一、概述 SL8443B是一款60V恒流IC&#xff0c;内置5V功率MOS&#xff0c;兼容PWM降压LED恒流驱动芯片。它广泛应用…

Baumer工业相机堡盟工业相机如何通过BGAPISDK获取相机的各种信息如SN/ID等等(C++)

Baumer工业相机堡盟工业相机如何通过BGAPISDK获取相机的各种信息如SN/ID等等&#xff08;C&#xff09; Baumer工业相机Baumer工业相机通过SDK获取相关生产信息的技术背景通过SDK获取相机信息的代码分析获取Baumer工业相机相关信息Baumer工业相机相关参数信息获取的测试 Baumer…

neuq-acm预备队训练week 9 P8604 [蓝桥杯 2013 国 C] 危险系数

题目背景 抗日战争时期&#xff0c;冀中平原的地道战曾发挥重要作用。 题目限制 题目描述 地道的多个站点间有通道连接&#xff0c;形成了庞大的网络。但也有隐患&#xff0c;当敌人发现了某个站点后&#xff0c;其它站点间可能因此会失去联系。 我们来定义一个危险系数 DF…

【Linux】Linux运维基础

Linux简介&#xff1a; Linux是一个开源的操作系统内核&#xff0c;最初由Linus Torvalds创建。它通常与GNU工具一起使用&#xff0c;以创建一个完整的操作系统。Linux操作系统有许多基于内核的发行版&#xff0c;如Ubuntu、CentOS、Debian等&#xff0c;每个发行版都有其独特的…

KUKA机器人Loop循环的具体使用方法示例

KUKA机器人Loop循环的具体使用方法示例 如下图所示&#xff0c;新建一个示例程序&#xff0c; 如下图所示&#xff0c;添加一些动作指令&#xff0c; 如下图所示&#xff0c;如果想要机器人在第5行和第9行之间循环执行程序&#xff0c;则可以在第5行添加指令loop&#xff0…

Vue中插槽的使用

目录 一、默认插槽 &#xff08;1&#xff09;概念 &#xff08;2&#xff09;代码展示 &#xff08;3&#xff09;后备内容 二、具名插槽 &#xff08;1&#xff09;概念 &#xff08;2&#xff09;代码展示 三、作用域插槽 &#xff08;1&#xff09;概念 &#xff0…

配电室综合监测系统

配电室综合监测系统是一种集成了自动化、智能化等技术手段的电力监控系统。它通过对配电室内的电力设备进行实时监控、数据分析和处理&#xff0c;能够提高电力设备的安全性和效率&#xff0c;及时发现并解决电力故障和潜在问题&#xff0c;保证电力系统的稳定运行。 该系统通常…

MS5510模数转换器可Pin to Pin兼容TLC5510

MS5510 是 8 比特&#xff0c;20MSPS 模数转换器&#xff08;ADCs&#xff09;,同时使用一个半闪速结构。可Pin to Pin兼容TLC5510。MS5510在 5V 的电源电压下工作&#xff0c;其典型功耗只有 130mW&#xff0c;包括一个内部的采样保持电路&#xff0c;具有高阻抗方式的并行输出…

2024最新FL Studio21.2MAC电脑版中文版下载安装步骤教程

FL Studio 简称FL&#xff0c;全称Fruity Loops Studio&#xff0c;因此国人习惯叫它"水果"。目前最新版本是FL Studio21.1.1.3750版本&#xff0c;它让你的计算机就像是全功能的录音室&#xff0c;大混音盘&#xff0c;非常先进的制作工具&#xff0c;让你的音乐突破…

【sprintboot+vue3】解决前后端分离项目遇到的问题

目录 一、Access to XMLHttpRequest at http://127.0.0.1:8088/api/hello from origin http://localhost:5173 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 二、报错[vue/compiler-sfc] 一、Access to …

人工智能革命:共同探索AIGC时代的未来

一、引言 随着大数据和强大的计算能力的兴起&#xff0c;人工智能技术&#xff08;AI&#xff09;正在快速发展&#xff0c;并为各个领域带来革命性的变化。人工智能与智能计算技术&#xff08;AIGC&#xff09;的融合不仅为企业、科研机构和普通用户提供了巨大的机遇&#xff…

LT8712EXI Type-C/DP1.2 to HDMI2.0/VGA Converter

Type-C/DP1.2 to HDMI2.0/VGA Converter Type-C/DP1.2 to HDMI2.0/VGA Converter  USB Type-C 接口  符合 USB TypeC 标准 V1.0 上的 VESA DisplayPort Alt 模式  符合 USB 供电规范 R2.0&#xff0c; V1.0版本  兼容USB Type-C电缆和连接器 规格 R1.2 内置双CC控制…

Web前端-HTML(表格与表单)

文章目录 1.表格与表单1.1 概述 2.表格 table2.1 表格概述2.2. 创建表格2.3 表格属性2.4. 表头单元格标签th2.5 表格标题caption&#xff08;了解&#xff09;2.6 合并单元格(难点)2.7 总结表格 3. 表单标签(重点)3.1 概述3.2 form表单3.3 input 控件(重点)type 属性value属性值…

星星粒子原生

使用技术&#xff1a;HTML、CSS 使用字体&#xff1a;iconfont 思路&#xff1a; 我们是要把星星围成一个圈儿然后每个星星都有次序按照不同的速度进行旋转放大然后缩小&#xff0c;整体上还会有不同的颜色定期改变首先找到五角星的字体⭐️&#xff08;我这里面用的是iconfon…

透明之光:探讨可解释性人工智能的前沿

导言 随着人工智能技术的飞速发展&#xff0c;可解释性人工智能&#xff08;Explainable AI, XAI&#xff09;成为关注焦点。本文将深入研究可解释性人工智能的背景、技术原理以及在不同领域的应用。 1. 背景与挑战 在许多领域&#xff0c;人工智能模型的黑盒性引发了关于决策…

详解wmvcore.dll丢失的解决方法

wmvcore.dll是一款由Microsoft开发的Windows系统文件&#xff0c;主要用于存储和处理多媒体文件&#xff0c;尤其是Windows媒体视频。该文件对于音频和视频的播放至关重要。如果电脑上缺少这个文件&#xff0c;可能会出现播放问题或者相关的应用程序运行错误。在本文中&#xf…

大四复习:深入浅出解释拓扑排序

我在大二学习拓扑排序的时候&#xff0c;不是很明白&#xff0c;现在已经大四&#xff0c;抽时间复习一下拓扑排序。 什么是拓扑排序&#xff1f; 如何实现拓扑排序&#xff1f; 拓扑排序的拓展 什么是拓扑排序&#xff1f; 首先拓扑排序的定义如下&#xff1a; 拓扑排序是一…