FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# React Native 集成

集成样例代码

我们提供了 DEMO 工程,开发者可以在Github(国外) (opens new window)Gitee(国内) (opens new window) 获取集成样例代码。

# 1. 获取凭据

请注意

集成 SDK 需要先在 FinClip 平台中创建应用绑定小程序,获得每个应用专属的 SDK KEYSDK SECRET后,随后就可以在集成 SDK 时填写对应的参数。打开小程序时 SDK 会自动初始化,并校验 SDK KEYSDK SECRETBundleID(Application ID)是否正确。

您可以 【点击这里】 查看如何获取所需要的 SDK KEYSDK SECRET。请务必确认集成 SDK 时填写的参数正确,否则会导致小程序无法打开。

# 2. 集成插件

# 2.1 引入插件

引入小程序引擎插件。

package.json文件中引入小程序 ReactNative 插件

"react-native-mopsdk": "^1.0.4"

安装插件

$ npm install react-native-mopsdk --save
$ react-native link react-native-mopsdk

# 2.2 初始化引擎

备注:如果需要其他配置项的初始化方法请参考文档SDK 初始化

import MopSDK from 'react-native-mopsdk';
// 1. 引入 NativeModules, NativeEventEmitter
import { NativeModules, NativeEventEmitter } from 'react-native';

// 2. mop初始化
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
  MopSDK.initialize({
    appkey:
      'SDK Key信息', // SDK Key
    secret: 'SDK Secret信息', // SDK Secret
    apiServer: '服务器地址', // 服务器地址
    apiPrefix: '/api/v1/mop/', // 服务器接口请求路由前缀
    nativeEventEmitter: eventEmitter,
    finMopSDK: NativeModules.FINMopSDK,
  }).then(res => {
    console.log('初始化成功')
  }).catch(err => {
    console.log('初始化失败')
  })

# 2.3 打开小程序

MopSDK.openApplet({appId: 'xxxx'});  // 小程序 AppID

# 3. 常见问题

# 3.1 可以使用其他 react-native 版本的 demo 吗?

答:因为 react-native 不同版本的差别较大,建议使用 0.67.4 的 react-native 版本去运行我们的官方 demo.

# 3.2 如何清理项目缓存?

答:清理缓存可使用 Metro 的清理工具 (opens new window).

# 3.3 iOS 端在 M1 运行不了 pod install?

答:使用 arch -x86_64 pod install替代 pod install.

# 3.4 运行 demo 时出现:No matching variant of com.facebook.react:react-native:0.71.0-rc.0 was found 报错

答: 参考 #issue-35210 (opens new window) 解决

# 3.5 用 Android Studio 运行 react-native demo 时,出现:Cannot run program "node": error=2, No such file or directory 报错

答:在终端通过输入命令: open -a /Applications/Android\ Studio.app 的方式打开

# 3.6 如遇: Plugin with id maven not found. 报错

答:请把 react-native-mopsdk 升级至 2.0.1 版本

© 2022 FinClip with ❤