如何使用Ionic Framework进行Web App开发？

75

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

— 西沃
source

我也很好奇我同意这应该可行（即将尝试），但是想知道为什么没有Ionic移动网站。也许是因为它仅支持webkit，而开发人员担心它不能与Android版Firefox一起使用？

— 凯尔2014年

他们的Ionic方向仅适用于即将进入App Store的混合Web应用程序。对于纯Web解决方案，有些问题无法解决。

— xivo

@xivo您已经知道这样的问题吗？我们的想法是，离子的组件在移动浏览器中看起来会相同（与“包装”模式相比）。

— the_ghost

@the_ghost我们遇到了他们的问题，因为在移动浏览器中很多情况下翻译不被支持或无法正常工作，并且Ionic经常使用并引起问题。我不知道这种情况了。

— xivo

1

看起来，较新版本的Ionic旨在与Webview容器一起使用真正的Web浏览器。“ Ionic 2致力于通过Cordova构建本机/混合应用程序，并增加了Progressive Web Apps和Electron的功能。” 来源

— giraffe.guru，2016年

29

如果您包括www / lib /的组件，则可以执行此操作-此文件夹包含ionic（ionic框架+ ionicjs）的核心，您可以从此处继续。

但是，需要特别注意的是，ionic是在angularjs的基础上构建的，特别是考虑到移动性。为了为Web应用程序开发获得更好的结果，您应该考虑使用核心angularjs（用于功能性）和bootstrap3（用于UI）。

— 奥兰
source

不幸的是，目前（2014年12月）对Bootstrap 3和AngularJS 1.3的支持并不是最佳的。Bootstrap for AngularJS至少有2个项目：Bootstrap UI不对AngularJS 1.3和AngularStrap接缝提供官方支持，因此对Angular团队的“官方”支持较少。我不知道该选择哪两个。当然，大多数Bootstrap都可以在不使用JavaScript的情况下使用，因此使用这个很棒的CSS框架将是一大收获。

— hgoebl 2014年

1

尽管没有官方支持，但是Anguar用于逻辑，而bootstrap用于设计。我在两个项目中都使用过。无需通过角度依赖注入来提供bootstrap js。将引导程序文件保存在单独的“媒体”文件夹中，然后将它们加载到base.html模板（扩展了所有模板）中一次，绝对不会出现问题。

— Orane 2014年

我使用angular-bootstrap，它非常兼容并且性能良好。angular-ui.github.io/bootstrap

— 的Sándor托特

1

对于AngularJS和bootstrap，只需使用bootstrap.css，然后使用angular

— UI-

是否可以在移动设备上保持通用的业务登录名（例如在常见的Angular服务中）和用户Ionic，但可以使用Bootstrap for web？

— ingaham '16

13

V2

Ionic现在支持PWA（Web应用程序），并且对桌面的支持还为时过早

Ionic build browser

V1

Ionic可用于常规Web开发。如果您需要的只是Web开发人员，请在这里停止。但是，如果您希望您的应用程序和Web从相同的代码库提供，请进一步阅读

第1步

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

<script>
    var is_browser = true
</script>

和

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

第2步

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

第三步

添加app.js

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

现在使用css隐藏/显示或角度隐藏/显示使用这些

— Web开发人员
source

6

尽管我不相信Ionic中除了混合Web应用程序之外对其他任何功能都没有提供任何支持，但是您可以查看Mobile Angular UI，找到与移动Web支持非常相似的替代方案。

— 用户456584
source

4

奥兰是正确的。

当您“节点app.js”时，您的应用程序将运行服务器。我们需要为该服务器提供所需的所有文件。对于Ionic Application，基本上是www文件夹。在下面的例子中，我把所有内容的WWW文件夹到我的公共文件夹。

我的根文件夹具有app.js文件和公共文件夹。这就是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'));

在公共文件夹中，我有所有的前端CSS和JS。我们在上面的代码中包含了整个文件夹公共。现在在public的index.html中，您应该使用public /包含文件，如下所示：

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

最好的是，任何人都可以随时询问有关Node.js + Ionic Framework的任何信息

— 马克基拉
source

1

根据应用程序的复杂性，绝对有可能将Ionic Framework用于常规Web应用程序！

创建应用程序时，会有一个/www包含所有HTML，JS和CSS的文件夹。那是您的Web应用程序的前端。

大多数Web应用程序都是简单的界面，它们之间仅需一点逻辑即可访问数据。在大多数情况下，您可以将该逻辑放入JS中，并让客户端处理工作量。

数据可以通过Firebase或Parse之类的后端即服务（BaaS）解决方案进行处理。我喜欢Firebase，因为它与Angular和Ionic紧密结合。

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

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

我在这里概述的解决方案将帮助您保持跨平台的一致性，这使Ionic非常出色！

— leetheguy
source

0

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

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

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

希望能帮助到你。

— 伊万
source