FinClip Flutter DEMO

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

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

----- ## 🤔 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), ), ), ), ], ), ), ), ), ); } } ``` ## 📋 接口文档 ### 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: '' } } ] } ``` ## 🔗 常用链接 以下内容是您在 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) ## ☎️ 联系我们 微信扫描下面二维码,关注官方公众号 **「凡泰极客」**,获取更多精彩内容。
微信扫描下面二维码,邀请进官方微信交流群(加好友备注:finclip 咨询),获取更多精彩内容。
## Stargazers [![Stargazers repo roster for @finogeeks/finclip-flutter-demo](https://reporoster.com/stars/finogeeks/finclip-flutter-demo)](https://github.com/finogeeks/finclip-flutter-demo/stargazers) ## Forkers [![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)