# ReactNative 集成
本插件提供在 ReactNative 运行环境中运行小程序能力。
# 1. 引入插件
引入小程序引擎插件。
在 package.json 文件中引入小程序 ReactNative 插件
"react-native-mopsdk": "^1.0.3"
安装插件
$ npm install react-native-mopsdk --save
$ react-native link react-native-mopsdk
# 2. 初始化引擎
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:
'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('初始化失败')
})
# 3. 打开小程序
MopSDK.openApplet({appId: 'xxxx'});
提示
- SDK KEY 和 SECRET 可以从社区版的管理后台中获取;
- apiServer 为当前小程序后端的服务地址,也即前文所输入的
IP:端口
; - 小程序 id 为在管理后台上架的小程序唯一ID(在小程序上架时自动生成);
- 上述的参数可以在前文服务器部署的后台界面上获取,也可以在没有部署服务端的情况下在 FinClip 官网 (opens new window) 注册体验;
- 重要事情说四遍,您可以在官方的 Github 仓库 (opens new window)中查看示例代码;
- 请注意 APP 的 Bundle Id 需要与管理后台中添加的保持一致,可在【企业端-应用管理】中查看。