我們更推薦開(kāi)發(fā)者采用移動(dòng)原生的方式進(jìn)行App的開(kāi)發(fā)，Mendix 9 將Hybrid App標(biāo)記為Deprecated，在后續(xù)版本中會(huì)逐步移除Hybrid App這一特性，原因在于在云中構(gòu)建混合應(yīng)用程序需要使用Adobe的PhoneGap Build服務(wù)，然而，Adobe卻不再維護(hù)此服務(wù)。PhoneGap不允許您創(chuàng)建iOS 13版本，但Apple App Store要求版本為iOS 13或更高版本。所以從2020年4月30日起，使用Apple WatchGap服務(wù)構(gòu)建的混合iOS應(yīng)用程序?qū)o(wú)法在Apple的App Store中使用。

因此，目前傾向于使用Hybrid App的Mendix開(kāi)發(fā)者，可以采用本地開(kāi)發(fā)的方式，彌補(bǔ)PhoneGap編譯的問(wèn)題。

本文目錄

1. Hybrid App簡(jiǎn)介

2. 源碼模板簡(jiǎn)介

3. 本地開(kāi)發(fā)環(huán)境搭建

4. Android和iOS本地開(kāi)發(fā)與打包

4.1 Android Studio 打包應(yīng)用

4.2 MacOS XCode打包應(yīng)用

1. Hybrid App簡(jiǎn)介

Mendix提供良好的移動(dòng)端開(kāi)發(fā)平臺(tái)，支持PWA、移動(dòng)原生React Native和基于Cordova框架的Hybrid App三種技術(shù)方案。Mendix 低代碼開(kāi)發(fā)平臺(tái)在移動(dòng)端解決的主要問(wèn)題，是將開(kāi)發(fā)者從移動(dòng)端的技術(shù)細(xì)節(jié)中抽象出來(lái)，包括基礎(chǔ)框架，配置，代碼開(kāi)發(fā)和移動(dòng)應(yīng)用程序組件管理等方面。

本篇主要講解開(kāi)發(fā)者如何借助Mendix提供的Cordova Hybrid App模板和Mendix后端進(jìn)行統(tǒng)一開(kāi)發(fā)，開(kāi)發(fā)者可以輕松駕馭Web和移動(dòng)端。關(guān)于在Mendix移動(dòng)應(yīng)用中重用現(xiàn)有的域模型，邏輯和用戶界面組件，可以參考[1]。開(kāi)發(fā)者在Mendix Studio和Mendix Studio Pro中增加了Hybrid App Profile后， 實(shí)現(xiàn)了頁(yè)面和功能的可視化開(kāi)發(fā)。

Cordova Hybrid App [2]是一套成熟的Hybrid App解決方案。Mendix Hybrid App程序包，則是在Cordova基礎(chǔ)包上實(shí)現(xiàn)了Mendix后端服務(wù)的連接和相關(guān)資源的加載。在應(yīng)用架構(gòu)層面，Cordova App借助WebView和服務(wù)端的API連接到Mendix Runtime服務(wù)器以進(jìn)行加載，Runtime充當(dāng)移動(dòng)應(yīng)用程序的移動(dòng)后端即服務(wù)（mBaaS），其中通信由Mendix自動(dòng)處理。移動(dòng)應(yīng)用程序會(huì)自動(dòng)加載啟動(dòng)并后續(xù)使用該應(yīng)用程序所需的所有內(nèi)容。由于Mendix是模型驅(qū)動(dòng)的軟件，因此在對(duì)模型進(jìn)行更改時(shí)，所有的修改發(fā)生在Runtime服務(wù)器后端，開(kāi)發(fā)者無(wú)需將其再次發(fā)布到應(yīng)用商店，用戶也無(wú)需重新安裝該應(yīng)用程序。這使開(kāi)發(fā)人員可以快速輕松地測(cè)試和發(fā)布新功能。開(kāi)發(fā)者在開(kāi)發(fā)時(shí)并不需要透徹了解內(nèi)部機(jī)制，可以集中注意力開(kāi)發(fā)業(yè)務(wù)功能。

下圖顯示了Mendix Hybrid App、React Native和離線應(yīng)用等移動(dòng)應(yīng)用程序的運(yùn)行體系結(jié)構(gòu)：

開(kāi)發(fā)者可以通過(guò)兩種方式獲取Hybrid App的應(yīng)用，一是通過(guò)GitHub獲取完整模板，最大限度滿足定制開(kāi)發(fā)需求，包括頁(yè)面、樣式，甚至客戶端的邏輯；二是通過(guò)Mendix開(kāi)發(fā)者門戶，獲取在Mendix Cloud環(huán)境中預(yù)編譯好的壓縮包，開(kāi)發(fā)者可以對(duì)應(yīng)用進(jìn)行輕度定制[8]。

