使用网络移动框架？

Question

我目前正在开发一个新的项目来实现移动应用程序。 客户没有决定，我建议几个解决方案。 需要与Android（版本2.2+）的兼容性，iOS和其他操作系统可能会很好。 我们只能为Android开发，但我想使用Web移动框架。

由于我从未使用它们，我开始寻找现有的解决方案。 我听说过PhoneGap，Titanium，Sencha Touch和jQuery Mobile。

以下是我发现的可能性：

• PhoneGap + Sencha Touch
• PhoneGap + jQuery Mobile（或同等产品）
• Sencha Touch（API + UI）
• 钛

应用程序中的关键点是允许用户拍摄照片并对其进行编辑：调整大小，添加一些文本......在Android上，技术上可行，但我不知道使用的是移动框架。

以PhoneGap和jQuery Mobile为例，它可以做到吗？ 我找到了每个功能的部分代码，但没有一个非常完整，并且不确定它是否会在很多手机上兼容。 对于开发时间，或许更好的做2个本地应用程序而不是尝试使用移动框架（并在Javascript中开发图片版本）？

我发现每个框架都有很多意见，但其中有一些是在一年多的时间内发布的，而且他们很难对所有解决方案有清晰的认识。

所以我想知道我是否可以用这些解决方案之一实现这个图片版本，这可能是最好的。

谢谢您的帮助

Answer 1

介绍

从技术上讲，它可以使用你所有的可能性来完成，我会按照从低到难的难度对它们进行排名，我甚至会有更多的可能性。 另外，我为我的博客写了更广泛的文章 。

PhoneGap / Cordova + jQuery Mobile（低难度）

Phonegap就是你所需要的，jQuery Mobile仅适用于UI。 这个组合仍然很容易一起实现，并且有很多工作示例。 Phonegap是HTML5 / JS / CSS的包装器，它可以让您访问手机功能主义者。 Phonegap将用于拍照，jQM将用于修改。

这是一个相当新的PhoneGap + jQuery Mobile教程。 如果您想查看该文章的MAcOS版本，请查看此处 。

看看这里，如果你想找到关于jQuery和jQuery Mobile之间差异的很好的信息来源。

PhoneGap / Cordova + Sencha Touch（中/难度难度）

与jQM不同，Sencha Touch要学习更难（或者更难，取决于你的javascript知识），特别是如果你没有javascript的良好背景知识或没有Sencha Touch设计工具的许可。 只有在你有足够的时间学习新东西时才走这条路。 Sencha Touch版本2有自己的app包装器，因此不再需要Phonegap。

如果你想了解更多，请看一下讨论jQuery Mobile和Sencha Touch之间差异的文章 。

Titanium Appcelerator（中等难度）

与前两个选项不同，Titanium的工作方式略有不同。 在jQM和Sencha用于创建混合移动应用程序的地方，Titanium appcelerator用于从javascript代码创建本机应用程序。 不难掌握，js代码很坦率。 虽然快速开发工具很难正确地设计您的原生应用程序（从头开始构建原始应用程序时更容易）。

Inter App Framework / ex jqMoby（低难度）

这个框架几乎与jQuery Mobile一样古老，现在它归英特尔所有。 像Sencha Touch这个框架的主要目标是混合移动应用程序开发，它的工作非常好。 它针对Android和iOS进行了优化，因此希望jQuery Mobile能够更快地执行，也就像Sencha Touch这样的框架拥有自己的原生app包装器。 当然，这个框架的一些不好的方面就像可怕的文档（至少在写这篇文章的时候）。 如果您想了解有关此框架的更多信息，请查看此文章 。

剑道UI（低难度）

jQuery Mobile的完美替代品。 以任何方式更好，更快。 只有一个问题，它是一种商业产品。 这将花费你cca 200美元。

在此处查找更多信息。

PhoneJS（低难度）

jQuery Mobile和Kendo UI的另一个很好的替代品。 比jQuery Mobile快得多，就像Kendo UI一样。 它有一个很棒的文档，是我今天所做的最好的文档之一。

