深入小程序系列之二、Flutter 和小程序混編

背景

本文我們將開一下腦洞，在 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_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 行代碼量不到即可完成小程序集成。

引入小程序引擎插件。在 pubspec.yaml 文件中引入小程序 Flutter 插件

mop:?^0.2.0

2.在 main.dart 文件中增加以下小程序引擎初始化方法。Mop.instance.initialize這里需要用到 sdkkey 和 secret。可以直接在https://mp.finogeeks.com免費注冊獲取。注冊使用方法可以參考接入指引

//?Platform?messages?are?asynchronous,?so?we?initialize?in?an?async?method. ??Future?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、在主界面上增加三個按鈕來打開小程序

Center( ????child:?Container( ??????padding:?EdgeInsets.only( ????????top:?20, ??????), ??????child:?Column( ????????children:?[ ??????????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 運行示例，運行效果之如本文最前面所展示的圖示。

文檔中心:?Document

本文示例代碼:?https://github.com/finogeeks/mop-flutter-demo

相關文章：深入小程序系列之一:小程序核心原理及模擬

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

小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。