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

What is the correct way developing website applications in Cordova?

我正在尝试做一些简单的网站应用程序 显示我的网站添加一些 具体 功能

我的想法是像 Facebook 应用程序 一样用于移动设备。我只需要显示一个网站并 替换文件输入 - 用户应该能够 从相机拍摄照片 或从 画廊(多个select)并将其附加到post.

TL;DR;

检查底部的图像。

我试过的:

CordovaCameraImage picker 插件一起使用,并在 [=48] 中显示网页=]InnAppBrowser

用相机拍照,然后从图库中挑选照片,然后上传到服务器——这样的例子很多。

我发现了什么问题:

InnAppBrowser 强制全屏所以我无法调整它的大小并放置一些按钮来选择图片在它下面.

我需要什么:

我只需要以某种方式附加图像(来自画廊或相机)到表单文件输入或将它们上传到某种api 而不是 - api 将处理服务器上的图像和 return 一些我可以用来代替页面表单中的文件输入的 ID,以将图像附加到 post。一些隐藏的输入,我只插入要附加到 post 的上传图像的 ID(我会在我的 PHP 脚本中写一些 if 条件)。

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

有人有这方面的经验吗?有人做过那种申请吗?

如果您能提出任何解决方案(成为 Cordova 并不重要,但它必须是多平台的),我将很高兴!

感谢您的宝贵时间!

图片

有桌面版正常文件输入画面:

我的设想是在网络浏览器下带有摄像头和图像选择器选项的移动应用程序版本:

@Jakub, 塞德里克基本上已经清楚地说明了这一点。我会重申。您对 Cordova/Phonegap 的理解不正确。

发件人:Top Mistakes by Developers new to Cordova/Phonegap
您遇到了问题 #5。

我引用:

From Phonegap FAQ

A PhoneGap application may only use HTML, CSS, and JavaScript. However, you can make use of network protocols (XmlHTTPRequest, Web Sockets, etc) to easily communicate with backend services written in any language. This allows your PhoneGap app to remotely access existing business processes while the device is connected to the Internet.

此外,Apple 不赞成将应用程序用作网站的包装器。

引用 Apple iTunes 指南 - 2.12

Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected

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

我想我没说清楚。技术答案是 Cordova/Phonegap 不用于创建 网站应用程序 。这意味着从技术上讲,没有 "correct way" 可以执行您要求的操作。

  • 对于 网站应用程序 ,所有页面都从网站呈现并由 webpage/webbrowser 控制。
  • 对于移动应用程序,应用程序可以直接控制的所有页面都呈现在移动设备上。但是,可以从服务器或 移动应用程序 呈现(and/or 创建)页面,但页面的控制权仍由呈现(或创建)页。可以移动的两侧之间有明确的界限,但是在程序员的*peril*。 (这里没有任何聪明点,只是增加了安全问题。)

但是,Cordova 和 Phonegap 确实有 plugins.The 整个目的是使用插件来简化某些任务。但是,phone 和网站之间有明确的界限。需要明确最后一部分,这意味着 phone 上的所有 "plugin services"(加速度计、联系人列表等)都可直接用于应用程序,而不是网站。但是,一些 "services" 可用作 HTML5 API,例如 'camera' 和 'geolocation' – 混合这两个是危险的。如果使用,HTML5 APIs 应该保留在网络服务器端。 HTML5 的用户体验不同。 (我不会再讨论 HTML5 API,因为它们超出了本次讨论的范围)

为了使您的想法可行,您将需要以下“core" (or equivalent third-party) 插件

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

file-transfercamera 上,如果需要,您可以从网络服务器执行任何操作。那么最终用户的唯一任务就是 select 适当的文件夹和图像。如果您从服务器端执行此操作,则无法使用插件。

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

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

整个线程做出以下假设。

  • 没有"correct way"做这个任务。
  • 图像(照片)存储在网站上,可公开查看。
  • 它还假定不会使用 HTML5 API。

如果我正确解释了您的问题陈述,我相信您正在寻找的是从您的移动网站访问设备本机服务 - 相机和图库。

适合您设计要求的解决方案是让浏览器提供此类服务。不幸的是,WebKit 和其他浏览器将此类支持限制在 Geoposition 之类的东西上。

如果您的移动网站是可以使用 CORS XHR 或 WebSockets 与独立于 Web 的 Web 服务通信的独立 HTML5/CSS/JS 应用程序,Cordova 可以在这方面为您提供帮助。

如果您可以将您的网站装入一组显示动态 Web 服务内容的静态 html/js/css 文件,那么您就已经准备好了。同样的 javascript 然后可以调用 navigator.camera.getPicture(成功、失败、选项)并将结果文件传输到等待的 Web 服务。

该摄像头 api 不适用于 InAppBrowser,就像它不适用于 WebKit Chrome/Safari/Edge 一样。由于安全限制,尝试通过 InAppBrowser 控制移动应用程序很可能会失败。

您可能需要做的是将您的浏览器应用程序重新想象为一系列离散服务,这些服务 return 原始 html 片段适合新的移动应用程序。然后将您的 Cordova 应用程序编写为顶级容器,用于管理 html 片段之间的导航。如果这种服务器端渲染具有足够的挑战性以压倒移动平台/Web 服务模式(想想自定义视频服务器或专家系统),那么它将是最有用的。