<p align="center">
    <a href="https://www.finclip.com?from=github">
    <img width="auto" src="./doc/phizlogo.png">
    </a>
</p>

<p align="center"> 
    <strong>PhizClip Flutter DEMO</strong></br>
<p>

<p align="center"> 
	👉 <a href="https://www.finclip.com?from=github">https://www.phizclip.com/</a> 👈
</p>

<div align="center">

<a href="#"><img src="https://img.shields.io/badge/Developers-20,000%2B-brightgreen"></a>
<a href="#"><img src="https://img.shields.io/badge/Uploaded&nbsp;Mini&nbsp;Programs-6,000%2B-blue"></a>
<a href="#"><img src="https://img.shields.io/badge/Apps&nbsp;with&nbsp;FinClip-75%2b-yellow"></a>
<a href="#"><img src="https://img.shields.io/badge/Covered&nbsp;Users-25Million-orange"></a>


</div>

<p align="center">

<div align="center">

[Home Page](https://www.finclip.com/) | [Example Mini-App](https://www.finclip.com/#/market) | [Documentation](https://www.finclip.com/mop/document/) | [Deployment Guide](https://www.finclip.com/mop/document/introduce/quickStart/cloud-server-deployment-guide.html) <br> [SDK Integration Guide](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html) | [API List](https://www.finclip.com/mop/document/develop/api/overview.html) | [Component List](https://www.finclip.com/mop/document/develop/component/overview.html) | [Privacy Commitment](https://www.finclip.com/mop/document/operate/safety.html)

</div>

-----
## 🤔 What is PhizClip?

Have you ever **thought** that the developed WeChat Mini-App can be put in your own APP to run directly, and you only need to develop the Mini-App once, and then you can open it in different applications, isn't it incredible?

Have you ever **tried** to introduce an SDK in your own APP, and you can not only open the Mini-App in the app, but also customize the Mini-App interface and modify the Mini-App style, don't you think it is more incredible?

**This is PhizClip, with much INCREDIBLE !**

## ⚙️ Flutter integration

In the project `pubspec.yaml` add a dependency to the file

```yaml
mop: latest.version
```

## 🖥 Example

```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<MyApp> {
  @override
  void initState() {
    super.initState();
    init();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> init() async {
    if (Platform.isiOS) {
      //com.PhizClip.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.PhizClip.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('PhizClip Flutter plug-in'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.only(
              top: 20,
            ),
            child: Column(
              children: <Widget>[
                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(
                      'Open the sample applet',
                      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(
                      'Open the official applet',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

## 📘 Directory structure
```
.
├── LICENSE
├── README.md
├── android Android project directory
│   ├── app
│   │   ├── build.gradle  Application build configuration
│   │   └── src
│   │       ├── debug
│   │       │   └── AndroidManifest.xml Application manifest file
│   │       ├── main Application source directory
│   │       │   ├── AndroidManifest.xml Application manifest file
│   │       │   ├── java Application source directory
│   │       │   │   ├── com
│   │       │   │   │   └── finogeeks
│   │       │   │   │       └── mop_demo
│   │       │   │   │           └── MainActivity.java
│   │       │   │   └── io
│   │       │   │       └── flutter
│   │       │   │           └── plugins
│   │       │   │               └── GeneratedPluginRegistrant.java
│   │       │   └── res Resource file directory
│   │       │       ├── drawable darwable Resource directory
│   │       │       │   └── launch_background.xml
│   │       │       ├── mipmap-hdpi Picture resource directory
│   │       │       │   └── ic_launcher.png
│   │       │       ├── mipmap-mdpi Picture resource directory
│   │       │       │   └── ic_launcher.png
│   │       │       ├── mipmap-xhdpi Picture resource directory
│   │       │       │   └── ic_launcher.png
│   │       │       ├── mipmap-xxhdpi Picture resource directory
│   │       │       │   └── ic_launcher.png
│   │       │       ├── mipmap-xxxhdpi Picture resource directory
│   │       │       │   └── ic_launcher.png
│   │       │       └── values
│   │       │           └── styles.xml
│   │       └── profile
│   │           └── AndroidManifest.xml
│   ├── build.gradle
│   ├── gradle gradle version configuration directory, which is generally not required
│   │   └── wrapper
│   │       └── gradle-wrapper.properties
│   ├── gradle.properties
│   ├── local.properties
│   └── settings.gradle
├── build
├── doc
│   └── mop_flutter_demo.gif
├── ios iOS Project Directory
│   ├── Flutter Flutter-SDK directory, generally no concern
│   │   ├── AppFrameworkInfo.plist
│   │   ├── Debug.xcconfig
│   │   ├── Flutter.framework
│   │   ├── Flutter.podspec
│   │   ├── Generated.xcconfig
│   │   ├── Release.xcconfig
│   │   └── flutter_export_environment.sh
│   ├── Podfile pod dependency configuration file
│   ├── Runner iOS source home directory
│   │   ├── AppDelegate.h
│   │   ├── AppDelegate.m
│   │   ├── Assets.xcassets Picture resource
│   │   │   ├── AppIcon.appiconset  Icon
│   │   │   └── LaunchImage.imageset Start-up diagram
│   │   ├── Base.lproj
│   │   │   ├── LaunchScreen.storyboard
│   │   │   └── Main.storyboard
│   │   ├── FATFlutterViewController.h Flutter page controller subclass
│   │   ├── FATFlutterViewController.m Flutter page controller subclass
│   │   ├── GeneratedPluginRegistrant.h
│   │   ├── GeneratedPluginRegistrant.m
│   │   ├── Info.plist iOS project profile
│   │   └── main.m
│   └── Runner.xcodeproj
├── lib Flutter source directory
│   ├── main.dart Home page
│   └── wx_pay.dart Wechat Pay source code
├── pubspec.lock
├── pubspec.yaml Flutter profile
└── test
    └── widget_test.dart
```

## 📋  Interface document

### 1. Initialize the applet
   
   The SDK must be initialized before using the apis provided by the SDK. The interfaces for initializing the SDK are as follows

```
  ///
  /// initialize mop miniprogram engine.
  /// Initialize the applet
  /// [appkey] is required. it can be getted from api.phizclip.com
  /// [secret] is required. it can be getted from api.phizclip.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<Map> initialize(String appkey, String secret,
      {String apiServer, String apiPrefix})
