13 Star 104 Fork 304

react-native-oh-library/usage-docs

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
react-native-wechat-lib.md 12.99 KB
一键复制 编辑 原始数据 按行查看 历史

Template version:v0.2.2

react-native-wechat-lib

Supported platforms License

[!TIP] Github address

Installation and Usage

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

npm install @react-native-ohos/react-native-wechat-lib

yarn

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,

  }
});

Link

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.

1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2. Introducing Native Code

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.

3. Configuring EntryAbility

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)
+  }}

4. Configuring module.json5

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",
+   ],
    ...
  }
}

5. Configuring CMakeLists and Introducing RNWechatLibPackage

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),
    };
}

6. Introducing WechatLibPackage to ArkTS

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

7. Running

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.

Constraints

Compatibility

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

API

[!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

Known Issues

Others

  • ShareText、ShareImage、ShareLocalImage、ShareMiniProgram、ShareFile、ShareVideo、ShareWebpage: Only sharing is supported, collection is not supported, because the WeChat Open SDK currently does not support collection on the HarmonyOS platform.
  • isWXAppSupportApi、getApiVersion、ShareMusic、ChooseInvoice、subscribeMessage. These interfaces are currently not supported by HarmonyOS WeChat Open SDK.

License

This project is licensed under The MIT License (MIT).

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/react-native-oh-library/usage-docs.git
git@gitee.com:react-native-oh-library/usage-docs.git
react-native-oh-library
usage-docs
usage-docs
master

搜索帮助