Mendix的Hybrid App本地开发最佳实践
我們更推薦開發者采用移動原生的方式進行App的開發，Mendix 9 將Hybrid App標記為Deprecated，在后續版本中會逐步移除Hybrid App這一特性，原因在于在云中構建混合應用程序需要使用Adobe的PhoneGap Build服務，然而，Adobe卻不再維護此服務。PhoneGap不允許您創建iOS 13版本，但Apple App Store要求版本為iOS 13或更高版本。所以從2020年4月30日起，使用Apple WatchGap服務構建的混合iOS應用程序將無法在Apple的App Store中使用。
因此，目前傾向于使用Hybrid App的Mendix開發者，可以采用本地開發的方式，彌補PhoneGap編譯的問題。
本文目錄
1. Hybrid App簡介
2. 源碼模板簡介
3. 本地開發環境搭建
4. Android和iOS本地開發與打包
4.1 Android Studio 打包應用
4.2 MacOS XCode打包應用
1. Hybrid App簡介
Mendix提供良好的移動端開發平臺，支持PWA、移動原生React Native和基于Cordova框架的Hybrid App三種技術方案。Mendix 低代碼開發平臺在移動端解決的主要問題，是將開發者從移動端的技術細節中抽象出來，包括基礎框架，配置，代碼開發和移動應用程序組件管理等方面。
本篇主要講解開發者如何借助Mendix提供的Cordova Hybrid App模板和Mendix后端進行統一開發，開發者可以輕松駕馭Web和移動端。關于在Mendix移動應用中重用現有的域模型，邏輯和用戶界面組件，可以參考[1]。開發者在Mendix Studio和Mendix Studio Pro中增加了Hybrid App Profile后， 實現了頁面和功能的可視化開發。
Cordova Hybrid App [2]是一套成熟的Hybrid App解決方案。Mendix Hybrid App程序包，則是在Cordova基礎包上實現了Mendix后端服務的連接和相關資源的加載。在應用架構層面，Cordova App借助WebView和服務端的API連接到Mendix Runtime服務器以進行加載，Runtime充當移動應用程序的移動后端即服務（mBaaS），其中通信由Mendix自動處理。移動應用程序會自動加載啟動并后續使用該應用程序所需的所有內容。由于Mendix是模型驅動的軟件，因此在對模型進行更改時，所有的修改發生在Runtime服務器后端，開發者無需將其再次發布到應用商店，用戶也無需重新安裝該應用程序。這使開發人員可以快速輕松地測試和發布新功能。開發者在開發時并不需要透徹了解內部機制，可以集中注意力開發業務功能。
下圖顯示了Mendix Hybrid App、React Native和離線應用等移動應用程序的運行體系結構：
開發者可以通過兩種方式獲取Hybrid App的應用，一是通過GitHub獲取完整模板，最大限度滿足定制開發需求，包括頁面、樣式，甚至客戶端的邏輯；二是通過Mendix開發者門戶，獲取在Mendix Cloud環境中預編譯好的壓縮包，開發者可以對應用進行輕度定制[8]。
2. 源碼模板簡介
Mendix Hybrid App提供Cordova模板源碼，可以從Mendix GitHub倉庫進行下載[3]。
源碼目錄如下圖，項目結構包含以下主要元素：
● src /：在此處放置應用程序的所有源代碼
? ?◇ www/：
? ? ? ?■ images：圖片目錄，比如保存登陸頁面所使用的圖片
? ? ? ?■ styles：具有樣式的CSS文件，例如登錄頁所使用的樣式
? ? ? ?■ scripts：可自定義應用程序行為的JavaScript文件
? ? ? ?■ index.html.mustache：用于生成索引頁面的Mustache模板文件
? ?◇ resources/：圖標和初始屏幕（splash screen）
? ?◇ config.xml.mustache：用于生成PhoneGap配置文件的模板文件
● config /：這是外部配置文件所在的位置；這些文件是可選的，將覆蓋默認值。包含如npm install命令執行時的一些默認值。項目使用到的配置文件是：
? ?◇ environment.json：應用程序所有可用部署環境的描述，包括應用程序ID和連接Mendix Runtime服務的URL
? ?◇ parameters.json：會影響構建過程和最終應用程序某些方面的設置，例如Android / iOS支持，離線模式和pin登錄
resources.json：所有資源的描述，例如圖標和初始屏幕（splash screen），包括它們的類型和大小
? ?◇ texts.json：應用程序的hybrid外殼中靜態文本的翻譯（自定義文本）
● build / ：（生成目錄）包含所有中間構建文件，例如javascript和css包。每次運行構建時，此文件夾的內容都會被覆蓋
● dist / ：（生成目錄）最終的構建包會在此文件夾生成
● webpack.config.js：構建過程的起點
3. 本地開發環境搭建
項目開發之前，確保在系統上安裝了以下軟件（先決條件）：
1）本代碼庫的克隆或Hybrid App的customizable package，所謂customizable package可在Mendix Developer Portal的“Deployment”部分中找到。下載到程序包時，您的應用程序的基本配置已經完成。
2）最新版的Node.js。本代碼已經在Nodejs 12上進行了測試?？梢酝ㄟ^node -v進行版本檢查。
? ?◇ Windows：從nodejs.org安裝
? ?◇ Mac OS：使用Brew安裝Node.js：brew install node
? ?◇ Linux，BSD等：使用可用的軟件包管理器進行安裝，例如 在Debian上：sudo apt-get install node
3）Java 8
為了在本地進行開發，您還需要針對目標平臺的開發環境：
? ?◇ Android
? ? ? ?■ 按照說明操作Android Studio[4]
? ?◇ iOS（僅適用于Apple電腦，例如MacBook，iMac）
? ? ? ?■ 下載XCode [5]
? ? ? ?■ CocoaPods，例如 通過運行sudo gem install cocoapods（請參閱鏈接以避免使用sudo進行安裝）[6]
克隆源碼倉庫后，進入工作目錄，要進行本地安裝和開發，項目需使用以下安裝和編譯命令
$ npm install # 安裝依賴 $ npm run package # 生成build目錄 $ npm run platform:all # 生成iOS和Android平臺 $ npm run platform:android # 生成Android平臺 $ npm run platform:ios # 生成iOS平臺通過npm run platform:all 命令生成項目之后，就可以開始本地開發的工作，并完成最終打包。
4. Android和iOS本地開發與打包
源碼包中生成了包含兩個平臺的源代碼，均位于.\hybrid_app_template\build\platforms\目錄中（僅支持MacOS中進行開發）。
4.1 Android Studio 打包應用
???
通過Android和iOS的IDE打開項目后，開發者通過Cordova框架對應用進行其他本地的定制開發，如增加其他第三方Cordova插件（plugins），定制Hybrid App的首頁index.html，其過程具有高度可定制的靈活性。IDE打開Cordova項目后，開發者就可以根據自己的需求，定制移動端前端的邏輯。
前文提到，Hybrid App通過內在的機制和Mendix應用的后端進行互動，開發者可以通過集成在客戶端的Server API，和服務端進行豐富的數據交互。舉個例子，客戶將App托管在某個應用市場上，并希望App更新后能給用戶發送更新提醒。我們可以在客戶端為客戶開發這個定制功能，在Hybrid
App中集成這個應用市場的Cordova Plugin，調用應用市場的API實現更新提醒。
關于Cordova插件的安裝和使用，以及應用中的Activity的生命周期，請參考Android開發和Cordova的相關文檔。
不要忘記的是，Cordova應用的配置文件位于build/platforms/android/app/src/main/assets/www/ settings.json，只有配置正確的后端URL才能訪問Mendix的Runtime后臺服務，確保移動應用能正確加載使用。
項目開發完成后，通過IDE中的菜單，打包發布APK文件：
在彈出窗口中，選擇‘APK’的選項：
選擇適當的證書，并填寫證書的信息：
選擇生成調試包，或者是發行包：
等待生成過程完成后，可以在目錄下找到對應的APK文件，開發者可以隨后把APK發布到不同的應用商店。
4.2 MacOS XCode打包應用
XCode環境和Android Studio打開類似項目：
同樣地，必須修改settings.json文件的后端URL地址，確保應用正確加載后臺服務。
點擊項目的根目錄，可以對項目的簽名和證書進行配置（證書管理，請查閱iOS開發者相關文檔或博文[7]）：
對于簽名的管理，選擇‘Automatically manage signing’，如圖所示：
然后在XCode的菜單中，選擇使用‘Generic iOS Device’，
選擇‘Product’->‘Archive’進行打包
該過程成功完成后，將顯示管理器（Organizer）視圖。 選擇剛剛編譯好的應用，可以看到最新的存檔。 您始終可以通過XCode的“Windows”菜單自行打開管理器：
選擇‘Distribute App’，可以發布到App Store，也可以通過其他方式（請自行查閱App Store開發的相關文檔）。
通過Hybrid App的模板，以及本地開發環境的搭建，Mendix可以讓熟悉移動端特別是Cordova框架的開發者在客戶端完成更多的第三方集成和定制化。
參考文獻：
[1] https://docs.mendix.com/refguide9/modeling
[2] https://cordova.apache.org/
[3] https://github.com/mendix/hybrid-app-template
[4] https://developer.android.com/studio/install.html
[5] https://developer.apple.com/xcode/
[6] https://guides.cocoapods.org/using/getting-started.html
[7] https://zhuanlan.zhihu.com/p/69162456
[8] https://docs.mendix.com/refguide8/customizing-hybrid-mobile-apps
?更多信息，請訪問以下鏈接：
Mendix官網：https://www.mendix.com/zh/
Mendix中國論壇：https://forum.mendix.tencent-cloud.com/
Mendix行業解決方案：https://solutions.mendix.com/
Mendix平臺指南：https://www.mendix.com/evaluation-guide/
Mendix動畫展示：https://www.mendix.com/demos/
謝謝閱讀！
總結
以上是生活随笔為你收集整理的Mendix的Hybrid App本地开发最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 性能测试 简介,andr
- 下一篇： 从零开始开发HybridApp