关于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 {@Overrideprotected 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) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected 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;}@Overrideprotected String getJSMainModuleName() {return "index";}@Overrideprotected boolean isNewArchEnabled() {return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;}@Overrideprotected Boolean isHermesEnabled() {return BuildConfig.IS_HERMES_ENABLED;}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}@Overridepublic 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" /><applicationandroid: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"><activityandroid: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" /><dataandroid:host="xxx"android:pathPrefix="/"android:scheme="xxxxx" /></intent-filter></activity><!--  react-native-wechat-lib support ( --><activityandroid: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 DEBUGreturn [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#elsereturn [[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:urlsourceApplication: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 *)applicationcontinueUserActivity:(NSUserActivity *)userActivityrestorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullablerestorableObjects))restorationHandler {// 触发回调方法[RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];return [WXApi handleOpenUniversalLink:userActivitydelegate: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 () => {};}, []);

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java SSM框架实现高校人事管理系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现高校人事管理系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了用户的需…

树莓派,opencv,Picamera2利用舵机云台追踪人脸

一、需要准备的硬件 Raspiberry 4b两个SG90 180度舵机&#xff08;注意舵机的角度&#xff0c;最好是180度且带限位的&#xff0c;切勿选360度舵机&#xff09;二自由度舵机云台&#xff08;如下图&#xff09;Raspiberry CSI 摄像头 组装后的效果&#xff1a; 二、项目目标…

【漏洞复现】华脉智联指挥调度平台/script_edit/fileread.php文件读取漏洞

Nx01 产品简介 深圳市华脉智联科技有限公司&#xff0c;融合通信系统将公网集群系统、专网宽带集群系统、不同制式、不同频段的短波/超短波对讲、模拟/数字集群系统、办公电话系统、广播系统、集群单兵视频、视频监控系统、视频会议系统等融为一体&#xff0c;集成了专业的有线…

Axure->Axure安装,Axure菜单栏和工具栏功能介绍,页面及概要区

目录 一.项目的全周期 二.产品经理的介绍 三.Axure安装 四.Axure的基本使用 1.Axure菜单栏和工具栏功能介绍&#xff0c;页面及概要区 一.项目的全周期 二.产品经理的介绍 同时做五个项目&#xff0c;每个项目100w&#xff0c;一个项目成本需要50-60w&#xff0c;那么五个…

做数据分析为何要学统计学(10)——什么是回归分析

​回归分析&#xff08;regression analysis)是量化两种或两种以上因素/变量间相互依赖关系的统计分析方法。回归分析根据因素的数量&#xff0c;分为一元回归和多元回归分析&#xff1b;按因素之间依赖关系的复杂程度&#xff0c;可分为线性回归分析和非线性回归分析。我们通过…

机器学习算法应用场景与评价指标

一、应用场景 机器学习的算法选择大部分依赖于具体的问题类型和数据特征。下面是一些典型的场景以及对应的常用算法&#xff1a; 1.二元分类问题 当你的目标变量只有两个类别时&#xff0c;如垃圾邮件过滤&#xff08;垃圾邮件/非垃圾邮件&#xff09;、患者疾病诊断&#x…

UE4 UMG 颜色字体和PS对应关系

与PS中对应的是Hex sRGB色号 但是PS中采用的16进制色号为6位 UE4中的为8位 UMG制作时默认dpi为96像素/英寸&#xff0c;psd默认dpi是72像素/英寸。 在GUI设计时将dpi设为96&#xff0c;或者将72dpi下字体的字号乘以0.75&#xff0c;都能还原效果图中的效果。

如何避免扫描电镜样品表面的“热伪影”现象

扫描电镜样品表面的 "热伪影" 现象通常是由于电子束的高能量导致的。这种现象可能会导致样品局部升温&#xff0c;影响成像和分析结果。以下是一些避免或减轻热伪影的方法&#xff1a; 低电子束能量&#xff1a;降低电子束的能量&#xff0c;特别是在高分辨率成像之…

【Spring Boot 】Spring Boot 常用配置总结

