Ionic框架与nw.js的集成 [英] Integration of Ionic framework and nw.js

问题描述

我将为可移植性(Mac和Windows)构建一个nw.js(节点Webkit)应用程序.由于我希望该应用程序稍后在移动设备(iOS和Android)上运行，因此我使用了Ionic框架.正如爱奥尼亚人建议的 一样，最好保留两组视图，一组用于Ionic(移动)，另一组用于nw. js(桌面).希望我可以在控制器和工厂中共享代码.

I am going to build a nw.js (node webkit) app for portability (Mac and Windows). As I'd like the app to run on mobile devices (iOS and Android) later, I use Ionic framework. As suggested by Ionic folks, it's better to keep two sets of views, one for Ionic (mobile) and one for nw.js (desktop). Hopefully I can share codes in the controller and factory.

所以，这就是我的工作:

So, here is what I do:

1)创建一个离子骨架项目:

1) Create a Ionic skeleton project:

ionic start --appname Hello Hello sidemenu
cd Hello
ionic serve 
...
quit

2)为nw.js创建入口点html并设置清单:

2) Create an entry point html for nw.js and setup the manifest:

cd www
cp index.html app.html

并在app.html中删除以下特定于cordova的行:

and remove the following cordova-specific lines in app.html:

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

然后创建一个package.json:

    {
      "name": "hello",
      "version": "1.0.0",
      "description": "Hello World",
      "main": "app.html",
      "window": {
        "title": "Hello",
        "toolbar": true,
        "frame": false,
        "width": 800,
        "height": 600,
        "position": "mouse",
        "min_width": 400,
        "min_height": 200,
        "max_width": 800,
        "max_height": 600
      },
      "webkit": {
        "plugin": true
      },
      "author": "Horace Ho"
    }

并在节点Webkit中运行该应用程序:

and run the app in node webkit:

nw .

基本上，我在Ionic骨架项目的www文件夹中创建了app.html和package.json.现在，我有一个包含离子框架和角度框架的nw.js骨架项目.

Basically I created app.html and package.json in the www folder of an Ionic skeleton project. Now I have a nw.js skeleton project with both Ionic and angular frameworks.

我的问题是，以上说法有意义吗?只要有两个入口点(用于Ionic的index.html，用于nw.js的app.html)，在Ionic的www文件夹中添加无关的html/css/js是否安全? ?为了进一步扩展，我可以将Bootstrap替换为Ionic，而仅将AngularJS代码(控制器和工厂)保留在移动应用程序和台式机应用程序之间共享.

My question is, does the above make sense? As long as there are two entry points (index.html for Ionic, app.html for nw.js), is it safe to add unrelated html/css/js within the www folder of Ionic? To further extend, I may replace Ionic by Bootstrap and leave only AngularJS codes (controller and factory) to be shared between the mobile and desktop apps.

推荐答案

Ionic显然是以移动设备为中心的，因此您必须在桌面UI上至少进行一些权衡.有两个入口点将清楚地解决这个问题，并且为两个都有单独的html/css/js是安全的(尽管效率不高).但是，我建议至少为css/js标识尽可能多的通用代码，并将其用于两者.如果可能，请尝试使用 sass/scss 而不是纯CSS.

Ionic is clearly mobile centric, so you would have to make at least some trade-offs on your desktop UI. Having two entry points will clearly solve this, and it will be safe (albeit not efficient) to have two separate html/css/js for both. However, I'd suggest to identify as much common code as possible at least for css/js and use it for both. Try to use sass/scss instead of plain css if possible.

如果您要在台式机和移动设备上使用单个UI，建议您查看角度材料.我目前正在使用它开发一个桌面/平板电脑应用程序，该应用程序效果很好，但是显然角材料显然是可移动的，或者至少非常适合移动.与Bootstrap(我认为它首先是台式机)相比，这使它成为移动设备上更好的选择.

If you want to have a single UI for both desktop and mobile, I'd suggest to have a look at angular material. I am currently developing a desktop/tablet app with it, for which it works very well, but angular material is clearly mobile first or at least very suitable for mobile. This makes it imho a better choice for mobile than Bootstrap, which I regard as desktop first.

这篇关于Ionic框架与nw.js的集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！