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/

谢谢阅读！