文章目录 前言1.多环境配置application.propertiesapplication.yaml 2.常用配置3.配置读取4.自定义配置 前言 在涉及项目开发时&#xff0c;通常我们会灵活地把一些配置项集中在一起&#xff0c;如果你的项目不是很大的情况下&#xff0c;那么通过配置文件集中不失为一个很好的…

AD采集卡设计方案:130-基于PCIe的中速模拟AD采集卡

一、产品概述 基于PCIe的一款分布式高速数据采集系统&#xff0c;实现多路AD的数据采集&#xff0c;并通过PCIe传输到存储计算服务器&#xff0c;实现信号的分析、存储。 产品固化FPGA逻辑&#xff0c;适配8路125Msps/4路250Msps/2路500Msps/1路 1Gsps采集&#xff0c;实现PCI…

SOLIDWORKS PDM—邮件信息系统

SOLIDWORKS产品数据管理 (PDM) 解决方案可帮助您控制设计数据&#xff0c;并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional&#xff0c;您的团队能够&#xff1a;1. 安全地存储和索引设计数据以实现快速检索&#xff1b;2. 打消关于…

3.electron之vue3.0的桌面应用程序

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中&#xff0c;因此它允许你仅需一个代码仓库&#xff0c;就可以撰写支持 Windows、…

智能制造网络:连接未来制造业

数字化在制造业中已经成为国家战略和行业升级的显著趋势。其影响不仅深刻地触及到个人生活&#xff0c;也在国家层面产生了重大影响&#xff0c;涉及经济、国防和军事等多个领域。在制造业数字化转型的进程中&#xff0c;构建坚实的基础网络被视为确保数字化生产全过程顺畅运作…

【ET8框架入门】0.ET框架介绍

ET8 新特性 多线程多进程架构,架构更加灵活强大&#xff0c;多线程设计详细内容请看多线程设计课程抽象出纤程(Fiber)的概念&#xff0c;类似erlang的进程&#xff0c;非常轻松的创建多个纤程&#xff0c;利用多核&#xff0c;仍然是单线程开发的体验纤程调度: 主线程&#xf…

Java反射类、构造方法、类变量、类方法

被反射的Student类 package reflect;public class Student {public String name;private String age;public int num;public Student(){}public Student(String age) {this.age age;}private Student(String name, String age){this.age age;this.name name;}public String…

如何解决Windows 11黑屏的问题,让电脑“重见光明”

本页介绍了经过测试并证明有效的常见Windows 11黑屏故障的所有修复程序。 本页上的提示和解决方案适用于所有Windows 11设备,从台式电脑和笔记本电脑到微软的Surface二合一设备。 是什么导致Windows 11黑屏死机 在使用Windows 11时,显示器或屏幕明显关闭,通常被称为Window…

「Verilog学习笔记」单端口RAM

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule RAM_1port(input clk,input rst,input enb,input [6:0]addr,input [3:0]w_data,output wire [3:0]r_data ); //*************code***********//re…

【ArcGIS Pro微课1000例】0052:基于SQL Server创建企业级地理数据库案例

文章目录 环境搭建创建企业级数据库连接企业级数据库环境搭建 ArcGIS:ArcGIS Pro 3.0.1Server.ecp:版本为10.7SQL Server:版本为SQL Server Developer 2019创建企业级数据库 企业级地理数据库的创建需要通过工具箱来实现。工具位于:数据管理工具→地理数据库管理→创建企业…

亚马逊云科技AI应用 SageMaker 新突破,机器学习优势显著

&#xff08;声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区、知乎、自媒体平台、第三方开发者媒体等亚马逊云科技官方渠道&#xff09; Amazon SageMaker是一种机器学习服务&#xff0c;帮助开发人员快速…

VS2022 将项目打包,导出为exe运行

我有一个在 VS2022 上开发的程序&#xff0c;基于.net 6框架, 想打包成 .exe程序&#xff0c;以在另一个没有安装VS的机器上运行&#xff0c;另一个机器是Win7系统&#xff0c;上面安装了.net 6框架。 虽然网上很多教程&#xff0c;需要安装Project Installer&#xff0c;配置A…