背景

本文我們將開一下腦洞，在 Flutter 工程基礎上下整合及執行小程式方案。

先看一下效果如下:

新建 Flutter 樣例工程

Flutter 的安裝

Flutter 的安裝可參考具體上主要執行以下三步即可。本文將使用 Flutter1.12.hotfix8 穩定版作為開發環境。

• 下載 FlutterSDK
• 配置 PATH 環境路徑
• flutter doctor 檢查環境

新建 Flutter 工程

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

執行以上命令後，正常將會提示以下資訊

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_flutte
  $ flutter run
Your application code is in mini_flutter/lib/main.dart.

注意！flutter 需要依賴本地安裝對應的 iOS,Android 開發工具，即需要安裝 Xcode 和 AndroidStudio。具體安裝使用方法這裡不贅述。

這裡我們用 VSCode+Xcode 作為開發組合環境，如果要正常除錯需要確保以下三個檢查專案是正常的。

[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.3.1)

Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)

VS Code: is fully installed. (version 1.42.1)

[!] Proxy Configuration: is partially installed; more components are available.

整合小程式解析引擎

這裡我們採用凡泰免費社群版的小程式解析引擎，只需要 10 行程式碼量不到即可完成小程式整合。

1. 引入小程式引擎外掛。在 pubspec.yaml 檔案中引入小程式 Flutter 外掛

mop: ^0.2.0

2.在 main.dart 檔案中增加以下小程式引擎初始化方法。 Mop.instance.initialize這裡需要用到 sdkkey 和 secret。可以直接在 免費註冊獲取。註冊使用方法可以參考 接入指引

  // 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: ');
      print(res);
    } else if (Platform.isAndroid) {
      final res = await Mop.instance.initialize(
          '22LyZEib0gLTQdU3MUauAYEY1h9s9YXzmGuSgQrin7UA', '9e05fa0015d7dbfa',
          apiServer: ');
      print(res);
    }
    if (!mounted) return;
  }

3、在主介面上增加三個按鈕來開啟小程式

  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(
                '開啟畫圖小程式',
                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(
                '開啟官方小程式',
                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(
                '我的對賬單',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    ),
  )

4、執行 Flutter 程式

• 在程式碼根目錄執行 flutter devices 檢視本機安裝的模擬器。
• 執行 flutter run --debug 執行示例，執行效果之如本文最前面所展示的圖示。

關於凡泰極客：幫助金融機構乃至任何希望擁有類似技術的其他行業機構，建立“碎片”的集散地、降低管理成本、提高研發效能，形成自己的數字化生態、與客戶和夥伴建立真正的數字化連線。