5 Star 6 Fork 2

FinClip / finclip-react-native-demo

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

FinClip ReactNative DEMO

本项目提供在 ReactNative 环境中运行小程序的 DEMO 样例

👉 https://www.finclip.com/ 👈


🤔 FinClip 是什么?

有没有想过,开发好的微信小程序能放在自己的 APP 里直接运行,只需要开发一次小程序,就能在不同的应用中打开它,是不是很不可思议?

有没有试过,在自己的 APP 中引入一个 SDK ,应用中不仅可以打开小程序,还能自定义小程序接口,修改小程序样式,是不是觉得更不可思议?

这就是 FinClip ,就是有这么多不可思议!

🤩 效果预览

本项目是 FinClip 小程序在 ReactNative 工程基础上下集成及运行小程序 DEMO 演示,您可以按照下方流程测试,验证 FinClip 小程序在 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 KEYSDK SECRET 可以从 FinClip 获取,点 这里 注册账号;
  • 进入平台后,在「应用管理」页面添加你自己的包名后,点击「复制」即可获得 key\secret\apisever 字段;
  • apiServerapiPrefix 是固定字段,请直接参考本 DEMO ;
  • 小程序 ID 是管理后台上架的小程序 APP ID,需要在「小程序管理」中创建并在「应用管理」中关联;

小程序 ID 与 微信小程序ID 不一样哦!(这里是特指 FinClip 平台的 ID )

📋 接口文档

点击这里 查看 React Native 快速集成文档

🔗 常用链接

以下内容是您在 FinClip 进行开发与体验时,常见的问题与指引信息

☎️ 联系我们

微信扫描下面二维码,关注官方公众号 「凡泰极客」,获取更多精彩内容。

微信扫描下面二维码,加入官方微信交流群,获取更多精彩内容。

Stargazers

Stargazers repo roster for @finogeeks/finclip-react-native-demo

Forkers

Forkers repo roster for @finogeeks/finclip-react-native-demo

Empty file

About

FinClip RN 运行环境,让小程序在 RN 应用中无缝运行 / ReactNative DEMO for FinClip expand collapse
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/finclip/react-native-demo.git
git@gitee.com:finclip/react-native-demo.git
finclip
react-native-demo
finclip-react-native-demo
master

Search