finogeeks / mop-flutter-sdk

FinClip 小程序 Flutter SDK 插件,用于在 Flutter 应用中运行小程序 / Flutter SDK for FinClip
https://finclip.com/
MIT License
94 stars 35 forks source link
finclip flutter mini-app mini-program

FinClip Flutter SDK

本项目提供在 Flutter 环境中运行小程序的能力

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

[官方网站](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 使用注意 由于 FinClip 小程序技术主要通过 SDK 向 APP 提供运行小程序的能力,您看到的本仓库中长期未更新的文件并非“年久失修”,我们始终保持在 Flutter 环境中 SDK 资源的定期更新。如果您在集成使用过程中遇到任何问题,欢迎与我们联系。 ## ⚙️ 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 { //多服务器配置 FinStoreConfig storeConfigA = FinStoreConfig( "22LyZEib0gLTQdU3MUauAfJ/xujwNfM6OvvEqQyH4igA", "703b9026be3d6bc5", "https://api.finclip.com", cryptType: "SM", ); List storeConfigs = [storeConfigA]; Config config = Config(storeConfigs); config.language = LanguageType.English; config.userId = "abc12345"; config.channel = "finclip"; config.phone = "12345678901"; config.appletDebugMode = BOOLState.BOOLStateTrue; UIConfig uiconfig = UIConfig(); uiconfig.isHideBackHome = true; final res = await Mop.instance.initSDK(config, uiConfig: uiconfig); 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), ), ), ), ], ), ), ), ), ); } } ``` ## 📋 接口文档 ### 1. 初始化小程序 在使用 SDK 提供的 API 之前必须要初始化 SDK ,初始化 SDK 的接口如下 ``` /// /// initialize FinClip SDK. /// 初始化SDK(推荐使用) /// [config] is required. sdk配置 /// [uiConfig] is optional. UI配置 Future initSDK(Config config, {UIConfig? uiConfig}) ``` 使用示例: ``` // 1.创建Config // 1.1 配置服务器1的参数 FinStoreConfig finclip_store = FinStoreConfig('22LyZEib0gLTQdU3MUauATBwgfnTCJjdr7FCnywmAEM=', 'bdfd76cae24d4313', 'https://api.finclip.com'); // 1.2 配置服务器2的参数 FinStoreConfig test_store = FinStoreConfig('sdkKey2', 'sdkSecret2', '测试服务器'); Config config = Config([finclip_store, test_store]); config.userId = '您app的用户唯一标识'; // 2.创建UIConfig UIConfig uiConfig = UIConfig(); uiConfig.isHideAddToDesktopMenu = true; uiConfig.isHideFeedbackAndComplaints = true; final res = await Mop.instance.initSDK(config, uiConfig: uiConfig); ``` ### 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: '' } } ] } ``` ## Flutter-SDK 工程源码说明 ``` . ├── CHANGELOG.md ├── LICENSE ├── README.md ├── android │   ├── build.gradle │   ├── build.gradle.tpl │   ├── gradle │   │   └── wrapper │   │   └── gradle-wrapper.properties │   ├── gradle.properties │   ├── proguard-android.txt │   ├── proguard-rules.pro │   ├── settings.gradle │   └── src // Flutter-SDK Android源文件目录 │   └── main │   ├── AndroidManifest.xml │   └── java │   └── com │   └── finogeeks │   └── mop │   ├── MopEventStream.java // │   ├── MopPlugin.java // flutter 消息的处理类 │   ├── MopPluginDelegate.java // │   ├── api │   │   ├── AbsApi.java // flutter-API的抽象类 │   │   ├── ApisManager.java // flutter-API的管理类 │   │   ├── BaseApi.java // flutter-API的基类 │   │   ├── EmptyApi.java // flutter-API的空实现 │   │   └── mop │   │   ├── AppletHandlerModule.java // 安卓代理的处理类,会转发消息至AppletHandler │   │   ├── AppletManageModule.java // 小程序相关API的实现Module(包含获取小程序信息、关闭小程序、删除小程序等) │   │   ├── AppletModule.java // 打开小程序的API实现Module(包含打开小程序的几种api) │   │   ├── BaseModule.java // 旧版本初始化SDK的API实现Module │   │   ├── ExtensionApiModule.java // 扩展API的实现Module(注册小程序自定义API、H5自定义API) │   │   ├── InitSDKModule.java // 新版初始化SDK的Module │   │   ├── SmSignModule.java // (废弃) │   │   ├── VersionModule.java // 获取SDK版本信息的Module │   │   ├── WXQrCodeModule.java //通过微信小程序二维码获取关联的FinClip 小程序信息的Module │   │   └── util // 工具类 │   │   └── InitUtils.java //初始化参数处理工具类 │   ├── constants │   │   └── Constants.java // 常量 │   ├── interfaces // 一些接口类 │   │   ├── Event.java │   │   ├── FlutterInterface.java │   │   ├── IApi.java │   │   ├── ICallback.java │   │   └── ILifecycle.java │   ├── service │   │   └── MopPluginService.java // Flutter 插件服务 │   └── utils │   ├── AppletUtils.java // 小程序操作工具类 │   └── GsonUtil.java //json 处理工具类 ├── example // 示例工程目录 │   ├── README.md │   ├── analysis_options.yaml │   ├── android // 示例工程--安卓工程 │   │   ├── app │   │   │   ├── build.gradle │   │   │   └── src │   │   │   ├── debug │   │   │   │   └── AndroidManifest.xml │   │   │   ├── main │   │   │   │   ├── AndroidManifest.xml │   │   │   │   ├── java │   │   │   │   │   └── com │   │   │   │   │   └── finogeeks │   │   │   │   │   └── mop_example │   │   │   │   │   ├── CustomLoadingPage.java //安卓自定义loading实现类 │   │   │   │   │   ├── MainActivity.java //安卓主页 │   │   │   │   │   └── MainApplication.java │   │   │   │   └── res 图片、布局等资源文件夹 │   │   │   └── profile │   │   │   └── AndroidManifest.xml │   │   ├── build.gradle │   │   ├── gradle │   │   │   └── wrapper │   │   │   └── gradle-wrapper.properties │   │   ├── gradle.properties │   │   └── settings.gradle │   ├── ios // 示例工程--iOS工程 │   │   ├── Podfile │   │   ├── Runner │   │   │   ├── AppDelegate.swift // 示例工程原生端初始化,以及插件注册 │   │   │   ├── Assets.xcassets │   │   │   ├── FlutterMethodChannelHandler.h // Flutter调用原生channel │   │   │   ├── FlutterMethodChannelHandler.m │   │   │   ├── LoadingView.h // 小程序启动页自定义UI │   │   │   ├── LoadingView.m │   │   │   └── Runner-Bridging-Header.h │   │   ├── Runner.xcodeproj │   ├── lib │   │   └── main.dart // 示例工程入口 │   ├── pubspec.yaml ├── ios // iOS源文件目录 │   ├── Assets │   ├── Classes │   │   ├── Api // flutter-sdk API的iOS实现类 │   │   │   ├── MOPAppletDelegate.h // iOS SDK代理的实现类,会转发消息至AppletHandler │   │   │   ├── MOPAppletDelegate.m // iOS SDK代理的实现类,会转发消息至AppletHandler │   │   │   ├── MOP_addWebExtentionApi.h // 注册小程序H5 自定义api的实现类 │   │   │   ├── MOP_addWebExtentionApi.m │   │   │   ├── MOP_callJS.h // 原生给小程序组件发消息的实现类 │   │   │   ├── MOP_callJS.m │   │   │   ├── MOP_changeUserId.h // 修复userId的实现类 │   │   │   ├── MOP_changeUserId.m │   │   │   ├── MOP_clearApplets.h // 清除本地所有小程序的实现类 │   │   │   ├── MOP_clearApplets.m │   │   │   ├── MOP_closeAllApplets.h // 关闭所有小程序的实现类 │   │   │   ├── MOP_closeAllApplets.m │   │   │   ├── MOP_closeApplet.h // 关闭指定小程序的实现类 │   │   │   ├── MOP_closeApplet.m │   │   │   ├── MOP_currentApplet.h // 获取当前小程序的信息的实现类 │   │   │   ├── MOP_currentApplet.m │   │   │   ├── MOP_finishRunningApplet.h // 彻底关闭小程序的实现类 │   │   │   ├── MOP_finishRunningApplet.m │   │   │   ├── MOP_initSDK.h // 新的初始化SDK实现类(推荐) │   │   │   ├── MOP_initSDK.m │   │   │   ├── MOP_initialize.h // 旧的初始化SDK实现类(不推荐) │   │   │   ├── MOP_initialize.m │   │   │   ├── MOP_openApplet.h // 旧的打开小程序实现类(不推荐) │   │   │   ├── MOP_openApplet.m │   │   │   ├── MOP_parseAppletInfoFromWXQrCode.h // 解析微信小程序二维码,得到凡泰小程序信息 │   │   │   ├── MOP_parseAppletInfoFromWXQrCode.m │   │   │   ├── MOP_qrcodeOpenApplet.h // 通过二维码链接打开小程序实现类 │   │   │   ├── MOP_qrcodeOpenApplet.m │   │   │   ├── MOP_registerAppletHandler.h // 注册代理实现类 │   │   │   ├── MOP_registerAppletHandler.m │   │   │   ├── MOP_registerExtensionApi.h // 注册小程序自定义api的实现类 │   │   │   ├── MOP_registerExtensionApi.m │   │   │   ├── MOP_removeAllUsedApplets.h // 删除本地所有小程序的实现类(小程序包、运行过程中的数据等) │   │   │   ├── MOP_removeAllUsedApplets.m │   │   │   ├── MOP_removeApplet.h // 删除指定小程序(小程序包、运行过程中的数据等) │   │   │   ├── MOP_removeApplet.m │   │   │   ├── MOP_removeUsedApplet.h // 删除指定小程序(小程序包、运行过程中的数据等) │   │   │   ├── MOP_removeUsedApplet.m │   │   │   ├── MOP_scanOpenApplet.h // 旧版二维码打开小程序。(需要解密二维码内容,废弃) │   │   │   ├── MOP_scanOpenApplet.m │   │   │   ├── MOP_sdkVersion.h // 获取SDK版本信息 │   │   │   ├── MOP_sdkVersion.m │   │   │   ├── MOP_sendCustomEvent.h // 给SDK发动全局自定义事件 │   │   │   ├── MOP_sendCustomEvent.m │   │   │   ├── MOP_showBotomSheetModel.h // 显示底部分享View │   │   │   ├── MOP_showBotomSheetModel.m │   │   │   ├── MOP_smsign.h // (废弃) │   │   │   ├── MOP_smsign.m │   │   │   ├── MOP_startApplet.h // 新的启动小程序实现类(推荐) │   │   │   ├── MOP_startApplet.m │   │   │   ├── MOP_webViewBounces.h // 设置顶层 webView的弹性效果 │   │   │   └── MOP_webViewBounces.m │   │   ├── Model │   │   │   ├── MopCustomMenuModel.h // 自定义菜单Model │   │   │   └── MopCustomMenuModel.m │   │   ├── MopPlugin.h // flutter 与 iOS原生通信桥接类 │   │   ├── MopPlugin.m │   │   └── Utils // 存放一些工具类 │   │   ├── MOPApiConverter.h // Api动态转换类(使用runtime将request动态转换为api实现类) │   │   ├── MOPApiConverter.m │   │   ├── MOPApiRequest.h // flutter-sdk传递给原生的事件和参数会封装成一个Request │   │   ├── MOPApiRequest.m │   │   ├── MOPBaseApi.h // flutter API实现类的基类 │   │   ├── MOPBaseApi.m │   │   ├── MOPTools.h // 工具类(包含颜色、截图、获取顶层控制器等) │   │   ├── MOPTools.m │   │   ├── MopShareView.h // 分享界面UI │   │   ├── MopShareView.m │   │   ├── UIView+MOPFATToast.h // Toast提示分类 │   │   └── UIView+MOPFATToast.m │   ├── mop.podspec │   └── mop.podspec.tpl //mop.podspec 模板文件 ├── lib │   ├── api.dart // flutter-sdk代理的(抽象类) │   └── mop.dart // mop 核心类(包含初始化配置型、flutter-sdk的所有api) ├── publish.sh // 发布脚本 ├── pubspec.tpl.yaml // pubspec.yaml模板文件 ├── pubspec.yaml // 配置文件 ├── tag.sh // 打tag的脚本 └── trigger.sh // 脚本 ``` ## 🔗 常用链接 以下内容是您在 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) ## ☎️ 联系我们 微信扫描下面二维码,关注官方公众号 **「凡泰极客」**,获取更多精彩内容。
微信扫描下面二维码,加入官方微信交流群,获取更多精彩内容。