如何使用 Ionic 框架进行 Web 应用程序开发？答案

【问题标题】：How to use Ionic Framework for Web App Development?如何使用 Ionic 框架进行 Web 应用程序开发？
【发布时间】：2014-05-17 04:53:27
【问题描述】：

是否可以将 ionic 框架用于常规 Web 应用程序，而不是将其封装在 Cordova 中？

【问题讨论】：

我也很好奇。我同意这应该是可能的（即将尝试），但想知道为什么没有 Ionic 移动网站。可能是因为它只支持 webkit，开发者担心它不能与 Firefox for Android 一起使用？
他们的 Ionic 方向仅适用于进入 App Store 的混合 Web 应用程序。纯网络解决方案无法解决一些问题。
@xivo 你知道这些问题吗？我们的想法是 ionic 的组件在移动浏览器中看起来是一样的（与“包装”模式相比）。
@the_ghost 我们遇到了问题，因为在移动浏览器中的许多情况下，翻译不受支持或工作不正常，而 Ionic 经常使用它并导致问题。不知道是不是这种情况。
看起来新版本的 Ionic 旨在与真正的 Web 浏览器一起工作，除了 webview 容器。 “Ionic 2 专注于通过 Cordova 构建原生/混合应用程序，以及添加 Progressive Web Apps 和 Electron 的功能。” source

标签： mobile web-applications ionic-framework hybrid-mobile-app

【解决方案1】：

V2

Ionic 现在支持 PWA（网络应用）并且对桌面的支持即将到来

Ionic build browser

V1

Ionic 可用于常规 Web 开发。如果您只需要 Web 开发，请在此处停止。但是，如果您希望您的应用和网络从同一个代码库中提供服务，请进一步阅读

第 1 步

在 merges/browser/ 中创建 index.html 的副本（合并位于根级别，即 myApp）包括

<script>
    var is_browser = true
</script>

&

<body ng-app="myApp" class="platform-website">

第 2 步

从 index.html 中删除不必要的 js 文件，例如 cordova.js

第 3 步

在 app.js 中添加

var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
              && ionic.Platform.isWebView());

现在使用 css hide/show 或 angular hide/show 使用这些

【讨论】：

【解决方案2】：

我们对混合移动应用程序的选择是 ionic 框架，但是对于 Web 应用程序，前端部分不在 ionic 框架中。

例如，我们在纯 Angular 或 Kendo UI for Angular AngularJS UI 中做 web 应用程序部分。

如果同一团队可以在两个平台（移动和网络）上高效工作，效率会更高。

希望对你有帮助。

【讨论】：

【解决方案3】：

根据应用程序的复杂性，绝对可以将 Ionic 框架用于常规 Web 应用程序！

当您创建应用程序时，会出现一个 /www 文件夹，其中包含您的所有 HTML、JS 和 CSS。这是您的网络应用程序的前端。

大多数 Web 应用程序都是简单的接口，它们访问数据之间只有一点点逻辑。在大多数情况下，您可以将该逻辑放在您的 JS 中，让客户端处理工作负载。

数据可以由后端即服务 (BaaS) 解决方案处理，例如 Firebase 或 Parse。我喜欢Firebase，因为它与 Angular 和 Ionic 很好地结合在一起。

如果您需要连接到需要保密的服务，例如信用卡支付，您可以连接到 Zapier 之类的服务。

对于托管，有许多专门针对无服务器应用程序的静态应用程序托管程序。我更喜欢divshot，尽管他们似乎不再积极推出新功能。

我在这里概述的解决方案将帮助您保持跨平台的一致性，这让 Ionic 变得很棒！

【讨论】：

【解决方案4】：

奥兰是对的。

当您“node app.js”时，您的应用会运行服务器。我们需要为这个服务器提供我们想要的所有文件。 Ionic Application 基本上是 www 文件夹。在下面的示例中，我将 www 文件夹的所有内容放到了我的 public 文件夹中。

我的根文件夹有 app.js 文件和 public 文件夹。这就是 app.js 的样子：

var express = require('express');
var app = express();
var server = require('http').createServer(app);

app.get('/', function (request, response) {
    response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));

在 public 文件夹中，我拥有所有前端 css 和 js。我们在上面的代码中包含了整个文件夹 public。现在在 public 的 index.html 中，您应该包含带有 public/ 的文件，如下所示：

<script src="public/lalala.js"></script>

一切顺利，任何人，请随时询问有关 Node.js+Ionic 框架的任何问题

【讨论】：

【解决方案5】：

虽然我认为 Ionic 中除了混合 Web 应用程序之外没有太多支持，但您可以查看 Mobile Angular UI 以获得非常类似的支持移动 Web 的替代方案。

【讨论】：

【解决方案6】：

如果您包含 www/lib/ 的组件，这是可能的 - 此文件夹包含 ionic 的核心（离子框架 + angularjs），您可以从那里继续。

但重要的是要注意 ionic 是在 angularjs 之上构建的，特别是考虑到移动设备。为了获得更好的 Web 应用开发结果，您应该考虑使用 core angularjs（用于功能）和 bootstrap3（用于 UI）。

【讨论】：

不幸的是，目前对 Bootstrap 3 和 AngularJS 1.3 的支持不是最佳的（2014 年 12 月）。至少有 2 个项目包装了 AngularJS 的 Bootstrap：Bootstrap UI 没有对 AngularJS 1.3 的官方支持，AngularStrap 接缝从 Angular 团队获得的“官方”支持较少。我不知道我应该选择哪一个。当然，大多数 Bootstrap 都可以在没有 JavaScript 的情况下使用，所以使用这个很棒的 CSS 框架是一个很大的收获。
虽然没有官方支持，但是Anguar用于逻辑，bootstrap用于设计。我在几个项目中都使用过。无需通过 Angulars 依赖注入来提供引导 js。将引导文件保存在单独的“媒体”文件夹中，并在 base.html 模板（扩展所有模板）中加载一次，绝对不会有任何问题。
我使用 angular-bootstrap，它非常兼容且性能良好。 angular-ui.github.io/bootstrap
对于 AngularJS 和 bootstrap，只需使用 bootstrap.css，然后使用 angular UI - 它可以无缝运行 - 为清楚起见，请勿将 bootstrap.js 与 angular 一起使用
是否可以在移动设备上保持业务登录（如在常见的 Angular 服务中）和用户 Ionic 而 Web 上的 Bootstrap？