在 Mendix 响应式设计中构建 Web 应用程序 | Mendix 评估指南

Skip navigation

Web Apps

Mendix Web 应用程序是如何工作的?

正如在前端中的 Mendix 如何支持多渠道应用程序?中讨论的,PWA 是 Mendix 应用程序的一种可选渠道。Mendix 客户端负责呈现 Web 应用程序,这些 Web 应用程序基于 JavaScript、HTML5 和 CSS3 的丰富的单页应用程序 (SPA)。

通过使用 Mendix Studio 和 Mendix Studio Pro 中的 WYSIWYG 页面编辑器,用户能够对可在本地运行或直接从 Mendix Studio 和 Mendix Studio Pro 部署的页面和交互进行建模。在本地运行时,更改将直接可见。这是通过我们的即时更新功能实现的。这一功能可在保持当前状态的同时立即重新加载 UI,从而使测试和预览应用程序变得简单。

将应用程序部署到云上时,静态资源(HTML、CSS、JavaScript)将部署在前端服务器上,前端服务器可缓存资源并高效地服务于资源。index.html 页面作为主要的入口可以加载 Mendix 客户端、呈现页面并开始处理事件。如果需要身份验证,那么最终用户将被重新定向到登录页面或身份提供商。Mendix 通过应用缓存清除机制来确保在部署新版本时不会出现缓存问题。

Mendix JavaScript 客户端呈现 UI、在浏览器中处理操作并藉由 HTTPS 通过 API 与 Mendix Runtime 进行通信。这一丰富的客户端无需调用服务器即可执行许多操作,从而最大程度地减少了(成本昂贵的)服务器往返次数。结合我们的客户端功能以及 Mendix 应用程序在遵循访问功能准则的同时可以支持浏览器的后退/前进功能这一事实,您可以高效地为具有优异性能的 Web 应用程序建模。

Mendix 如何支持不同的屏幕尺寸和设备?

Mendix 页面默认情况下是响应式的,会自动调整屏幕大小。这样以来,Web 应用程序无论在台式机还是手机的各种尺寸的屏幕上都能完美适用。为了获得最佳的用户体验,可以为手机和平板电脑定义单独的移动网络渠道。也可以在其他场景的逻辑中使用设备类型(例如电话、平板电脑或台式机)。

Mendix 为每台设备提供了几种常见的模式和最佳实践,来帮助您构建良好的用户体验。您还可以使用自定义变体扩展这些模式,如用户界面设计中所述

如何扩展我的 Web 应用程序?

可完全根据您的需求自定义 index.html 和登录页面。也可以添加其他资源,例如样式和图像,或提供 Web App Manifest

Mendix 提供了多种扩展 Web 应用程序的选项。这些内容将在前端如何扩展 Mendix 前端?用户界面设计如何自定义应用程序的外观?中进行讨论。

如何测试我的 Web 应用程序?

Mendix 提供了一个集成的应用程序测试套件 (ATS),以便(非技术性)用户可以使用已记录的测试脚本在多个浏览器和多个设备上测试 Web 应用程序。

也可以使用标准的测试工具,例如 Selenium。由于 Mendix 小组件在文档对象模型 (DOM) 中具有唯一的标识符,因此测试工具可以轻松利用这些 ID 来创建可读且稳定的测试脚本。