PhizClip Flutter DEMO

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

Home Page | Example Mini-App | Documentation | Deployment Guide
SDK Integration Guide | API List | Component List | Privacy Commitment

---

🤔 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

mop: latest.version

🖥 Example

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
• Example Mini-App
• Documentation
• SDK Integration Guide
• Structure of PhizClip
• Integration Guidelines(iOS)
• Integration Guidelines(Android)
• Integration Guidelines(Flutter)

☎️ Contact

Scan the QR code below with WeChat and follow the official public number Finogeeks for more exciting content.

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.

Stargazers

Forkers

🌏 Languages

• 简体中文
• English
• Português