{"id":28547375,"url":"https://github.com/finogeeks/finclip-react-native-demo","last_synced_at":"2025-06-26T15:32:15.576Z","repository":{"id":38849883,"uuid":"255302644","full_name":"finogeeks/finclip-react-native-demo","owner":"finogeeks","description":"FinClip RN 运行环境，让小程序在 RN 应用中无缝运行  / ReactNative DEMO for FinClip","archived":false,"fork":false,"pushed_at":"2025-03-17T10:13:38.000Z","size":3713,"stargazers_count":47,"open_issues_count":9,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-10T00:11:14.846Z","etag":null,"topics":["demo","finclip","mini-app","mini-program","react","react-native","reactnative","rn"],"latest_commit_sha":null,"homepage":"https://finclip.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/finogeeks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-04-13T11:04:30.000Z","updated_at":"2025-04-02T01:54:56.000Z","dependencies_parsed_at":"2023-02-16T13:16:10.934Z","dependency_job_id":null,"html_url":"https://github.com/finogeeks/finclip-react-native-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/finogeeks/finclip-react-native-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-react-native-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-react-native-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-react-native-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-react-native-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finogeeks","download_url":"https://codeload.github.com/finogeeks/finclip-react-native-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-react-native-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262094349,"owners_count":23257936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","finclip","mini-app","mini-program","react","react-native","reactnative","rn"],"created_at":"2025-06-10T00:10:46.251Z","updated_at":"2025-06-26T15:32:15.547Z","avatar_url":"https://github.com/finogeeks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.finclip.com?from=github\"\u003e\n    \u003cimg width=\"auto\" src=\"https://www.finclip.com/mop/document/images/logo.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e \n    \u003cstrong\u003eFinClip ReactNative DEMO\u003c/strong\u003e\u003c/br\u003e\n\u003cp\u003e\n\u003cp align=\"center\"\u003e \n        本项目提供在 ReactNative 环境中运行小程序的 DEMO 样例\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e \n\t👉 \u003ca href=\"https://www.finclip.com?from=github\"\u003ehttps://www.finclip.com/\u003c/a\u003e 👈\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E4%B8%93%E5%B1%9E%E5%BC%80%E5%8F%91%E8%80%85-20000%2B-brightgreen\"\u003e\u003c/a\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E5%B7%B2%E4%B8%8A%E6%9E%B6%E5%B0%8F%E7%A8%8B%E5%BA%8F-6000%2B-blue\"\u003e\u003c/a\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E5%B7%B2%E9%9B%86%E6%88%90%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BA%94%E7%94%A8-75%2B-yellow\"\u003e\u003c/a\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E5%AE%9E%E9%99%85%E8%A6%86%E7%9B%96%E7%94%A8%E6%88%B7-2500%20%E4%B8%87%2B-orange\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://www.zhihu.com/org/finchat\"\u003e\u003cimg src=\"https://img.shields.io/badge/FinClip--lightgrey?logo=zhihu\u0026style=social\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.finclip.com/blog/\"\u003e\u003cimg src=\"https://img.shields.io/badge/FinClip%20Blog--lightgrey?logo=ghost\u0026style=social\"\u003e\u003c/a\u003e\n\n\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[官方网站](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)\n\n\u003c/div\u003e\n\n-----\n## 🤔 FinClip 是什么?\n\n有没有**想过**，开发好的微信小程序能放在自己的 APP 里直接运行，只需要开发一次小程序，就能在不同的应用中打开它，是不是很不可思议？\n\n有没有**试过**，在自己的 APP 中引入一个 SDK ，应用中不仅可以打开小程序，还能自定义小程序接口，修改小程序样式，是不是觉得更不可思议？\n\n这就是 FinClip ，就是有这么多不可思议！\n\n## 🤩 效果预览\n\n**本项目是 FinClip 小程序在 ReactNative 工程基础上下集成及运行小程序 DEMO 演示，您可以按照下方流程测试，验证 FinClip 小程序在 ReactNative 环境下的实际效果。**\n\n先看一下运行效果~\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"#\"\u003e\n    \u003cimg width=\"auto\" src=\"./docs/mop-react-native-demo.gif\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## ⚙️ 操作步骤\n## 1. 引入插件\n引入小程序引擎插件。\n\n在 package.json 文件中引入小程序 ReactNative 插件\n```objectivec\n\"react-native-mopsdk\": \"^1.0.3\"\n```\n\n安装插件\n```shell\n$ npm install react-native-mopsdk --save\n$ react-native link react-native-mopsdk\n```\n## 2. 初始化引擎\n```objectivec\nimport MopSDK from 'react-native-mopsdk';\n// 1. 引入 NativeModules, NativeEventEmitter\nimport { NativeModules, NativeEventEmitter } from 'react-native';\n\n// 2. mop初始化\nconst eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);\n  MopSDK.initialize({\n    appkey:\n      'Ev7QHvml1UcW98Y1GaLfRz34ReffbDESaTXbCoFyKhEm0a3gam0elOOOdZ6Twpa3HkBzlvOwJ2cyhOrMVWuuGw==',\n    secret: '16f2d2700453ae51',\n    apiServer: 'https://api.finclip.com',\n    apiPrefix: '/api/v1/mop/',\n    nativeEventEmitter: eventEmitter,\n    finMopSDK: NativeModules.FINMopSDK,\n  }).then(res =\u003e {\n    console.log('初始化成功')\n  }).catch(err =\u003e {\n    console.log('初始化失败')\n  })\n\n```\n\n## 3. 打开小程序\n```objectivec\nMopSDK.openApplet({appId: 'xxxx'});\n```\n\n\n- **SDK KEY** 和 **SDK SECRET** 可以从 [FinClip](https://finclip.com/#/home)  获取，点 [这里](https://finclip.com/#/register) 注册账号；\n- 进入平台后，在「应用管理」页面添加你自己的包名后，点击「复制」即可获得  key\\secret\\apisever 字段；\n- **apiServer** 和 **apiPrefix** 是固定字段，请直接参考本 DEMO ；\n- **小程序 ID** 是管理后台上架的小程序 APP ID，需要在「小程序管理」中创建并在「应用管理」中关联；\n\u003e 小程序 ID 与 微信小程序ID 不一样哦！（这里是特指 FinClip 平台的 ID ）\n\n\n## 📋 接口文档\n[点击这里](https://www.finclip.com/mop/document/runtime-sdk/reactNative/rn-integrate.html) 查看 React Native 快速集成文档\n\n## 🔗 常用链接\n以下内容是您在 FinClip 进行开发与体验时，常见的问题与指引信息\n\n- [FinClip 官网](https://www.finclip.com/#/home)\n- [示例小程序](https://www.finclip.com/#/market)\n- [文档中心](https://www.finclip.com/mop/document/)\n- [SDK 部署指南](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html)\n- [小程序代码结构](https://www.finclip.com/mop/document/develop/guide/structure.html)\n- [iOS 集成指引](https://www.finclip.com/mop/document/runtime-sdk/ios/ios-integrate.html)\n- [Android 集成指引](https://www.finclip.com/mop/document/runtime-sdk/android/android-integrate.html)\n- [Flutter 集成指引](https://www.finclip.com/mop/document/runtime-sdk/flutter/flutter-integrate.html)\n\n## ☎️ 联系我们\n微信扫描下面二维码，关注官方公众号 **「凡泰极客」**，获取更多精彩内容。\u003cbr\u003e\n\u003cimg width=\"150px\" src=\"https://www.finclip.com/mop/document/images/ic_qr.svg\"\u003e\n\n微信扫描下面二维码，加入官方微信交流群，获取更多精彩内容。\u003cbr\u003e\n\u003cimg width=\"150px\" src=\"https://www-cdn.finclip.com/images/qrcode/qrcode_shequn_text.png\"\u003e\n\n## Stargazers\n[![Stargazers repo roster for @finogeeks/finclip-react-native-demo](https://reporoster.com/stars/finogeeks/finclip-react-native-demo)](https://github.com/finogeeks/finclip-react-native-demo/stargazers)\n\n## Forkers\n[![Forkers repo roster for @finogeeks/finclip-react-native-demo](https://reporoster.com/forks/finogeeks/finclip-react-native-demo)](https://github.com/finogeeks/finclip-react-native-demo/network/members)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinogeeks%2Ffinclip-react-native-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinogeeks%2Ffinclip-react-native-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinogeeks%2Ffinclip-react-native-demo/lists"}