背景
本文我們將開一下腦洞,在 Flutter 工程基礎上下集成及運行小程序方案。
先看一下效果如下:
新建 Flutter 樣例工程
Flutter 的安裝
Flutter 的安裝可參考https://flutterchina.club/get-started/install/具體上主要執行以下三步即可。本文將使用 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_flutter
執行以上命令後,正常將會提示以下信息
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.
注意!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 行代碼量不到即可完成小程序集成。
-
引入小程序引擎插件。在 pubspec.yaml 文件中引入小程序 Flutter 插件
mop: ^0.2.0
-
在 main.dart 文件中增加以下小程序引擎初始化方法。 Mop.instance.initialize 這裏需要用到 sdkkey 和 secret。可以直接在https://mp.finogeeks.com免費註冊獲取。註冊使用方法可以參考接入指引
// 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; }
- 在主界面上增加三個按鈕來打開小程序
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),
),
),
),
],
),
),
)
- 運行 Flutter 程序
- 在代碼根目錄執行 flutter devices 查看本機安裝的模擬器。
- 執行 flutter run --debug 運行示例,運行效果之如本文最前面所展示的圖示。
本文示例代碼: https://github.com/finogeeks/mop-flutter-demo