Sapui5 UI5引导到登录片段显示的最佳实践

问题：OpenUI5中独立应用程序的登录页面模式是什么，包括在执行UI5引导和component.js时显示占位符页面内容

我试图为我的独立UI5应用程序的登录过程提供一个令人愉悦的用户体验。我打算的事件顺序是：

用户导航到UI5 URL

UI5启动时显示令人愉悦的背景/占位符

显示登录对话框，用户输入详细信息，单击登录按钮等

我目前的问题：

我在index.html的主体中添加了一些文本，当用户导航到页面时，文本立即出现（好），但在UI5应用程序启动后，文本仍保留在页面顶部（坏）

将index.html正文留空，当UI5启动时会出现“空页”延迟（ux错误）

…我有一个作为占位符的第一个UI5视图和一个关联的登录片段，但是该片段在被视图内容隐藏（坏用户体验）之前会立即闪烁

总的来说，我认为在理解启动时生命周期事件的顺序的基础上，可能有一种登录的最佳实践模式，但到目前为止，我还没有在UI5文档中找到一个简洁的解释

有人能给我指出一个有用的方向或提供建议吗

编辑：经过更多的搜索，我找到并链接了JSBin，这在一定程度上是有用的。本质上，该技术使用纯html和脚本延迟应用程序的加载，直到加载UI5脚本，在等待时显示令人愉悦的进度微调。当“deviceready”事件发生时，脚本启动应用程序加载并删除进度指示器的html元素。其结果是UI5无闪烁启动，用户体验令人愉悦，没有工件HTML。通过在模型加载的to afterModelLoaded（）过程中放置“hide progress elements html”函数，可以扩展此技术

---

我还重新构造了事件，以便在第一页的onAfterRendering（）函数中触发登录对话框的打开-我以前在onDisplay（）函数中有此功能，该函数在路由匹配时连接到激发。这是基于其他经验，我想在打开页面时启动进一步的数据提取，但我认为在这种情况下，页面已经呈现，因此对话框闪烁不会发生或发生在屏幕外。在onAfterRendering（）中触发对话已停止本例中的对话闪烁问题。

关于当前问题：

整个UI5应用程序都存在于index.html文件中。每当您使用UI5应用程序时，实际上您一直都停留在那个唯一的HTML页面上。因此，您在HTML文件中输入的任何内容都将出现在应用程序中的任何地方。所以不要在里面放任何东西。只需使用它来引导UI5库

“空白页面”的滞后是无法避免的（更新：是的，它可以-见下文）。从服务器下载资源后，加载UI5应用程序需要额外的几秒钟。这是没有办法的；UI5是一个巨大的库，浏览器需要额外的时间来准备它。因为库本身在这段时间内正在准备，所以不能设置一种启动屏幕（例如，想想

this.getView（）.setBusy（）

）。但是，由于在延迟之后，基本上整个网站都将存在于浏览器中，因此您的网站的导航速度将快于大多数其他框架中编写的应用程序中的导航速度，在这些框架中，每次您离开某个页面时，都需要从删除服务器下载以下页面

我不知道你所说的作为占位符的视图是什么意思。我可能会把它拿走。另外，我不建议使用片段来处理登录。而是为它创建一个专用视图。这是做这件事的标准方法

重述：

用户点击URL-

图书馆负荷

第一个视图是登录视图。用户提交表格；登录视图与服务器对话（在进行此操作时，您可以将视图设置为busy，以获得愉快的用户体验）

如果用户已通过身份验证，则导航到其他视图

我希望这能让事情变得更清楚。如果你有任何问题，请告诉我

---

更新：好发现！！我没想到。是的，您当然可以让您的HTML页面在等待下载脚本时执行某些操作，然后在调用

ondevicerady

方法时，将所有内容移交给UI5应用程序。

关于您当前的问题：

整个UI5应用程序都存在于index.html文件中。每当您使用UI5应用程序时，实际上您一直都停留在那个唯一的HTML页面上。因此，您在HTML文件中输入的任何内容都将出现在应用程序中的任何地方。所以不要在里面放任何东西。只需使用它来引导UI5库

“空白页面”的滞后是无法避免的（更新：是的，它可以-见下文）。从服务器下载资源后，加载UI5应用程序需要额外的几秒钟。这是没有办法的；UI5是一个巨大的库，浏览器需要额外的时间来准备它。因为库本身在这段时间内正在准备，所以不能设置一种启动屏幕（例如，想想

this.getView（）.setBusy（）

）。但是，由于在延迟之后，基本上整个网站都将存在于浏览器中，因此您的网站的导航速度将快于大多数其他框架中编写的应用程序中的导航速度，在这些框架中，每次您离开某个页面时，都需要从删除服务器下载以下页面

我不知道你所说的作为占位符的视图是什么意思。我可能会把它拿走。另外，我不建议使用片段来处理登录。相反，创建一个