使用网络移动框架?

时间:2013-01-04 22:28:51

标签: javascript cordova jquery-mobile sencha-touch titanium

我目前正在开发一款新的专业版,以实现移动应用。客户没有决定,我建议几个解决方案。 需要与Android(版本2.2+)的兼容性,iOS和其他操作系统可能会很好。我们只能为Android开发,但我想使用网络移动框架。

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

我找到了以下可能性:

  • PhoneGap + Sencha Touch
  • PhoneGap + jQuery Mobile(或同等版本)
  • Sencha Touch(API + UI)

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

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

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

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

感谢您的帮助

5 个答案:

答案 0 :(得分:39)

简介

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

PhoneGap / Cordova + jQuery Mobile(低难度)

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

Here's一个相当新的PhoneGap + jQuery Mobile教程。如果您想查看该文章的MAcOS版本,请查看 here

如果你想找到关于jQuery和jQuery Mobile之间差异的更好信息来源,请查看 HERE

PhoneGap / Cordova + Sencha Touch(中/难度难度)

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

如果您想了解更多内容,请查看讨论jQuery Mobile和Sencha Touch之间差异的 ARTICLE

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包装器。当然,这个框架的一些不好的方面就像可怕的文档(至少在写这篇文章的时候)。如果您想了解有关此框架的更多信息,请查看 ARTICLE

Kendo UI(低难度)

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

查找更多信息 here

PhoneJS(低难度)

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

查找更多信息 here

了解 HERE

荣誉提名

去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移动框架。我的评论可以在 here here 找到。

答案 1 :(得分: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();

答案 2 :(得分:1)

请参阅此深入审核和比较5个最佳移动Web应用程序框架:

答案 3 :(得分:1)

忽略JQM,它会给您的应用程序增加太多开销。我建议改为Ionic。 PhoneGap / Cordova + Angularjs(可选)+ Ionic将让你走得很远。

答案 4 :(得分:1)

我会说 Ionic - http://ionicframework.com

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

这是一个痴迷于性能和本土的框架,具有强大的CLI。

它允许你开发

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