Template version:v0.2.2
react-native-wechat-lib
[!TIP] Github address
Find the matching version information in the release address of a third-party library:@react-native-ohos/react-native-wechat-lib Releases。
Go to the project directory and execute the following instruction::
npm install @react-native-ohos/react-native-wechat-lib
yarn add @react-native-ohos/react-native-wechat-lib
The following code shows the basic use scenario of the repository:
[!WARNING] The name of the imported repository remains unchanged.
[tips] When using the demo below, please change the AppID to the AppID of the HarmonyOS application applied for on the WeChat open platform.
import * as React from 'react';
import { StyleSheet, View, Text, Button, Alert } from 'react-native';
import { getApiVersion, registerApp, openWXApp, sendAuthRequest, shareText } from 'react-native-wechat-lib';
export default function App() {
const [versionNumber, setVersionNumber] = React.useState<string | undefined>();
React.useEffect(() => {
registerApp('AppID', 'universalLink').then((res) => {
console.log("registerApp: " + res)
});
}, []);
function onLogin() {
sendAuthRequest('snsapi_userinfo', '')
.then((response: any) => {
Alert.alert('Login successful, code' + response.code)
})
.catch(error => {
console.log(error)
let errorCode = Number(error.code);
if (errorCode === -2) {
Alert.alert('Authorized login has been canceled')
} else {
Alert.alert('WeChat authorized login failed')
}
});
}
function onShareText() {
shareText({
text: 'test content.',
scene: 0
}).then()
}
return (
<View style={styles.container}>
<Text style={styles.title}>Call wechat SDK demo</Text>
<Text style={styles.versionBox}>
Version: {versionNumber}
</Text>
<View style={styles.buttonGroup}>
<View style={styles.button}>
<Button title={'Open WeChat'} onPress={() => { openWXApp().then() }} />
</View>
<View style={styles.button}>
<Button title={'Authorized login'} onPress={() => { onLogin() }} />
</View>
<View style={styles.button}>
<Button title={'Share Text'} onPress={() => { onShareText() }} />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: '100%',
// flex: 1,
alignItems: 'center',
// justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
title: {
marginTop: 48,
fontSize: 24,
color: 'rgba(0, 0, 0, 0.6)',
},
versionBox: {
color: 'rgba(0, 0, 0, 0.6)'
},
buttonGroup: {
width: '100%',
padding: 6,
marginTop: 24,
},
button: {
margin: 6,
}
});
Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.
Open the harmony
directory of the HarmonyOS project in DevEco Studio.
{
...
"overrides": {
"@rnoh/react-native-openharmony" : "./react_native_openharmony"
}
}
Currently, two methods are available:
Method 1 (recommended): Use the HAR file.
[!TIP] The HAR file is stored in the
harmony
directory in the installation path of the third-party library.
Open entry/oh-package.json5
file and add the following dependencies:
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
"@react-native-ohos/react-native-wechat-lib": "file:../../node_modules/@react-native-ohos/react-native-wechat-lib/harmony/react_native_wechat_lib.har"
}
Click the sync
button in the upper right corner.
Alternatively, run the following instruction on the terminal:
cd entry
ohpm install
Method 2: Directly link to the source code.
[!TIP] For details, see Directly Linking Source Code.
Open entry\src\main\ets\entryability\EntryAbility.ets
and add the following code:
import {RNAbility} from '@rnoh/react-native-openharmony';
+ import { AbilityConstant, Want } from '@kit.AbilityKit';
+ import { WechatLibTurboModule } from '@react-native-ohos/react-native-wechat-lib';
export default class EntryAbility extends RNAbility {
+ onCreate(want: Want) {
+ super.onCreate(want)
+ this.handleWeChatCallIfNeed(want)
+ }
getPagePath() {
return 'pages/Index';
}
+ onNewWant(want: Want, _launchParam: AbilityConstant.LaunchParam): void {
+ this.handleWeChatCallIfNeed(want)
+ }
+ private handleWeChatCallIfNeed(want: Want) {
+ WechatLibTurboModule.handleWant(want)
+ }}
open entry/src/main/module.json5
and add the following code:
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"default"
],
+ "querySchemes": [
+ "weixin",
+ ],
...
}
}
open entry/src/main/cpp/CMakeLists.txt
and add the following code:
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)
add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-wechat-lib/src/main/cpp" ./wechat-lib)
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
add_library(rnoh_app SHARED
${GENERATED_CPP_FILES}
"./PackageProvider.cpp"
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)
# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC wechat_lib)
# RNOH_END: manual_package_linking_2
Open entry/src/main/cpp/PackageProvider.cpp
and add the following code:
#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "RNWechatLibPackage.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {
std::make_shared<RNOHGeneratedPackage>(ctx),
std::make_shared<SamplePackage>(ctx),
+ std::make_shared<RNWechatLibPackage>(ctx),
};
}
Open the entry/src/main/ets/RNPackagesFactory.ts
file and add the following code:
...
+ import { WechatLibPackage } from '@react-native-ohos/react-native-wechat-lib/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
+ new WechatLibPackage(ctx),
];
}
Click the sync
button in the upper right corner.
Alternatively, run the following instruction on the terminal:
cd entry
ohpm install
Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
Check the release version information in the release address of the third-party library:@react-native-ohos/react-native-wechat-lib
[!TIP] The Platform column indicates the platform where the properties are supported in the original third-party library.
[!TIP] If the value of HarmonyOS Support is yes, it means that the HarmonyOS platform supports this property; no means the opposite; partially means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
[!TIP] The rules for mobile applications to jump to Mini Program, please refer to the feature introduction for launching Mini Program in the app
Name | Description | Type | Required | Platform | HarmonyOS Support |
---|---|---|---|---|---|
registerApp(appid) | register | Function | no | Android/iOS | yes |
isWXAppInstalled() | Determine whether WeChat is installed | Function | no | Android/iOS | yes |
isWXAppSupportApi() | Check support | Function | no | Android/iOS | no |
getApiVersion() | Get API version number | Function | no | Android/iOS | no |
openWXApp() | Open WeChat | Function | no | Android/iOS | yes |
sendAuthRequest([scope[, state]]) | WeChat authorized login | Function | no | Android/iOS | yes |
shareText(ShareTextMetadata) | Share/Collect Text | Function | no | Android/iOS | partially(Session、Timeline) |
shareImage(ShareImageMetadata) | Share Image | Function | no | Android/iOS | partially(Session、Timeline) |
shareLocalImage(ShareImageMetadata) | Share LocalImage | Function | no | Android/iOS | partially(Session、Timeline) |
shareFile(ShareFileMetadata) | Share File | Function | no | Android/iOS | partially(Session) |
shareMusic(ShareMusicMetadata) | Share Music | Function | no | Android/iOS | no |
shareVideo(ShareVideoMetadata) | Share Video | Function | no | Android/iOS | partially(Session) |
shareWebpage (ShareWebpageMetadata) | Share Webpage | Function | no | Android/iOS | partially(Session) |
shareMiniProgram(ShareMiniProgramMetadata) | Share MiniProgram | Function | no | Android/iOS | partially(Session) |
launchMiniProgram (LaunchMiniProgramMetadata) | Launch MiniProgram | Function | no | Android/iOS | yes |
chooseInvoice (ChooseInvoice) | Select invoice | Function | no | Android/iOS | no |
pay(payload) | pay | Function | no | Android/iOS | yes |
subscribeMessage(SubscribeMessageMetadata) | |||||
One-time subscription to messages | Function | no | Android/iOS | no |
This project is licensed under The MIT License (MIT).
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。