2. 源碼模板簡(jiǎn)介

Mendix Hybrid App提供Cordova模板源碼，可以從Mendix GitHub倉(cāng)庫(kù)進(jìn)行下載[3]。

源碼目錄如下圖，項(xiàng)目結(jié)構(gòu)包含以下主要元素：

● src /：在此處放置應(yīng)用程序的所有源代碼

? ?◇ www/：

? ? ? ?■ images：圖片目錄，比如保存登陸頁(yè)面所使用的圖片

? ? ? ?■ styles：具有樣式的CSS文件，例如登錄頁(yè)所使用的樣式

? ? ? ?■ scripts：可自定義應(yīng)用程序行為的JavaScript文件

? ? ? ?■ index.html.mustache：用于生成索引頁(yè)面的Mustache模板文件

? ?◇ resources/：圖標(biāo)和初始屏幕（splash screen）

? ?◇ config.xml.mustache：用于生成PhoneGap配置文件的模板文件

● config /：這是外部配置文件所在的位置；這些文件是可選的，將覆蓋默認(rèn)值。包含如npm install命令執(zhí)行時(shí)的一些默認(rèn)值。項(xiàng)目使用到的配置文件是：

? ?◇ environment.json：應(yīng)用程序所有可用部署環(huán)境的描述，包括應(yīng)用程序ID和連接Mendix Runtime服務(wù)的URL

? ?◇ parameters.json：會(huì)影響構(gòu)建過(guò)程和最終應(yīng)用程序某些方面的設(shè)置，例如Android / iOS支持，離線模式和pin登錄

resources.json：所有資源的描述，例如圖標(biāo)和初始屏幕（splash screen），包括它們的類型和大小

? ?◇ texts.json：應(yīng)用程序的hybrid外殼中靜態(tài)文本的翻譯（自定義文本）

● build / ：（生成目錄）包含所有中間構(gòu)建文件，例如javascript和css包。每次運(yùn)行構(gòu)建時(shí)，此文件夾的內(nèi)容都會(huì)被覆蓋

● dist / ：（生成目錄）最終的構(gòu)建包會(huì)在此文件夾生成

● webpack.config.js：構(gòu)建過(guò)程的起點(diǎn)

3. 本地開(kāi)發(fā)環(huán)境搭建

項(xiàng)目開(kāi)發(fā)之前，確保在系統(tǒng)上安裝了以下軟件（先決條件）：

1）本代碼庫(kù)的克隆或Hybrid App的customizable package，所謂customizable package可在Mendix Developer Portal的“Deployment”部分中找到。下載到程序包時(shí)，您的應(yīng)用程序的基本配置已經(jīng)完成。

2）最新版的Node.js。本代碼已經(jīng)在Nodejs 12上進(jìn)行了測(cè)試。可以通過(guò)node -v進(jìn)行版本檢查。

? ?◇ Windows：從nodejs.org安裝

? ?◇ Mac OS：使用Brew安裝Node.js：brew install node

? ?◇ Linux，BSD等：使用可用的軟件包管理器進(jìn)行安裝，例如 在Debian上：sudo apt-get install node

3）Java 8

為了在本地進(jìn)行開(kāi)發(fā)，您還需要針對(duì)目標(biāo)平臺(tái)的開(kāi)發(fā)環(huán)境：

? ?◇ Android

? ? ? ?■ 按照說(shuō)明操作Android Studio[4]

? ?◇ iOS（僅適用于Apple電腦，例如MacBook，iMac）

? ? ? ?■ 下載XCode [5]

? ? ? ?■ CocoaPods，例如 通過(guò)運(yùn)行sudo gem install cocoapods（請(qǐng)參閱鏈接以避免使用sudo進(jìn)行安裝）[6]

克隆源碼倉(cāng)庫(kù)后，進(jìn)入工作目錄，要進(jìn)行本地安裝和開(kāi)發(fā)，項(xiàng)目需使用以下安裝和編譯命令

$ npm install # 安裝依賴 $ npm run package # 生成build目錄 $ npm run platform:all # 生成iOS和Android平臺(tái) $ npm run platform:android # 生成Android平臺(tái) $ npm run platform:ios # 生成iOS平臺(tái)

通過(guò)npm run platform:all 命令生成項(xiàng)目之后，就可以開(kāi)始本地開(kāi)發(fā)的工作，并完成最終打包。

4. Android和iOS本地開(kāi)發(fā)與打包

源碼包中生成了包含兩個(gè)平臺(tái)的源代碼，均位于.\hybrid_app_template\build\platforms\目錄中（僅支持MacOS中進(jìn)行開(kāi)發(fā)）。

