广西建设职业技术学院教育网站,提供网站建设收费标准,php网站首页模板,人防网站建设关于react native项目中使用react-native-wechat-lib3.0.4 插件官网安装依赖包#xff08;Android和iOS下载插件完成后记得更新依赖#xff0c;#xff09;Android中配置1.在项目文件夹下面创建文件夹wxapi#xff08;如上图#xff09;2.在文件MainApplication.java中如下… 关于react native项目中使用react-native-wechat-lib3.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-lib3.0.4Android中配置 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 ListReactPackage getPackages() {SuppressWarnings(UnnecessaryLocalVariable)ListReactPackage 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:androidhttp://schemas.android.com/apk/res/androiduses-permission android:nameandroid.permission.INTERNET /uses-permission android:nameandroid.permission.ACCESS_NETWORK_STATE /uses-permission android:nameandroid.permission.ACCESS_WIFI_STATE /!-- 相机权限 --uses-permission android:nameandroid.permission.CAMERA /!-- 如果需要使用麦克风进行视频录制 --uses-permission android:nameandroid.permission.RECORD_AUDIO/!-- 如果需要使用相机胶卷 --uses-permission android:nameandroid.permission.READ_EXTERNAL_STORAGE /uses-permission android:nameandroid.permission.WRITE_EXTERNAL_STORAGE /!-- 地址定位 --uses-permission android:nameandroid.permission.ACCESS_FINE_LOCATION /uses-permission android:nameandroid.permission.ACCESS_COARSE_LOCATION /applicationandroid:name.MainApplicationandroid:labelstring/app_nameandroid:iconmipmap/ic_launcherandroid:roundIconmipmap/ic_launcher_roundandroid:allowBackupfalseandroid:themestyle/AppThemeactivityandroid:name.MainActivityandroid:labelstring/app_nameandroid:configChangeskeyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiModeandroid:launchModesingleTaskandroid:windowSoftInputModeadjustResizeandroid:exportedtrueintent-filteraction android:nameandroid.intent.action.MAIN /category android:nameandroid.intent.category.LAUNCHER //intent-filterintent-filter android:autoVerifytrueaction android:nameandroid.intent.action.VIEW /category android:nameandroid.intent.category.DEFAULT /category android:nameandroid.intent.category.BROWSABLE /dataandroid:hostxxxandroid:pathPrefix/android:schemexxxxx //intent-filter/activity!-- react-native-wechat-lib support ( --activityandroid:name.wxapi.WXEntryActivityandroid:labelstring/app_nameandroid:exportedtrueandroid:taskAffinity包名android:launchModesingleTask/!-- ) --/application!-- react-native-wechat-lib support ( --queriespackage android:namecom.tencent.mm //queries!-- ) --
/manifest
IOS配置 到微信下载最新sdk放在上图位置 在Xcode进行环境配置如图
1.在AppDelegate.h文件添加如下代码
#import RCTAppDelegate.h
#import UIKit/UIKit.h
#import WXApi.hinterface AppDelegate : RCTAppDelegateWXApiDelegateend
2.在AppDelegate.mm文件添加如下代码
#import AppDelegate.h#import React/RCTBundleURLProvider.h
#import React/RCTLinkingManager.himplementation 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:(NSDictionaryUIApplicationOpenURLOptionsKey, 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(^)(NSArrayidUIUserActivityRestoring * __nullablerestorableObjects))restorationHandler {// 触发回调方法[RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];return [WXApi handleOpenUniversalLink:userActivitydelegate:self];
}end
3.Info.plist文件
keyCFBundleURLTypes/keyarraydictkeyCFBundleTypeRole/keystringEditor/stringkeyCFBundleURLName/keystringalipay/stringkeyCFBundleURLSchemes/keyarraystringalipayxxxxx/string/array/dictdictkeyCFBundleTypeRole/keystringEditor/stringkeyCFBundleURLName/keystringweixin/stringkeyCFBundleURLSchemes/keyarraystringwxxxxxx/string/array/dict/array
keyLSApplicationQueriesSchemes/keyarraystringiosamap/stringstringbaidumap/stringstringqqmap/stringstringalipay/stringstringweixin/stringstringwechat/stringstringweixinULAPI/stringstringweixinURLParamsAPI/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 () {};}, []);备注文档官方文档更加详细