在此处查找更多信息。

在这里阅读它。

荣誉奖

去Rhomobile。 与Phonegap / Cordova类似但使用较少。

从开发时间的角度来看，创建混合应用程序然后是本地应用程序更快。 在您的情况下，如果您有一个Java / Objective C知识棒与本机应用程序。 无论你沉入混合应用程序多少时间，它都会很好或者足够快。

编辑：

这是一个Phonegap + jQuery Mobile示例： http ：//therockncoder.blogspot.com/2012/07/jquery-mobile-phonegap-and-camera.html，在那里你会找到一个用于Android和iOS实现的github链接。

如果您从未使用过jQuery，那么坚持使用Dawson Toth Titanium示例。 但如果可能的话坚持使用jQuery Mobile。

更新1

您可能还对开源PropertyCross项目感兴趣，该项目演示了使用一系列跨平台框架（包括Sencha，jQM和PhoneGap）实现的相同应用程序。

更新2

我花了几周时间回顾其他HTML5移动框架。 我的评论可以在这里和这里找到。

Answer 2

是的，您可以在Titanium中执行此操作。 一个简单的实现在下面，在5分钟内起草和测试。

为了让您了解它的外观，请参阅以下内容。 然后看看Pedro Enrique的TiDraggable，如果你想增强它，让用户相对于彼此拖动文本或图像： https ： //github.com/pec1985/TiDraggable

// This app consists of two visual parts: a canvas where the user does stuff,
// and a save button in the bottom right.
var win = Ti.UI.createWindow({
    backgroundColor: 'black'
});

// First, the canvas.
var canvas = Ti.UI.createView({
    bottom: 50,
    backgroundColor: 'white'
});
// It has a scroll view so the user can...
var scroll = Ti.UI.createScrollView({
    // ... zoom content in or out.
    maxZoomScale: 2, minZoomScale: 0.1,
    // .. and freely position the image.
    contentWidth: 1000, contentHeight: 1000
});
// Add the image to the middle of the scroll view.
scroll.add(Ti.UI.createImageView({
    image: 'http://appc.me/Content/kitten.jpg',
    width: 750, height: 426,
    hires: true
}));
canvas.add(scroll);
// Add some text.
canvas.add(Ti.UI.createLabel({
    text: 'Kittens are the best.', textAlign: 'center',
    font: { fontSize: 28 },
    color: '#000',
    bottom: 20
}));
// Add the canvas to the win.
win.add(canvas);

// Second, create the "save" button.
var save = Ti.UI.createButton({
    title: 'Save to Gallery',
    height: 30, width: Ti.UI.SIZE,
    bottom: 10, right: 10
});
save.addEventListener('click', function (evt) {
    // Turn our "canvas" view (and its children) in to an image,
    // and save it to the gallery.
    Ti.Media.saveToPhotoGallery(canvas.toImage(), {
        success: function () {
            alert('Saved!');
        },
        error: function () {
            alert('Oh no...');
        }
    });
});
// Add it to the win.
win.add(save);

win.open();

Answer 3

查看5个最佳移动Web应用程序框架的深入审查和比较：

• Sencha Touch
• jQuery Mobile + Backbone
• Kendo UI Mobile
• AngularJS + Ionic
• 应对

Answer 4

忽略JQM，它会给您的应用程序增加太多开销。 我会推荐Ionic 。 PhoneGap / Cordova + Angularjs（可选）+ Ionic将让你走得更远。

Answer 5

我会说与Ionic一起去 - http://ionicframework.com

Ionic提供了一个移动优化的HTML，CSS和JS CSS组件库，手势和用于构建高度交互式应用程序的工具。 使用Sass构建并针对AngularJS进行了优化。

这是一个性能痴迷和本土焦点框架与强大的CLI。

它可以让你发展

1. iOS版
2. Android的
3. Windows Phone / Universal
4. 移动网络