Mixed programming of Flutter and applet

background

In this paper, we will open a brain hole to integrate and run the small program scheme on the basis of Flutter project.

First look at the effect as follows:

New Flutter sample project

Installation of Flutter

For the installation of Flutter, please refer to https://flutterchina.club/get-started/install/ Specifically, the following three steps can be carried out. This article will use the stable version of Flutter1.12.hotfix8 as the development environment.

  1. Download the FlutterSDK
  2. Configure PATH environment PATH
  3. Fluent doctor check environment

New Flutter project

flutter create --template=app --org=com.finogeeks.flutter --project-name=mini_flutter -i objc -a java ./mini_flutter

After executing the above command, the following message will be prompted normally

All done!
[✓] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.3.1)
[✓] Android Studio: is fully installed. (version 3.6)
[!] IntelliJ IDEA Ultimate Edition: is partially installed; more components are available. (version 2019.3.3)
[✓] VS Code: is fully installed. (version 1.42.1)
[!] Proxy Configuration: is partially installed; more components are available.
[✓] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd mini_flutter
  $ flutter run

Your application code is in mini_flutter/lib/main.dart.

be careful! flutter needs to install the corresponding IOS and Android development tools locally, that is, Xcode and Android studio need to be installed. The specific installation and use methods are not described here.
Here we use VSCode+Xcode as the development combination environment. If we want to debug normally, we need to make sure that the following three check items are normal.

  1. [✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.3.1)
  2. Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)
  3. VS Code: is fully installed. (version 1.42.1)
    [!] Proxy Configuration: is partially installed; more components are available.

Integrated applet parsing engine

Here we use FanTai free community version of the small program analysis engine, only 10 lines of code can complete the small program integration.

  1. Introduce the applet engine plug-in. Introduce the applet Flutter plug-in in pubspec.yaml file

    mop: ^0.2.0
  2. Add the following applet engine initialization methods to the main.dart file. Mop.instance.initialize sdkkey and secret are required here. Can be directly in https://mp.finogeeks.com Free registration. For the registration method, please refer to Access Guide

     // Platform messages are asynchronous, so we initialize in an async method.
     Future<void> init() async {
       if (Platform.isIOS) {
         final res = await Mop.instance.initialize(
             '22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UA', '9e05fa0015d7dbfa',
             apiServer: 'https://mp.finogeeks.com', apiPrefix: '/api/v1/mop');
         print(res);
       } else if (Platform.isAndroid) {
         final res = await Mop.instance.initialize(
             '22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UA', '9e05fa0015d7dbfa',
             apiServer: 'https://mp.finogeeks.com', apiPrefix: '/api/v1/mop');
         print(res);
       }
       if (!mounted) return;
     }
  3. Add three buttons to the main interface to open the applet
  Center(
    child: Container(
      padding: EdgeInsets.only(
        top: 20,
      ),
      child: Column(
        children: <Widget>[
          Container(
            width: 140,
            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',
                    path: 'pages/index/index', query: '');
              },
              child: Text(
                'Open drawing applet',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          SizedBox(height: 30),
          Container(
            width: 140,
            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');
              },
              child: Text(
                'Open official applet',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          SizedBox(height: 30),
          Container(
            width: 140,
            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('5e637a18cbfae4000170fa7a');
              },
              child: Text(
                'My statement',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    ),
  )
  1. Running the shuttle program
  • Execute fluent devices in the code root directory to view the simulator installed on this computer.
  • Execute the flitter run -- debug run example, and the run effect is as shown in the figure at the beginning of this article.

Sample code of this article: https://github.com/finogeeks/mop-flutter-demo

Contact us for more

Tags: Mobile Android xcode iOS Mac

Posted on Thu, 14 May 2020 02:06:14 -0700 by somenoise