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

Question

我正在尝试为显示我的网站和添加一些特定的功能做一些简单的网站应用 对它。

我的想法是为手机做像Facebook应用这样的东西。我只需要显示一个网站并替换文件输入 - 用户应该能够从相机捕捉图片或从图库中选择它（多个）选择）并将其附加到帖子。

TL; DR;

检查底部的图像。

我尝试了什么：

将 Cordova 与相机和图片选择器插件一起使用，并在 InnAppBrowser

中显示网页

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

我找到了什么麻烦：

InnAppBrowser是强制全屏所以我无法调整大小并放置一些按钮来挑选下的图片。

我需要什么：

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

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

以这种方式有人有经验吗？有人做了某种应用吗？

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

谢谢你的时间！

图片

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

我的愿景是在网络浏览器下使用相机和图像选择器选项的移动应用程序版本：

Answer 1

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

• 对于网站应用程序，所有页面都是从网站呈现的，并通过网页/网页浏览器进行控制。
• 对于移动应用程序，应用程序可以直接控制的所有页面都在移动设备上呈现。但是，可以从服务器或移动应用程序呈现（和/或创建）页面，但页面的控制权保留在呈现（或创建）页面的一侧。可以移动的双方之间有明确的界限，但是在程序员的 * peril * 处。 （这里没有明确的要点，只是增加了安全性问题。）

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

为了让您的想法有效，您需要以下“core”（或equivalent third-party）插件

• file-transfer
• camera（或同等的）
• inappbrowser

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

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

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

这整个线程做出以下假设。

• 执行此任务没有“正确的方法”。
• 图像（照片）存储在网站上，可以公开查看。
• 它还假定不使用HTML5 API。

Answer 2

如果我正确解释您的问题陈述，我相信您正在寻找的是访问设备本机服务 - 相机和放大器gallery - 来自您的移动网站。

符合您设计要求的解决方案是浏览器提供此类服务。不幸的是，WebKit和其他浏览器限制了对Geoposition这样的支持。

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

如果您可以将您的网站装入一组显示动态Web服务内容的静态html / js / css文件，那么您就可以设置了。然后，相同的javascript可以调用navigator.camera.getPicture（成功，失败，选项）并将结果文件传输到等待的Web服务。

InAppBrowser无法使用相机api，因为它不适用于WebKit Chrome / Safari / Edge。由于安全限制，尝试通过InAppBrowser控制移动应用程序很可能会失败。

您可能会将您的浏览器应用程序重新映像为一系列离散服务，这些服务可返回适合新移动应用的原始html代码段。然后将您的Cordova应用程序编写为管理html代码段中导航的顶级容器。如果服务器端渲染非常具有挑战性，足以淹没移动平台/ Web服务模式（想想自定义视频服务器或专家系统），那么这种服务器端渲染将非常有用。

Answer 3

@Jakub， 塞德里克基本上已明确表示。我会重申一下。您对Cordova / Phonegap的理解不正确。

来自：Top Mistakes by Developers new to Cordova/Phonegap
你遇到了问题＃5。

我引用：

  

来自Phonegap常见问题

     

    

PhoneGap应用程序只能使用HTML，CSS和JavaScript。但是，您可以使用网络协议（XmlHTTPRequest，Web套接字等）轻松地与使用任何语言编写的后端服务进行通信。这允许您的PhoneGap应用程序在设备连接到Internet时远程访问现有业务流程。

  

     

此外，Apple对使用应用程序作为网站包装器感到不满。

     

引用Apple iTunes指南 - 2.12

     

    

应用程序不是非常有用，独特，只是简单的网站捆绑为应用程序，或不提供任何持久的娱乐价值可能会被拒绝

  

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