```

Example of use:
```
final res = await Mop.instance.initialize(
          '22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', '1c11d7252c53e0b6',
          apiServer: 'https://api.finclip.com', apiPrefix: '/api/v1/mop');
```

### 2. Open applet

```
  ///
  /// open the miniprogram [appId] from the  mop server.
  /// Open applet
  /// [appId] is required.
  /// [path] is miniprogram open path. example /pages/index/index
  /// [query] is miniprogram query parameters. example key1=value1&key2=value2
  ///
  ///
  Future<Map> openApplet(final String appId,
      {final String path, final String query, final int sequence})
```

### 3. Gets information about the applet currently in use

The current applet information includes fields such as `appId`, `name`, `icon`, `description`, `version`, `thumbnail`

```
  ///
  ///  get current using applet
  ///  Gets information about the applet currently in use
  ///  {appId,name,icon,description,version,thumbnail}
  ///
  ///
  Future<Map<String, dynamic>> currentApplet()
```

### 4. Close all currently open applets

```
  ///
  /// close all running applets
  /// Close all currently open applets
  ///
  Future closeAllApplets()
```

### 5. A small program to clear the cache

The small program that clears the cache will be downloaded again when it is opened again
```
  ///
  /// clear applets cache
  /// A small program to clear the cache
  ///
  Future clearApplets() 
```

### 6. Register applet event handlers

When a specified event is triggered within the applet, the user is notified, such as the applet is forwarded, the applet needs to obtain user information and register the processor to make a corresponding response

```
  ///
  /// register handler to provide custom info or behaviour
  /// Register applet event handlers
  ///
  void registerAppletHandler(AppletHandler handler) 
```

Processor architecture
```
abstract class AppletHandler {
  ///
  /// Forwarding applet
  ///
  ///
  ///
  void forwardApplet(Map<String, dynamic> appletInfo);

  ///
  /// Get user information
  ///  "userId"
  ///  "nickName"
  ///  "avatarUrl"
  ///  "jwt"
  ///  "accessToken"
  ///
  Future<Map<String, dynamic>> getUserInfo();

  /// Get the custom menu
  Future<List<CustomMenu>> getCustomMenus(String appId);

  /// Custom menu click Processing
  Future onCustomMenuClick(String appId, int menuId);
}
```

### 7. Register extension API

If our small program SDK API does not meet your needs, you can register a custom small program API, and then you can call your own defined API within the small program.

```
  ///
  /// register extension api
  /// Register extension api
  ///
  void registerExtensionApi(String name, ExtensionApiHandler handler)
```

iOS needs to create the `FinChatConf.js` file in the root directory of the applet. The configuration example is as follows

```
module.exports = {
  extApi:[
    { //Common interaction API
      name: 'onCustomEvent', // Extension api name This api must be implemented by the Native party
      params: { // Extend the parameter format of the api to include only the required attributes
        url: ''
      }
    }
  ]
}
```

## 📘 Directory structure

```
.
├─.github
│          
├─.vscode
│      
├─android Project Android source code   
│      
├─ios Engineering iOS source code
│          
├─lib Project Flutter source code
│  │
│  ├─ main.dart Program entry, and each initialization, call examples
│  │
│  └─ wx_pay.dart Wechat Payment class example
│
├─test Test directory, no concern
│      
└─pubspec.yaml Flutter project configuration items
```

## 🔗 Links
The following is information on common questions and guidelines for your development and experience with PhizClip

- [Home Page](https://www.finclip.com/#/home)
- [Example Mini-App](https://www.finclip.com/#/market)
- [Documentation](https://www.finclip.com/mop/document/)
- [SDK Integration Guide](https://www.finclip.com/mop/document/introduce/quickStart/intergration-guide.html)
- [Structure of PhizClip](https://www.finclip.com/mop/document/develop/guide/structure.html)
- [Integration Guidelines(iOS)](https://www.finclip.com/mop/document/runtime-sdk/ios/ios-integrate.html)
- [Integration Guidelines(Android)](https://www.finclip.com/mop/document/runtime-sdk/android/android-integrate.html)
- [Integration Guidelines(Flutter)](https://www.finclip.com/mop/document/runtime-sdk/flutter/flutter-integrate.html)

## ☎️ Contact
Scan the QR code below with WeChat and follow the official public number **Finogeeks** for more exciting content.<br>
<img width="150px" src="https://www.finclip.com/mop/document/images/ic_qr.svg">

Scan the QR code below with WeChat and invite into the official WeChat exchange group (add friend note: **finclip consulting**) to get more exciting content.<br>
<img width="150px" src="https://finclip-homeweb-1251849568.cos.ap-guangzhou.myqcloud.com/images/ldy111.jpg">

## 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)

## 🌏 Languages
- [简体中文](./README.md)
- [English](./readme_en.md)
- [Português](./readme_pt.md)