开发信息亭网络应用程序的10个提示

我以为我会从开发信息亭网络应用程序的经验中记下一些提示。快速查看可能很有用，请确保您的下一个售货亭Web应用程序尚未忽略任何内容。他们在这里。

1。禁用文本选择

某些信息亭的行为方式是在拖动手指时仍可以选择文本，这也取决于您使用的浏览器/软件用于显示该应用程序。

<span>/* disable text selection */
</span>    <span>-webkit-touch-callout: none;
</span>    <span>-webkit-user-select: none;
</span>    <span>-khtml-user-select: none;
</span>    <span>-moz-user-select: moz-none;
</span>    <span>-ms-user-select: none;
</span>    user<span>-select: none;</span>

2。模拟触摸设备。

在开发使用Chrome Dev工具时，可以模拟您的点击事件和触摸/滑动。

3。强制浏览器缓存刷新

信息亭网络应用程序可能正在运行缓存的媒体，并迫使它们运行最新的代码，您可能需要将变量附加到静态媒体上，以迫使浏览器刷新JS/CSS。您可以将动态变量预定到静态媒体或使用PHP，例如index.php，您可以做这样的事情：

<span>    <span>//currently changes daily at middnight
</span>    $forceNum <span>= '5'; //increment this number to force browser to refresh static media cache(js/css).
</span>    $cacheKey <span>= '?'.strtotime(date('Y-m-d')).$forceNum;
</span><span>?>
</span><span><link href="css/styles.css<?php%20echo%20%24cacheKey;%20?/>" rel="stylesheet">
</span><span><script src="js/main.js<?php%20echo%20%24cacheKey;%20?>"></script></span></span>

4。在售货亭模式

中使用Google Chrome Chrome可以从开箱即用的信息亭模式开始。非常适合测试。请按照以下说明了解如何做 - > Chrome Kiosk模式设置。

5。带有触摸支持的引导程序

如果您从头开始就不会重新发明轮子！请查看Gumby 2 Bootstrap，该引导程序可以开箱即用，并提供可自定义的Bootstrap UI，以轻松获取Web应用程序以您想要的方式查找。 Backbone.js提供了模板的即时视图切换和管理和视图之间的数据。

6。防止重复的滑动脚本调用

当用户刷屏幕时，它可能会发射多个事件，只能发射一次。因此，要保持应用程序的运行顺利，请使用debounce脚本。

7。预加载您的Web应用程序图像

这是有关如何设置Web应用程序图像预加载的教程。这可以极大地加快应用程序的使用并防止较大图像的规模加载。
查看代码/功能后，我将进行更多更新。 - 一如既往地随意分享您的提示，我会添加它们。

经常询问有关开发信息亭Web应用程序的问题（常见问题解答）

开发售货亭Web应用程序时的主要考虑因素是什么？

在开发售货亭Web应用程序时，需要牢记几个关键注意事项。首先，您需要确保应用程序对用户友好和直观。这意味着用户界面应该简单易于导航。其次，该应用程序应设计为以全屏模式运行，而没有任何浏览器控件可见。这是为了防止用户从应用程序中导航。第三，由于大多数信息亭都使用触摸屏，因此应设计应用程序来处理触摸输入。最后，该应用程序应该是强大的，并且能够优雅地处理错误，以防止服务中的任何干扰。>

>如何使我的售货亭Web应用程序以全屏模式运行？

使您的售货亭Web应用程序以全屏模式运行，您可以使用HTML5 FullScreen API。此API允许您通过编程方式输入和退出全屏模式，并检测浏览器何时处于全屏模式。但是，请记住，所有浏览器都不支持全屏API，因此您可能需要为不支持它的浏览器提供一个后备。 处理触摸输入。此API提供了一组您可以在应用程序中收听的事件，例如触摸start，touchMove和TouchEnd。通过聆听这些事件，您可以以适合触摸屏的方式响应用户输入。

>

>如何使我的售货亭Web应用程序可靠且抗错？您的售货亭Web应用程序鲁棒和抗错误的应用程序涉及良好的设计实践和彻底测试的结合。在设计方面，您应该旨在使应用程序尽可能简单，以减少错误的可能性。在测试方面，您应该在各种条件下测试您的应用程序，以确保它可以优雅地处理意外情况。

我可以使用任何Web开发框架来构建售货亭Web应用程序吗？ 🎜>是的，您可以使用任何Web开发框架来构建信息亭网络应用程序。但是，某些框架可能比其他框架更适合此任务。例如，支持单页应用程序（SPA）的框架对于售货亭Web应用程序可能是一个不错的选择，因为它们允许无缝的用户体验而无需任何页面重新加载。

我如何防止用户逐渐消失。从我的售货亭Web应用程序中？

>防止用户从信息亭网络应用程序导航的一种方法是隐藏浏览器控件。如前所述，可以使用HTML5全屏API完成。另一种方法是禁用右键单击上下文菜单，可以使用JavaScript进行。

在开发Kiosk Web应用程序时有哪些常见挑战？

>在开发KIOSK Web应用程序时面临一些共同的挑战包括处理触摸输入，在全屏模式下运行，防止用户从应用程序中导航，并确保应用程序稳健且具有抗错性。这些挑战可以通过仔细的设计和彻底的测试来解决。

>如何测试我的售货亭Web应用程序？

>测试售货亭Web应用程序可以通过多种方式完成。一种常见的方法是使用单元测试，集成测试和端到端测试的组合。单位测试可用于测试应用程序的各个组件，集成测试可用于测试这些组件如何一起工作，并且可以使用端到端测试来整体测试应用程序。我可以使用内容管理系统（CMS）构建信息亭网络应用程序吗？ CMS可以提供​​用于管理应用程序内容的用户友好界面，以及可以帮助开发过程的各种工具和插件。

>

>如何优化售货亭Web的性能应用程序？

优化信息信息亭网络应用程序的性能可能涉及多种技术，例如缩小JavaScript和CSS文件，优化图像并使用内容交付网络（CDN）服务您的静态文件。此外，您应旨在使应用程序尽可能轻巧，以确保其快速加载并顺利运行。

以上是开发信息亭网络应用程序的10个提示的详细内容。更多信息请关注PHP中文网其他相关文章！