TCMPP Flutter Plugin

TCMPP Flutter Plugin is a Flutter plugin to provide access for TCMPP SDK in Flutter. For details of TCMPP, see: https://www.tencentcloud.com/products/tcmpp. This quick guide shows how to setup and use TCMPP Flutter Plugin.

Add TCMPP Flutter Plugin

Add TCMPP core plugin from Pub.dev

  1. Add dependecy

    To add plugin from pub.dev, open the pubspec.yaml file located inside the app folder, and add tcmpp_flutter: ${version} under dependencies. image-20240422150143401

  2. Install dependecy

  • From the terminal: Run flutter pub get.
  • From VS Code: Click Get Packages located in right side of the action ribbon at the top of pubspec.yaml indicated by the Download icon.
  • From Android Studio/IntelliJ: Click Pub get in the action ribbon at the top of pubspec.yaml.

For details how to add Flutter plugins or packages, see Use packages & plugins

Add assets for TCMPP configuration files

Get TCMPP configuration file from your TCMPP web console

  1. Get appcation ID / bundle ID of your Android / iOS application.
  • For Android, in your Flutter project, open android > app > build.gradle, application id can be found in android > defaultConfig section.

image-20240422153054592

  • For iOS, in your Flutter project, open iOS > Runner.xcodeproj > project.pbxproj, search for PRODUCT_BUNDLE_IDENTIFIER.

image-20240422154058326

  1. Create Flutter Application on TCMPP web console.

    1. Login the Tencent Cloud Mini Program Platform Console and click 'Overview' in the left-hand navigation bar.
    2. On the Overview page, click Access Application.
    3. In the pop-up window for creating an application, fill in informations for your application.
    4. For Intergration platform section, check both iOS platfrom & Android Platform. Then fill application ID / bundle ID you got in the package name field.

    7226c27b-45c6-4e22-8936-d4ed7678cae7

    1. Click next, download Android / iOS configuration file in the new page.

    3e06ebf3-0034-4302-834d-acf91e144bf4

Add configuration file

  1. Put TCMPP configuration file someware in your flutter project.

  2. Add a file named "tcmpp-plugin-settings.json" in your project's root.

  3. Edit pubspec.yaml file and add flutter assets for files mentioned above.

  4. Specify the path to TCMPP configuration file in "tcmpp-plugin-settings.json".

SDK settings

In the tcmpp-plugin-settings.json file, you can choose to configure settings of your SDK.

For Android:

field name type function
configAssetsName string TCMPP android configuration file path
debug bool enable SDK debug

For iOS:

field name type function
configAssetsName string TCMPP iOS configuration file path
debug bool enable SDK debug
logEnable bool enable SDK log

For common:

field name type function
appName string Host app name, mainly used for copyright prompts in mini-program
appVersion string Host app version, mainly used for copyright prompts in mini-program

Platform specific

For Android platform

  1. Open android > app directory, edit build.gradle file.

  2. In android > defaultConfig section, change minSdkVersion to no less than 21.

image-20240419181348211

minSdkVersion 21
  1. In android > defaultConfig section, add packagingOptions.

image-20240419181539243

packagingOptions {
   pickFirst 'lib/arm64-v8a/libc++_shared.so'
   pickFirst 'lib/armeabi/libc++_shared.so'
   pickFirst 'lib/armeabi-v7a/libc++_shared.so'
   pickFirst 'lib/arm64-v8a/libmarsxlog.so'
   pickFirst 'lib/armeabi/libmarsxlog.so'
   pickFirst 'lib/armeabi-v7a/libmarsxlog.so'
   pickFirst 'lib/arm64-v8a/libv8jni.so'
}

For iOS platform

Add source

In the Podfile file in the iOS directory, add source:

source 'https://e.coding.net/tcmpp-work/tcmpp/tcmpp-repo.git'
source 'https://github.com/CocoaPods/Specs.git'

Execute pod install

cd to iOS directory,execute pod install:

pod install

TCMPP Flutter APIs

Usage

  1. To use TCMPP APIs, import 'package:tcmpp_flutter/tcmpp_flutter.dart'.

    image-20240419182106686

  2. Then create a TcmppFlutter object and use it to call TCMPP APIs.

    image-20240419182158294

APIs

Future<void> startMiniAppWithId(String appId, MiniStartOptions? options)

Start a mini program with given appId

  • appId: The app id of mini program
  • options: Start options of this mini program

Future<void> startMiniAppWithLink(String link, MiniStartOptions? options)

Start a mini program with given link

  • link: The uri link to start
  • options: Start options of this mini program

Future<ScanResult?> scan()

Start a new page to scan for mini program QR code and start mini program

Future<List<AppInfo>?> getRecentList()

Get a list of recent opened mini programs

Future<List<AppInfo>?> searchMiniApp(String keyword,
   {int pageIndex = 0, int pageSize = 0})

Search for online mini programs with given keyword

  • keyWord: Keyword of mini program to search
  • pageIndex: Page to return if pageSize has a none-zero value, which means paging is enabled.
  • pageSize: The max size of a page returned by server. When set to 0, paging willl be disabled.

Future<void> stopMiniApp(String appId)

Stop mini program with given app ID

  • appId: The app id of mini program.

Future<void> stopAllMiniApp()

Stop all running mini programs

Future<void> deleteMiniAppCache(String appId,
   {int appVerType = 0, String? version})

Remove all local data of mini program with given ID

  • appId: the app id of mini program
  • appVerType: type of mini program
  • version: version of mini program to remove

Future<AppInfo?> currentMiniApp()

Return information for current foreground running mini program

Classes

MiniStartOptions

class MiniStartOptions {
  /// entry path of mini program
  String? entryPath;

  /// is always update mini program when start
  bool? isForceUpdate;

  /// string param passed to mini program when start
  String? params;
}

ScanResult

class ScanResult {
  /// result string of qrcode or barcode contains
  String? result;

  /// the type of code
  String? scanType;

  /// charset of result string
  String? charset;
}

AppInfo

class AppInfo {
  /// MiniProgram id
  String appId;

  /// MiniProgram package type (release, dev, etc.). See [AppVerType]
  int appVerType;

  /// MiniProgram version
  String version;

  /// MiniProgram name
  String? name;

  /// MiniProgram icon url
  String? iconUrl;

  /// MiniProgram description
  String? appIntro;

  /// Developer of MiniProgram
  String? appDeveloper;

  /// MiniProgram release time
  int time;
}

AppVerType

/// Consts for MiniProgram package type. see[AppInfo]
class AppVerType {
  static const int online = 0;
  static const int develop = 1;
  static const int preview = 2;
  static const int experience = 3;
}

Documents

For more information about usage and APIs of TCMPP Flutter plugin, see Accessing with Flutter

Libraries

tcmpp_flutter