在 Cordova 中开发网站应用程序的正确方法是什么？

Question

我正在尝试做一些简单的网站应用程序来显示我的网站并为其添加一些特定功能。

我的想法是做一些类似 Facebook移动应用程序的事情。只是我需要显示一个网站并替换文件输入- 用户应该能够从相机捕获图片或从图库（多选）中选择它并将其附加到帖子。

TL; 博士;

检查底部的图像。

我尝试过的：

使用带有相机和图像选择器插件的Cordova并在InnAppBrowser 中显示网页

用相机拍照并从图库中挑选照片然后将它们上传到服务器 - 有很多例子。

我发现了什么问题：

InnAppBrowser强制全屏显示，因此我无法调整它的大小并在其下方放置一些用于选择图片的按钮。

我需要什么：

我只需要以某种方式附加图像（来自画廊或相机）以形成文件输入或将它们上传到某种 api - api 将在服务器上处理图像并返回一些我可以使用的 ID，而不是在表单中输入文件将图片附加到帖子的页面。一些隐藏的输入，我会在其中插入要附加到帖子的上传图像的 ID（我会在我的 PHP 脚本中写入一些 if 条件）。

我需要我的应用程序是多平台的（Android、IOS、WP），这就是我使用 Apache Cordova 的原因。我已经尝试了很多解决方案，并且已经搜索了 5 个小时。但我找不到任何有用的东西。

有人有这方面的经验吗？有人制作了某种应用程序吗？

如果您可以提出任何解决方案（成为 Cordova 并不重要，但它必须是多平台的），我会很高兴！

谢谢你的时间！

图片

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

我对带有摄像头和图像选择器选项的移动应用程序版本的愿景就在 Web 浏览器下：

Answer 1

我想我没说清楚。技术答案是 Cordova/Phonegap 不适用于创建网站应用程序。这意味着从技术上讲，没有“正确的方法”来完成您所要求的操作。

• 对于网站应用程序，所有页面均由网站呈现并由网页/网络浏览器控制。
• 对于移动应用程序来说，应用程序可以直接控制的所有页面都呈现在移动设备上。但是，页面可以从服务器或移动应用程序呈现（和/或创建） ，但页面的控制权保留在呈现（或创建）页面的一侧。两侧之间有清晰的界限，可以移动，但程序员要承担“危险” 。（这里没有什么聪明的地方，只是增加了安全问题。）

然而，Cordova 和 Phonegap 确实有插件。整个目的是使用插件来使某些任务变得更容易。然而，电话和网站之间有明显的界限。要明确最后一部分，这意味着手机上的所有“插件服务”（加速计、联系人列表等）都可直接用于应用程序，而不是网站。然而，一些“服务”也可以作为 HTML5 API 提供，例如“相机”和“地理定位”——混合两者是危险的。如果使用的话，HTML5 API 应保留在网络服务器端。HTML5 的用户体验有所不同。（我不会进一步讨论 HTML5 API，因为它们超出了本讨论的范围）

为了使您的想法发挥作用，您将需要以下“核心”（或等效的第三方）插件

• file-transfer
• camera（或同等学历）
• inappbrowser

在file-transfer和上camera，如果您愿意，您可以通过网络服务器执行所有操作。那么最终用户的唯一任务就是选择适当的文件夹和图像。如果您从服务器端执行此操作，则无法使用这些插件。

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

在 上inappbrowser，一个常见的技巧是将网站放在 iframe 中。但是，您无法直接控制 iframe。另一个常见的技巧是通过 API 提交到服务器 - 然后单独更新可见的网页。另一个常见的技巧是拥有一个带有 websocket 的网页来处理网页更新。但是，这也可以通过推送网页或让网页对服务器进行轮询来完成。同样，该应用程序无法直接控制网页。

整个线程做出以下假设。

• 没有“正确的方法”来完成这项任务。
• 图像（照片）存储在网站上，可供公开查看。
• 它还假设不会使用 HTML5 API。