https://github.com/finogeeks/react-native-mopsdk
FinClip React SDK 插件，用于 RN 环境中 API 与组件调用 / React SDK for FinClip
https://github.com/finogeeks/react-native-mopsdk
finclip mini-app mini-program react react-native sdk
Last synced: 24 days ago
JSON representation
FinClip React SDK 插件，用于 RN 环境中 API 与组件调用 / React SDK for FinClip
- Host: GitHub
- URL: https://github.com/finogeeks/react-native-mopsdk
- Owner: finogeeks
- Created: 2020-04-12T15:54:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-07-09T06:34:24.000Z (3 months ago)
- Last Synced: 2025-08-10T20:47:37.127Z (about 2 months ago)
- Topics: finclip, mini-app, mini-program, react, react-native, sdk
- Language: Objective-C
- Homepage: https://finclip.com/
- Size: 2.93 MB
- Stars: 19
- Watchers: 2
- Forks: 10
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
FinClip React Native SDK
本项目提供在 React Native 环境中运行小程序的能力
[官方网站](https://www.finclip.com/) | [示例小程序](https://www.finclip.com/#/market) | [开发文档](https://www.finclip.com/mop/document/) | [部署指南](https://www.finclip.com/mop/document/introduce/quickStart/cloud-server-deployment-guide.html) | [SDK 集成指南](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html) | [API 列表](https://www.finclip.com/mop/document/develop/api/overview.html) | [组件列表](https://www.finclip.com/mop/document/develop/component/overview.html) | [隐私承诺](https://www.finclip.com/mop/document/operate/safety.html)
-----
## 🤔 FinClip 是什么?
有没有**想过**，开发好的微信小程序能放在自己的 APP 里直接运行，只需要开发一次小程序，就能在不同的应用中打开它，是不是很不可思议？
有没有**试过**，在自己的 APP 中引入一个 SDK ，应用中不仅可以打开小程序，还能自定义小程序接口，修改小程序样式，是不是觉得更不可思议？
这就是 FinClip ，就是有这么多不可思议！
## ⚙️ 配置环境
`$ npm install react-native-mopsdk --save`
## 🖥 自动安装
`$ react-native link react-native-mopsdk`
## 🔨 使用方法
```javascript
import MopSDK from 'react-native-mopsdk';
import { NativeModules, NativeEventEmitter } from 'react-native';
// 初始化
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
MopSDK.initialize({
appkey:
'Ev7QHvml1UcW98Y1GaLfRz34ReffbDESaTXbCoFyKhEm0a3gam0elOOOdZ6Twpa3HkBzlvOwJ2cyhOrMVWuuGw==',
secret: '16f2d2700453ae51',
apiServer: 'https://api.finclip.com',
apiPrefix: '/api/v1/mop/',
nativeEventEmitter: eventEmitter,
finMopSDK: NativeModules.FINMopSDK,
}).then(res => {
console.log('初始化成功')
}).catch(err => {
console.log('初始化失败')
})
```
## 🔨 使用方法
```javascript
import MopSDK from 'react-native-mopsdk';
import { NativeModules, NativeEventEmitter } from 'react-native';
/**
* @description Initialize the SDK with specific configurations
* @param {Object} params - Configuration parameters
*/
MopSDK.initSDK = function(params) {
return new Promise((resolve, reject) => {
// 这里假设 params 中已经包含了 config 和 uiConfig
let { config, uiConfig } = params;
// 确保 config 和 uiConfig 是有效的对象
if (!config || typeof config !== 'object' || !uiConfig || typeof uiConfig !== 'object') {
reject(new Error('Invalid config or uiConfig'));
return;
}
// 调用原生模块的 initSDK 方法
NativeModules.FINMopSDK.initSDK({ config, uiConfig }).then(res => {
console.log('SDK 初始化成功');
resolve(res);
}).catch(err => {
console.error('SDK 初始化失败', err);
reject(err);
});
});
};
// 使用示例
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
MopSDK.initSDK({
config: {
appkey: '您的appkey',
secret: '您的secret',
apiServer: 'https://api.finclip.com',
apiPrefix: '/api/v1/mop/',
// 其他相关的配置项
},
uiConfig: {
// UI 相关配置
}
}).then(res => {
console.log('初始化成功');
}).catch(err => {
console.log('初始化失败', err);
});
```
## 📱 DEMO
[点击这里](https://github.com/finogeeks/finclip-react-native-demo) 查看 React Native Demo
## 📋 接口文档
[点击这里](https://www.finclip.com/mop/document/runtime-sdk/reactNative/rn-integrate.html) 查看 React Native 快速集成文档
## 🔗 常用链接
以下内容是您在 FinClip 进行开发与体验时，常见的问题与指引信息
- [FinClip 官网](https://www.finclip.com/#/home)
- [示例小程序](https://www.finclip.com/#/market)
- [文档中心](https://www.finclip.com/mop/document/)
- [SDK 部署指南](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html)
- [小程序代码结构](https://www.finclip.com/mop/document/develop/guide/structure.html)
- [iOS 集成指引](https://www.finclip.com/mop/document/runtime-sdk/ios/ios-integrate.html)
- [Android 集成指引](https://www.finclip.com/mop/document/runtime-sdk/android/android-integrate.html)
- [Flutter 集成指引](https://www.finclip.com/mop/document/runtime-sdk/flutter/flutter-integrate.html)
## ☎️ 联系我们
微信扫描下面二维码，关注官方公众号 **「凡泰极客」**，获取更多精彩内容。
微信扫描下面二维码，加入官方微信交流群，获取更多精彩内容。
