在科多瓦开发网站应用程序的正确方法是什么？

Question

我正在尝试做一些简单的网站应用程序，用于，显示我的网站和，向其添加一些特定的功能。

我的想法是在上做一些类似Facebook应用的手机应用。简单地说，我需要显示一个网站和替换文件输入-用户应该能够从相机捕捉图片或从图库(多重选择)中选择图片，并将其附加到post。

TL;DR;

检查底部的图像。

我尝试过的：

使用InnAppBrowser Cordova与摄像机和图像选择器插件并显示网页

用相机拍照，然后从画廊取回照片，然后上传到服务器上--这方面有很多例子。

我发现了什么麻烦：

InnAppBrowser是强制的全屏，所以我不能调整它的大小，并放置一些按钮来选择图片，在它下面，。

我需要什么：

我只需要以某种方式将图像(从图片库或照相机)附加到表单文件输入，或者将它们上传到某种api中-- api将在服务器上处理图像并返回一些in，我可以使用这些in来代替页面表单中的文件输入将图像附加到post。一些隐藏的输入，我只是将上传的图像的ID插入到文章中(我会在PHP脚本中写入一些条件)。

我需要我的应用程序是multi-platform (安卓，IOS，WP)，所以这就是我使用Apache的原因。我已经尝试了很多解决方案，我已经搜索了5个小时。但我没能找到有用的东西。

有人有这样的经验吗？有人申请过那种东西吗？

如果你能提出任何解决方案(科多瓦并不重要，但它必须是多平台的)，我会很高兴的！

耽误您时间，实在对不起!

图像

有桌面版本的屏幕，有正常的文件输入：

​

我的移动应用程序版本有摄像头和图像选择器选项，就在web浏览器下：

​

Answer 1

我想我还不清楚。技术上的答案是Cordova/Phonegap不适合创建网站应用程序。这意味着在技术上没有“正确的方法”来做你要求的事情。

• 对于网站应用程序，所有页面都是从网站呈现出来的，并由网页/网页浏览器控制。
• 对于移动应用程序，应用程序可以直接控制的所有页面都呈现在移动设备上。但是，可以从服务器或移动应用程序呈现(和/或创建)页面，但是页面的控制将保留在呈现(或创建)页面的一侧。可以移动的两边之间有一条清晰的线，但这将给程序员带来*危险。(这里没有聪明的地方，只是增加了安全问题。)

然而，Cordova和Phonegap确实有plugins.The的全部目的是使用插件来简化某些任务。然而，电话和网站之间有一条清晰的界线。在最后这一部分，这意味着所有的“插件服务”电话(加速度计，联系人列表等)。直接提供给应用程序，而不是网站。然而，一些“服务”也是，也可以作为HTML5 API提供，比如‘照相机’和‘地理定位’--将两者混合使用是危险的。如果使用的话，HTML5 API应该保留在used服务器端。对于HTML5，UX是不同的。(我将不再进一步讨论HTML5 API，因为它们超出了本讨论的范围)

要使您的想法有效，您将需要以下"核心“(或等效第三方)插件

• file-transfer
• camera (或同等)
• inappbrowser

在file-transfer和camera上，如果您愿意，可以从and服务器执行所有操作。然后，最终用户的唯一任务是选择适当的文件夹和图像.如果您从服务器端执行此操作，则无法使用插件。

如果您想使用插件，那么您就不能使用服务器端生成的网页.必须在移动设备上创建窗体。这意味着页面和表单驻留在移动设备上。但是，如果正确编写网页，则可以动态添加或删除元素。这意味着在移动端，您可以控制用户体验的每一步，并且可以增强这种体验。

在inappbrowser上，一个常见的窍门是将网站放在一个iframe中。但是，你不能直接控制iframe。另一个常见的技巧是通过API向服务器提交，然后将可见的网页更新分开进行。另一个常见的窍门是有一个带有websocket的网页，它可以处理网页更新。然而，这也可以通过推到网页，或者让网页做轮询服务器。同样，应用程序没有对网页的直接控制。

整个线程做出以下假设。

• 没有“正确的方法”来完成这项任务。
• 图片(照片)存储在一个网站上，并公开供观看。
• 它还假定不使用HTML5 API。

Answer 2

如果我正确地解释了你的问题陈述，我相信你想要的是从你的移动网站上访问设备本地服务--相机和画廊。

符合您的设计要求的解决方案是让浏览器提供这样的服务。不幸的是，WebKit和其他浏览器将这种支持限制在地理位置之类的东西上。

Cordova在这里帮助您的方法是，如果您的移动网站是一个独立的HTML5 5/CSS/JS应用程序，可以使用CORS、XHR或WebSockets与Web独立的Web服务进行通信。

如果您可以将您的网站打包到一组静态html/js/css文件中，这些文件显示来自动态web服务的内容，那么您就设置好了。同样的javascript可以调用navigator.camera.getPicture(成功、失败、选项)并将结果传输到等待的web服务。

该摄像头api不适用于InAppBrowser，就像WebKit Chrome/Safari/Edge无法使用一样。试图通过InAppBrowser控制移动应用程序最有可能由于安全限制而失败。

您可能要做的是将浏览器应用程序重新映射为一系列离散的服务，返回适合新移动应用程序的原始html片段。然后编写您的Cordova应用程序作为顶级容器来管理html片段之间的导航。如果这个服务器端呈现非常具有挑战性，足以压倒移动平台/ web服务模式(比如定制视频服务器或专家系统)，那么它将是最有用的。

Answer 3

@Jakub，塞德里克从本质上讲就是这么说的。我会重述。你对Cordova/Phonegap的理解是不正确的。

来自：Cordova/Phonegap新开发人员犯的最大错误

你已经进入了第5期。

我引述如下：

来自Phonegap FAQ PhoneGap应用程序只能使用HTML、CSS和JavaScript。但是，您可以使用网络协议(XmlHTTPRequest、Web等)轻松地与用任何语言编写的后端服务进行通信。这允许您的PhoneGap应用程序在设备连接到互联网时远程访问现有的业务流程。此外，苹果不赞成使用应用程序作为网站的包装器。 引用苹果iTunes指南- 2.12 应用程序不太有用，不独特，只是将网站捆绑成应用程序，或者没有提供任何持久的娱乐价值，可能会被拒绝。

为了明确起见，您的想法可能是有效的，但您可能需要重新考虑您的内部工作流程。您可能希望保持相同的UI和UX。