使用Ionic作为桌面Web应用程序

Question

使用Ionic作为桌面Web应用程序

44

Ionic是一个很棒的框架，可用于使用html5开发移动应用程序。我们希望同一个应用程序也可以在桌面浏览器上使用。是否制作单个响应式UI，并使其在桌面浏览器和移动浏览器上都能够最好地工作，然后制作应用程序，这是个好主意呢？还是我们应该分别为浏览器和移动应用程序进行不同的开发。

- Rohit Bansal

2

我认为只需要管理一个客户端应用程序，它可以简单地适应屏幕宽度，这是未来的趋势，并且可以实现更快速、更便宜的产品演进。 - coiso

6个回答

27

这个问题是在本周早些时候的ng-europe会议上提出的。Ionic团队的答案是分享您的服务和控制器，但使用不同的视图来适配桌面端。Ionic完全专注于移动端。

- Nat Wallbank

我们可以创建 /largeview 和 /shortview。根据设备宽度，如何进行重定向？ - Rohit Bansal

https://dev59.com/6mQo5IYBdhLWcg3wI8ZV - Rohit Bansal

14

有趣的是，似乎可以使用一个名为“Electron”的工具包来制作Ionic应用程序的桌面版本，这是一种类似Cordova / Phonegap的桌面等价物，如本文所述：

http://alexbergin.com/2015/streamlining-desktop-and-mobile-app-development

Electron（以前称为Atom Shell）打包了一个嵌入式Chromium Webview以生成“真正的”应用程序。这也意味着跨浏览器问题不是问题。

上述文章的作者成功地将其与Ionic应用程序配合使用。

如果您选择这条路线，则可能需要使用一些响应式技术来优化桌面上的用户体验。

我没有尝试过，因此不知道此方法的利弊，但我可以想象，在已经拥有应用程序的情况下，有时只需快速组合桌面版本。

- leo

5

我的评论变得太长了。这是为了补充和完善Jeremy Wilken的出色回答。

它不仅限制了桌面浏览器，而且在屏幕的一部分上显示移动屏幕看起来非常荒谬（是时候重新思考移动优先的含义了 :))。需要更好的API，因为流程（导航）在移动格式中的屏幕上可能会有所不同，而在PC格式中可能是相同的功能。

我同意Jeremy的观察，业务逻辑应该保持独立，并作为精细的REST API公开，例如使用基于Express.js框架的服务器与MySQL/MongoDB/Redis或任何其他商业数据存储。因此，REST API可以用于移动/ Phablet / Mini Tablet UI（使用Ionic）和桌面/笔记本电脑UI（使用Bootstrap + AngularJS）。当然，我是JS的粉丝，OP可以使用任何自己选择的语言用于服务器。

- SheshPai

“在屏幕的某个部分展示移动屏幕”- 你是在暗示某人会通过在屏幕上嵌入应用程序的手机图像来将Ionic应用程序部署为网站吗？如果不是，能否澄清一下你的意思？ - rinogo

1

我建议在移动端使用Ionic，特别是如果你正在使用Ionic2，则可以在Angular2中使用相同的代码，在桌面端进行轻微修改。

- Geoff

1

是的，我使用Angular2开发了一个Web应用程序，只对Ionic组件进行了轻微的修改，但Ionic2的核心代码是基于Angular2的。 - Geoff

1

示例服务/提供者代码类似于Angular2语法，唯一的区别在于HTML部分，在其中Ionic2具有预定义的组件代码，例如<ion list>...否则，在结构和代码方面，其他所有内容都是相似的。 - Geoff

谢谢 :) 我也会尝试使用 Electron。 - MobileEvangelist

0

该框架仅适用于移动混合应用程序，尽管它也可以作为普通的HTML应用程序运行。

- stevemao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Wilken · Accepted Answer

为了进一步阐述已经说过的内容，Ionic只为移动设备构建和测试。例如，Internet Explorer未经测试，并且无法正确处理Ionic中的许多功能。桌面浏览器与移动浏览器有不同的功能。在桌面上，使用您的应用程序的浏览器将受到严格限制。

很可能，您需要为桌面和移动设备提供两个不同的应用程序。除非您有勇气或能力告诉用户他们必须使用Chrome（或Opera）来运行您的网站，否则您需要两个单独的应用程序。虽然您仍然可以在移动网站上使用Ionic，但无法使用Cordova的完整平台集成（您将受限于浏览器提供的本机HTML API）。您可以在共享的核心中保留大部分业务逻辑，这需要创建一个共享的angular模块。我曾在一个Ionic应用程序和一个普通的Angular桌面应用程序（带有Bootstrap）的项目中做过这件事。

有许多方法可以检测访问者是来自桌面还是移动设备。我不知道是否有100％完美的方法，因为它们通常依赖于浏览器的用户代理字符串（可以伪造、更改等）。请参见http://detectmobilebrowsers.com/了解一些常见的脚本或示例，以了解如何在服务器或编程语言中实现移动设备检测。