4.1 Android Studio 打包應(yīng)用

???

通過(guò)Android和iOS的IDE打開(kāi)項(xiàng)目后，開(kāi)發(fā)者通過(guò)Cordova框架對(duì)應(yīng)用進(jìn)行其他本地的定制開(kāi)發(fā)，如增加其他第三方Cordova插件（plugins），定制Hybrid App的首頁(yè)index.html，其過(guò)程具有高度可定制的靈活性。IDE打開(kāi)Cordova項(xiàng)目后，開(kāi)發(fā)者就可以根據(jù)自己的需求，定制移動(dòng)端前端的邏輯。

前文提到，Hybrid App通過(guò)內(nèi)在的機(jī)制和Mendix應(yīng)用的后端進(jìn)行互動(dòng)，開(kāi)發(fā)者可以通過(guò)集成在客戶端的Server API，和服務(wù)端進(jìn)行豐富的數(shù)據(jù)交互。舉個(gè)例子，客戶將App托管在某個(gè)應(yīng)用市場(chǎng)上，并希望App更新后能給用戶發(fā)送更新提醒。我們可以在客戶端為客戶開(kāi)發(fā)這個(gè)定制功能，在Hybrid

App中集成這個(gè)應(yīng)用市場(chǎng)的Cordova Plugin，調(diào)用應(yīng)用市場(chǎng)的API實(shí)現(xiàn)更新提醒。

關(guān)于Cordova插件的安裝和使用，以及應(yīng)用中的Activity的生命周期，請(qǐng)參考Android開(kāi)發(fā)和Cordova的相關(guān)文檔。

不要忘記的是，Cordova應(yīng)用的配置文件位于build/platforms/android/app/src/main/assets/www/ settings.json，只有配置正確的后端URL才能訪問(wèn)Mendix的Runtime后臺(tái)服務(wù)，確保移動(dòng)應(yīng)用能正確加載使用。

項(xiàng)目開(kāi)發(fā)完成后，通過(guò)IDE中的菜單，打包發(fā)布APK文件：

在彈出窗口中，選擇‘APK’的選項(xiàng)：

選擇適當(dāng)?shù)淖C書(shū)，并填寫證書(shū)的信息：

選擇生成調(diào)試包，或者是發(fā)行包：

等待生成過(guò)程完成后，可以在目錄下找到對(duì)應(yīng)的APK文件，開(kāi)發(fā)者可以隨后把APK發(fā)布到不同的應(yīng)用商店。

4.2 MacOS XCode打包應(yīng)用

XCode環(huán)境和Android Studio打開(kāi)類似項(xiàng)目：

同樣地，必須修改settings.json文件的后端URL地址，確保應(yīng)用正確加載后臺(tái)服務(wù)。

點(diǎn)擊項(xiàng)目的根目錄，可以對(duì)項(xiàng)目的簽名和證書(shū)進(jìn)行配置（證書(shū)管理，請(qǐng)查閱iOS開(kāi)發(fā)者相關(guān)文檔或博文[7]）：

對(duì)于簽名的管理，選擇‘Automatically manage signing’，如圖所示：

然后在XCode的菜單中，選擇使用‘Generic iOS Device’，

選擇‘Product’->‘Archive’進(jìn)行打包

該過(guò)程成功完成后，將顯示管理器（Organizer）視圖。 選擇剛剛編譯好的應(yīng)用，可以看到最新的存檔。 您始終可以通過(guò)XCode的“Windows”菜單自行打開(kāi)管理器：

選擇‘Distribute App’，可以發(fā)布到App Store，也可以通過(guò)其他方式（請(qǐng)自行查閱App Store開(kāi)發(fā)的相關(guān)文檔）。

通過(guò)Hybrid App的模板，以及本地開(kāi)發(fā)環(huán)境的搭建，Mendix可以讓熟悉移動(dòng)端特別是Cordova框架的開(kāi)發(fā)者在客戶端完成更多的第三方集成和定制化。

參考文獻(xiàn)：

[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

---

?更多信息，請(qǐng)?jiān)L問(wèn)以下鏈接：

Mendix官網(wǎng)：https://www.mendix.com/zh/

Mendix中國(guó)論壇：https://forum.mendix.tencent-cloud.com/

Mendix行業(yè)解決方案：https://solutions.mendix.com/

Mendix平臺(tái)指南：https://www.mendix.com/evaluation-guide/

Mendix動(dòng)畫(huà)展示：https://www.mendix.com/demos/

謝謝閱讀！

總結(jié)

以上是生活随笔為你收集整理的Mendix的Hybrid App本地开发最佳实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。