https://github.com/finogeeks/finclip-flutter-demo
FinClip Flutter 运行环境，让小程序在 Flutter 应用中无缝运行 / Flutter DEMO for FinClip
https://github.com/finogeeks/finclip-flutter-demo
demo finclip flutter mini-app mini-program
Last synced: 3 months ago
JSON representation
FinClip Flutter 运行环境，让小程序在 Flutter 应用中无缝运行 / Flutter DEMO for FinClip
- Host: GitHub
- URL: https://github.com/finogeeks/finclip-flutter-demo
- Owner: finogeeks
- License: mit
- Created: 2020-02-27T09:30:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-09-29T03:31:43.000Z (9 months ago)
- Last Synced: 2025-09-29T05:32:16.402Z (9 months ago)
- Topics: demo, finclip, flutter, mini-app, mini-program
- Language: Dart
- Homepage: https://finclip.com/
- Size: 1.25 MB
- Stars: 101
- Watchers: 1
- Forks: 16
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FinClip Flutter DEMO
本项目提供在 Flutter 环境中运行小程序的示例 DEMO
[官方网站](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 ，就是有这么多不可思议！
## ⚙️ Flutter 集成
在项目 `pubspec.yaml` 文件中添加依赖
```yaml
mop: latest.version
```
## 🖥 示例
```flutter
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:mop/mop.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
void initState() {
super.initState();
init();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future init() async {
if (Platform.isiOS) {
//com.finogeeks.mopExample
final res = await Mop.instance.initialize(
'22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
print(res);
} else if (Platform.isAndroid) {
//com.finogeeks.mopexample
final res = await Mop.instance.initialize(
'22LyZEib0gLTQdU3MUauARjmmp6QmYgjGb3uHueys1oA', '98c49f97a031b555',
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
print(res);
}
if (!mounted) return;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('凡泰极客小程序 Flutter 插件'),
),
body: Center(
child: Container(
padding: EdgeInsets.only(
top: 20,
),
child: Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(
colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
stops: const [0.0, 1.0],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: FlatButton(
onPressed: () {
Mop.instance.openApplet('5e3c147a188211000141e9b1');
},
child: Text(
'打开示例小程序',
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(height: 30),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(
colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
stops: const [0.0, 1.0],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: FlatButton(
onPressed: () {
Mop.instance.openApplet('5e4d123647edd60001055df1',sequence: 1);
},
child: Text(
'打开官方小程序',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
),
);
}
}
```
## 📘 目录结构
```
.
├── LICENSE
├── README.md
├── android 安卓工程目录
│ ├── app
│ │ ├── build.gradle 应用构建配置
│ │ └── src
│ │ ├── debug
│ │ │ └── AndroidManifest.xml 应用清单文件
│ │ ├── main 应用源码主目录
│ │ │ ├── AndroidManifest.xml 应用清单文件
│ │ │ ├── java 应用源码目录
│ │ │ │ ├── com
│ │ │ │ │ └── finogeeks
│ │ │ │ │ └── mop_demo
│ │ │ │ │ └── MainActivity.java
│ │ │ │ └── io
│ │ │ │ └── flutter
│ │ │ │ └── plugins
│ │ │ │ └── GeneratedPluginRegistrant.java
│ │ │ └── res 资源文件目录
│ │ │ ├── drawable darwable资源目录
│ │ │ │ └── launch_background.xml
│ │ │ ├── mipmap-hdpi 图片资源目录
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-mdpi 图片资源目录
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xhdpi 图片资源目录
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxhdpi 图片资源目录
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxxhdpi 图片资源目录
│ │ │ │ └── ic_launcher.png
│ │ │ └── values
│ │ │ └── styles.xml
│ │ └── profile
│ │ └── AndroidManifest.xml
│ ├── build.gradle
│ ├── gradle gradle版本配置目录，一般情况下无需关注
│ │ └── wrapper
│ │ └── gradle-wrapper.properties
│ ├── gradle.properties
│ ├── local.properties
│ └── settings.gradle
├── build
├── doc
│ └── mop_flutter_demo.gif
├── ios iOS工程目录
│ ├── Flutter Flutter-SDK目录，一般无需关注
│ │ ├── AppFrameworkInfo.plist
│ │ ├── Debug.xcconfig
│ │ ├── Flutter.framework
│ │ ├── Flutter.podspec
│ │ ├── Generated.xcconfig
│ │ ├── Release.xcconfig
│ │ └── flutter_export_environment.sh
│ ├── Podfile pod依赖配置文件
│ ├── Runner iOS源码主目录
│ │ ├── AppDelegate.h
│ │ ├── AppDelegate.m
│ │ ├── Assets.xcassets 图片资源
│ │ │ ├── AppIcon.appiconset 图标
│ │ │ └── LaunchImage.imageset 启动图
│ │ ├── Base.lproj
│ │ │ ├── LaunchScreen.storyboard
│ │ │ └── Main.storyboard
│ │ ├── FATFlutterViewController.h Flutter页面控制器子类
│ │ ├── FATFlutterViewController.m Flutter页面控制器子类
│ │ ├── GeneratedPluginRegistrant.h
│ │ ├── GeneratedPluginRegistrant.m
│ │ ├── Info.plist iOS工程配置文件
│ │ └── main.m
│ └── Runner.xcodeproj
├── lib Flutter源码主目录
│ ├── main.dart 首页
│ └── wx_pay.dart 微信支付源码
├── pubspec.lock
├── pubspec.yaml Flutter配置文件
└── test
└── widget_test.dart
```
## 📋 接口文档
### 1. 初始化小程序
在使用 SDK 提供的 API 之前必须要初始化 SDK ，初始化 SDK 的接口如下
```
///
/// initialize mop miniprogram engine.
/// 初始化小程序
/// [appkey] is required. it can be getted from api.finclip.com
/// [secret] is required. it can be getted from api.finclip.com
/// [apiServer] is optional. the mop server address. default is https://mp.finogeek.com
/// [apiPrefix] is optional. the mop server prefix. default is /api/v1/mop
///
///
Future initialize(String appkey, String secret,
{String apiServer, String apiPrefix})
```
使用示例：
```
final res = await Mop.instance.initialize(
'22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',
apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
```
### 2. 打开小程序
```
///
/// open the miniprogram [appId] from the mop server.
/// 打开小程序
/// [appId] is required.
/// [path] is miniprogram open path. example /pages/index/index
/// [query] is miniprogram query parameters. example key1=value1&key2=value2
///
///
Future openApplet(final String appId,
{final String path, final String query, final int sequence})
```
### 3. 获取当前正在使用的小程序信息
当前小程序信息包括的字段有 `appId`, `name`, `icon`, `description`, `version`, `thumbnail`
```
///
/// get current using applet
/// 获取当前正在使用的小程序信息
/// {appId,name,icon,description,version,thumbnail}
///
///
Future> currentApplet()
```
### 4. 关闭当前打开的所有小程序
```
///
/// close all running applets
/// 关闭当前打开的所有小程序
///
Future closeAllApplets()
```
### 5. 清除缓存的小程序
清除缓存的小程序，当再次打开时，会重新下载小程序
```
///
/// clear applets cache
/// 清除缓存的小程序
///
Future clearApplets()
```
### 6. 注册小程序事件处理
当小程序内触发指定事件时，会通知到使用者，比如小程序被转发，小程序需要获取用户信息，注册处理器来做出对应的响应
```
///
/// register handler to provide custom info or behaviour
/// 注册小程序事件处理
///
void registerAppletHandler(AppletHandler handler)
```
处理器的结构
```
abstract class AppletHandler {
///
/// 转发小程序
///
///
///
void forwardApplet(Map appletInfo);
///
///获取用户信息
/// "userId"
/// "nickName"
/// "avatarUrl"
/// "jwt"
/// "accessToken"
///
Future> getUserInfo();
/// 获取自定义菜单
Future> getCustomMenus(String appId);
///自定义菜单点击处理
Future onCustomMenuClick(String appId, int menuId);
}
```
### 7. 注册扩展 API
如果，我们的小程序 SDK API 不满足您的需求，您可以注册自定义的小程序API，然后就可以在小程序内调用自已定义的 API 了。
```
///
/// register extension api
/// 注册扩展api
///
void registerExtensionApi(String name, ExtensionApiHandler handler)
```
iOS 需要在小程序根目录创建 `FinChatConf.js` 文件，配置实例如下
```
module.exports = {
extApi:[
{ //普通交互API
name: 'onCustomEvent', //扩展api名 该api必须Native方实现了
params: { //扩展api 的参数格式，可以只列必须的属性
url: ''
}
}
]
}
```
## 📘 目录结构
```
.
├─.github
│
├─.vscode
│
├─android 工程Android源码
│
├─ios 工程iOS源码
│
├─lib 工程Flutter源码
│ │
│ ├─ main.dart 程序入口，以及各初始化、调用示例
│ │
│ └─ wx_pay.dart 微信支付类示例
│
├─test 测试目录，无需关注
│
└─pubspec.yaml Flutter工程配置项
```
## 🔗 常用链接
以下内容是您在 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)
## ☎️ 联系我们
微信扫描下面二维码，关注官方公众号 **「凡泰极客」**，获取更多精彩内容。
微信扫描下面二维码，加入官方微信交流群，获取更多精彩内容。
## Stargazers
[](https://github.com/finogeeks/finclip-flutter-demo/stargazers)
## Forkers
[](https://github.com/finogeeks/finclip-flutter-demo/network/members)