{"id":28547304,"url":"https://github.com/finogeeks/finclip-flutter-demo","last_synced_at":"2026-03-07T11:02:32.828Z","repository":{"id":37782415,"uuid":"243480978","full_name":"finogeeks/finclip-flutter-demo","owner":"finogeeks","description":"FinClip Flutter 运行环境，让小程序在 Flutter 应用中无缝运行  / Flutter DEMO for FinClip","archived":false,"fork":false,"pushed_at":"2025-09-29T03:31:43.000Z","size":1311,"stargazers_count":101,"open_issues_count":4,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-29T05:32:16.402Z","etag":null,"topics":["demo","finclip","flutter","mini-app","mini-program"],"latest_commit_sha":null,"homepage":"https://finclip.com/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-02-27T09:30:35.000Z","updated_at":"2025-09-29T03:31:46.000Z","dependencies_parsed_at":"2024-03-21T03:24:31.652Z","dependency_job_id":"4dc3ebdc-ae83-4bab-9464-c1fe7741f8c7","html_url":"https://github.com/finogeeks/finclip-flutter-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/finogeeks/finclip-flutter-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-flutter-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-flutter-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-flutter-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-flutter-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finogeeks","download_url":"https://codeload.github.com/finogeeks/finclip-flutter-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finogeeks%2Ffinclip-flutter-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30212103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T09:02:10.694Z","status":"ssl_error","status_checked_at":"2026-03-07T09:02:08.429Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","flutter","mini-app","mini-program"],"created_at":"2025-06-10T00:10:29.370Z","updated_at":"2026-03-07T11:02:32.821Z","avatar_url":"https://github.com/finogeeks.png","language":"Dart","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 Flutter DEMO\u003c/strong\u003e\u003c/br\u003e\n\u003cp\u003e\n\u003cp align=\"center\"\u003e \n        本项目提供在 Flutter 环境中运行小程序的示例 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## ⚙️ Flutter 集成\n\n在项目 `pubspec.yaml` 文件中添加依赖\n\n```yaml\nmop: latest.version\n```\n\n## 🖥 示例\n\n```flutter\nimport 'package:flutter/material.dart';\nimport 'dart:async';\nimport 'dart:io';\nimport 'package:mop/mop.dart';\n\nvoid main() =\u003e runApp(MyApp());\n\nclass MyApp extends StatefulWidget {\n  @override\n  _MyAppState createState() =\u003e _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n  @override\n  void initState() {\n    super.initState();\n    init();\n  }\n\n  // Platform messages are asynchronous, so we initialize in an async method.\n  Future\u003cvoid\u003e init() async {\n    if (Platform.isiOS) {\n      //com.finogeeks.mopExample\n      final res = await Mop.instance.initialize(\n          '22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',\n          apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');\n      print(res);\n    } else if (Platform.isAndroid) {\n      //com.finogeeks.mopexample\n      final res = await Mop.instance.initialize(\n          '22LyZEib0gLTQdU3MUauARjmmp6QmYgjGb3uHueys1oA', '98c49f97a031b555',\n          apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');\n      print(res);\n    }\n    if (!mounted) return;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('凡泰极客小程序 Flutter 插件'),\n        ),\n        body: Center(\n          child: Container(\n            padding: EdgeInsets.only(\n              top: 20,\n            ),\n            child: Column(\n              children: \u003cWidget\u003e[\n                Container(\n                  decoration: BoxDecoration(\n                    borderRadius: BorderRadius.all(Radius.circular(5)),\n                    gradient: LinearGradient(\n                      colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],\n                      stops: const [0.0, 1.0],\n                      begin: Alignment.topCenter,\n                      end: Alignment.bottomCenter,\n                    ),\n                  ),\n                  child: FlatButton(\n                    onPressed: () {\n                      Mop.instance.openApplet('5e3c147a188211000141e9b1');\n                    },\n                    child: Text(\n                      '打开示例小程序',\n                      style: TextStyle(color: Colors.white),\n                    ),\n                  ),\n                ),\n                SizedBox(height: 30),\n                Container(\n                  decoration: BoxDecoration(\n                    borderRadius: BorderRadius.all(Radius.circular(5)),\n                    gradient: LinearGradient(\n                      colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],\n                      stops: const [0.0, 1.0],\n                      begin: Alignment.topCenter,\n                      end: Alignment.bottomCenter,\n                    ),\n                  ),\n                  child: FlatButton(\n                    onPressed: () {\n                      Mop.instance.openApplet('5e4d123647edd60001055df1',sequence: 1);\n                    },\n                    child: Text(\n                      '打开官方小程序',\n                      style: TextStyle(color: Colors.white),\n                    ),\n                  ),\n                ),\n              ],\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n## 📘 目录结构\n```\n.\n├── LICENSE\n├── README.md\n├── android 安卓工程目录\n│   ├── app\n│   │   ├── build.gradle  应用构建配置\n│   │   └── src\n│   │       ├── debug\n│   │       │   └── AndroidManifest.xml 应用清单文件\n│   │       ├── main 应用源码主目录\n│   │       │   ├── AndroidManifest.xml 应用清单文件\n│   │       │   ├── java 应用源码目录\n│   │       │   │   ├── com\n│   │       │   │   │   └── finogeeks\n│   │       │   │   │       └── mop_demo\n│   │       │   │   │           └── MainActivity.java\n│   │       │   │   └── io\n│   │       │   │       └── flutter\n│   │       │   │           └── plugins\n│   │       │   │               └── GeneratedPluginRegistrant.java\n│   │       │   └── res 资源文件目录\n│   │       │       ├── drawable darwable资源目录\n│   │       │       │   └── launch_background.xml\n│   │       │       ├── mipmap-hdpi 图片资源目录\n│   │       │       │   └── ic_launcher.png\n│   │       │       ├── mipmap-mdpi 图片资源目录\n│   │       │       │   └── ic_launcher.png\n│   │       │       ├── mipmap-xhdpi 图片资源目录\n│   │       │       │   └── ic_launcher.png\n│   │       │       ├── mipmap-xxhdpi 图片资源目录\n│   │       │       │   └── ic_launcher.png\n│   │       │       ├── mipmap-xxxhdpi 图片资源目录\n│   │       │       │   └── ic_launcher.png\n│   │       │       └── values\n│   │       │           └── styles.xml\n│   │       └── profile\n│   │           └── AndroidManifest.xml\n│   ├── build.gradle\n│   ├── gradle gradle版本配置目录，一般情况下无需关注\n│   │   └── wrapper\n│   │       └── gradle-wrapper.properties\n│   ├── gradle.properties\n│   ├── local.properties\n│   └── settings.gradle\n├── build\n├── doc\n│   └── mop_flutter_demo.gif\n├── ios iOS工程目录\n│   ├── Flutter Flutter-SDK目录，一般无需关注\n│   │   ├── AppFrameworkInfo.plist\n│   │   ├── Debug.xcconfig\n│   │   ├── Flutter.framework\n│   │   ├── Flutter.podspec\n│   │   ├── Generated.xcconfig\n│   │   ├── Release.xcconfig\n│   │   └── flutter_export_environment.sh\n│   ├── Podfile pod依赖配置文件\n│   ├── Runner iOS源码主目录\n│   │   ├── AppDelegate.h\n│   │   ├── AppDelegate.m\n│   │   ├── Assets.xcassets 图片资源\n│   │   │   ├── AppIcon.appiconset  图标\n│   │   │   └── LaunchImage.imageset 启动图\n│   │   ├── Base.lproj\n│   │   │   ├── LaunchScreen.storyboard\n│   │   │   └── Main.storyboard\n│   │   ├── FATFlutterViewController.h Flutter页面控制器子类\n│   │   ├── FATFlutterViewController.m Flutter页面控制器子类\n│   │   ├── GeneratedPluginRegistrant.h\n│   │   ├── GeneratedPluginRegistrant.m\n│   │   ├── Info.plist iOS工程配置文件\n│   │   └── main.m\n│   └── Runner.xcodeproj\n├── lib Flutter源码主目录\n│   ├── main.dart 首页\n│   └── wx_pay.dart 微信支付源码\n├── pubspec.lock\n├── pubspec.yaml Flutter配置文件\n└── test\n    └── widget_test.dart\n```\n\n## 📋  接口文档\n\n### 1. 初始化小程序\n   \n   在使用 SDK 提供的 API 之前必须要初始化 SDK ，初始化 SDK 的接口如下\n\n```\n  ///\n  /// initialize mop miniprogram engine.\n  /// 初始化小程序\n  /// [appkey] is required. it can be getted from api.finclip.com\n  /// [secret] is required. it can be getted from api.finclip.com\n  /// [apiServer] is optional. the mop server address. default is https://mp.finogeek.com\n  /// [apiPrefix] is optional. the mop server prefix. default is /api/v1/mop\n  ///\n  ///\n  Future\u003cMap\u003e initialize(String appkey, String secret,\n      {String apiServer, String apiPrefix})\n```\n\n使用示例：\n```\nfinal res = await Mop.instance.initialize(\n          '22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',\n          apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');\n```\n\n### 2. 打开小程序\n\n```\n  ///\n  /// open the miniprogram [appId] from the  mop server.\n  /// 打开小程序\n  /// [appId] is required.\n  /// [path] is miniprogram open path. example /pages/index/index\n  /// [query] is miniprogram query parameters. example key1=value1\u0026key2=value2\n  ///\n  ///\n  Future\u003cMap\u003e openApplet(final String appId,\n      {final String path, final String query, final int sequence})\n```\n\n### 3. 获取当前正在使用的小程序信息\n\n当前小程序信息包括的字段有 `appId`, `name`, `icon`, `description`, `version`, `thumbnail`\n\n```\n  ///\n  ///  get current using applet\n  ///  获取当前正在使用的小程序信息\n  ///  {appId,name,icon,description,version,thumbnail}\n  ///\n  ///\n  Future\u003cMap\u003cString, dynamic\u003e\u003e currentApplet()\n```\n\n### 4. 关闭当前打开的所有小程序\n\n```\n  ///\n  /// close all running applets\n  /// 关闭当前打开的所有小程序\n  ///\n  Future closeAllApplets()\n```\n\n### 5. 清除缓存的小程序\n\n清除缓存的小程序，当再次打开时，会重新下载小程序\n```\n  ///\n  /// clear applets cache\n  /// 清除缓存的小程序\n  ///\n  Future clearApplets() \n```\n\n### 6. 注册小程序事件处理\n\n当小程序内触发指定事件时，会通知到使用者，比如小程序被转发，小程序需要获取用户信息，注册处理器来做出对应的响应\n\n```\n  ///\n  /// register handler to provide custom info or behaviour\n  /// 注册小程序事件处理\n  ///\n  void registerAppletHandler(AppletHandler handler) \n```\n\n处理器的结构\n```\nabstract class AppletHandler {\n  ///\n  /// 转发小程序\n  ///\n  ///\n  ///\n  void forwardApplet(Map\u003cString, dynamic\u003e appletInfo);\n\n  ///\n  ///获取用户信息\n  ///  \"userId\"\n  ///  \"nickName\"\n  ///  \"avatarUrl\"\n  ///  \"jwt\"\n  ///  \"accessToken\"\n  ///\n  Future\u003cMap\u003cString, dynamic\u003e\u003e getUserInfo();\n\n  /// 获取自定义菜单\n  Future\u003cList\u003cCustomMenu\u003e\u003e getCustomMenus(String appId);\n\n  ///自定义菜单点击处理\n  Future onCustomMenuClick(String appId, int menuId);\n}\n```\n\n### 7. 注册扩展 API\n\n如果，我们的小程序 SDK API 不满足您的需求，您可以注册自定义的小程序API，然后就可以在小程序内调用自已定义的 API 了。\n\n```\n  ///\n  /// register extension api\n  /// 注册扩展api\n  ///\n  void registerExtensionApi(String name, ExtensionApiHandler handler)\n```\n\niOS 需要在小程序根目录创建 `FinChatConf.js` 文件，配置实例如下\n\n```\nmodule.exports = {\n  extApi:[\n    { //普通交互API\n      name: 'onCustomEvent', //扩展api名 该api必须Native方实现了\n      params: { //扩展api 的参数格式，可以只列必须的属性\n        url: ''\n      }\n    }\n  ]\n}\n```\n\n## 📘 目录结构\n\n```\n.\n├─.github\n│          \n├─.vscode\n│      \n├─android 工程Android源码   \n│      \n├─ios 工程iOS源码\n│          \n├─lib 工程Flutter源码\n│  │\n│  ├─ main.dart 程序入口，以及各初始化、调用示例\n│  │\n│  └─ wx_pay.dart 微信支付类示例\n│\n├─test 测试目录，无需关注\n│      \n└─pubspec.yaml Flutter工程配置项\n```\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-flutter-demo](https://reporoster.com/stars/finogeeks/finclip-flutter-demo)](https://github.com/finogeeks/finclip-flutter-demo/stargazers)\n\n## Forkers\n[![Forkers repo roster for @finogeeks/finclip-flutter-demo](https://reporoster.com/forks/finogeeks/finclip-flutter-demo)](https://github.com/finogeeks/finclip-flutter-demo/network/members)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinogeeks%2Ffinclip-flutter-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinogeeks%2Ffinclip-flutter-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinogeeks%2Ffinclip-flutter-demo/lists"}