常规桌面浏览器中的Phonegap Web应用程序

时间:2011-05-28 04:50:16

标签: cordova

如果我在phonegap中开发一个网络应用程序,是否可以在浏览器内的常规台式机/笔记本电脑上运行相同的Web应用程序?

18 个答案:

答案 0 :(得分:29)

查看Ripple Chrome plugin以在Chrome浏览器中运行PhoneGap应用以及设备类型模拟。

答案 1 :(得分:13)

是......不是: 您的webapp将在桌面浏览器中运行,是的,因为它由html,css和javascript组成。 电话间隙特定的javascript调用(加速度计,指南针,文件等)不会。

基本上,如果你坚持标准是,你将能够相对容易地将你的应用程序移植到大多数浏览器,此时的工作主要是主题工作。

答案 2 :(得分:5)

如果你做对了,它肯定会在桌面和网络服务器上运行。

我在许多应用中都这样做,需要注意的事项是:

  • 在PhoneGap中允许使用CORS,但可能不在桌面浏览器上
  • Cordova / PhoneGap API不起作用,如果您尝试调用它们可能会抛出错误

良好的做法是将onDeviceReady函数中的设备特定事件侦听器等包装为:

    onDeviceReady: function() {
    // Register the device event listeners
    document.addEventListener("backbutton", function (e) {
        console.log("default prevented");
        e.preventDefault();
    }, false );
    document.addEventListener("resume", onDeviceResume, false);

并在初始化函数中注册

document.addEventListener("deviceready", onDeviceReady, false);

除此之外,我使用原始函数来分配我可以参考的变量“phonegap”,如果我需要知道我们在哪个平台上,或者我们是桌面(在这种情况下它将是假的)。

    isPhoneGap: function() {
    var is = false;
    var agent = navigator.userAgent.toLowerCase();
    var path = window.location.href;
    if (path.indexOf("file://") != -1) {
        if (agent.indexOf("android") != -1) {
            is = "android";
        } else if (agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1 || agent.indexOf("ipod") != -1) {
            is = "ios";
        } else if (agent.indexOf("iemobile") != -1) {
            is = "wp";
        }
    }
    return is;
},

不是很漂亮,但希望这有帮助。

答案 3 :(得分:5)

不在浏览器中但Phonegap支持Windows 8,因此如果您将应用程序编译为here

你可以在w8上运行你的应用程序,但我没有尝试过。

答案 4 :(得分:5)

DesktopGap使用嵌入式Chrome浏览器而非IE浏览器。只有Windows版本。

答案 5 :(得分:2)

MacGap是一个非常活跃的项目,似乎很好地支持API。

唉它只适用于Mac OSX,但可能是一个很好的跳跃点吗?

答案 6 :(得分:2)

现在您可以将browser平台与Cordova一起使用。

您可以使用常规Cordova CLI命令安装它 cordova platform add browser

然后安装标准Cordova插件,它们提供与设备相同的编程接口。例如,请查看https://github.com/apache/cordova-plugin-camera/#supported-platforms。 Howether支持不与设备100%兼容,但Cordova团队尝试将尽可能多的兼容解决方案作为平台引入浏览器

答案 7 :(得分:1)

我很惊讶我找不到在桌面浏览器中测试应用程序的简单方法,因此我启动了一个GitHub project,这使得该过程毫不费力。目前只有有限数量的插件被模拟,但我会添加更多,希望贡献将有助于更快地完成其他插件。还计划支持选择不同的屏幕尺寸和其他自定义。希望它有所帮助。

答案 8 :(得分:1)

如果您的phonegap应用程序不依赖于任何本机代码,那么您只需使用html,css&创建Web应用程序所需的js文件。如果您的phonegap应用程序使用任何phonegap插件或phonegap特定的javascript调用,那么您只需要决定如何在Web应用程序上实现这些。

答案 9 :(得分:0)

您还可以尝试使用--disable-web-security命令行选项在Chrome中运行您的应用。它将允许您执行一些“移动”操作,如跨域请求等。

希望这有帮助!

答案 10 :(得分:0)

由于手机间隙应用程序是使用JS,HTML和CSS构建的,因此您可以访问这些HTML文件并在浏览器中运行。 但是你的代码可以访问任何特定于设备的调用,然后它会抛出错误。

答案 11 :(得分:0)

如果你使用mac,打开终端并禁用网络安全

open -a /Applications/Google\ Chrome.app --args --allow-file-access-from-files --disable-web-security

打开你的homepage.html和ENJOY :)

答案 12 :(得分:0)

正如雷米所说,你写的大部分标准内容都没问题,但是你需要使用相机/加速度计来包装某些方法来查看你是否在app中。

虽然更好的解决方案是使用功能检测,因为您可以上传图片并在移动网站中使用带有HTML输入的相机,我很确定您现在可以访问某些版本的桌面Chrome中的网络摄像头。

如果你想构建一个适当的通用应用程序,你需要使用大量功能/设备检测,或者拥有一个核心核心产品,并使用像Git子模块这样的东西来包含并扩展它作为Phonegap应用程序。< / p>

没有单一,简单,标准化的方法。

答案 13 :(得分:0)

试试这个:https://github.com/icblenke/phonegap-mac

我尝试了一个样本并且效果很好。希望这有助于!!

答案 14 :(得分:0)

您可以安装Android VM并在台式机/ Mac / Cisco办公终端/电话等上运行它。 你可能会问的是你是否可以拥有一个代码库。答案是99%是的。你需要一些&#34;额外的&#34; phonegap(index.html,config)的文件,但除此之外,您可以将相同的代码部署到这两个地方。它工作正常。好吧,有&#34;陷阱&#34;如

H中有谁支持这个答案?它实际上是少数直接回答他的问题。他问道&#34;如果我在phonegap中开发一个网络应用程序,可以在浏览器内的常规台式机/笔记本电脑上运行相同的Web应用程序吗?&#34;我的答案是正确的,因为我已经完成了这项工作并且正在生产一家拥有近1000家商店和超过1亿美元收入的公司。您会认为他们的大多数客户都是家喻户晓的名字。 PhoneGap应用程序与WebApp的99%完全相同。事实上,完全相同的文件夹被压缩并上传到build.phonegap,因为它被复制到Web门户。正如上面所述,您可以使用相同的Web应用程序,并且它可以在Web浏览器中运行。顺便说一句,你可以使用HTML / js中的相机,不需要特定于PhoneGap的代码。对于GPS也是如此(尽管您需要一些强大的代码才能使其在许多手机上运行)。加速度计和其他硬件当然是例外;但是,呃!

事实上,我的回答只是其中两个中的一个,它指出了很多他会遇到的问题。此外,需要指出设备像素的混乱。您可以使用CSS和百分比布局进行操作,然后使用媒体查询为平板电脑,较新的手机等添加自定义CSS模块。当然,它变得一团糟。如果您想要更好的支持,您最终会为平板电脑,手机和其他显示尺寸制作几乎自定义的屏幕。然后,您将学习制作UI小部件/片段/其他内容并使其变得聪明。一个简单的例子是使用jquery datatable并在较小的设备上更改列(隐藏较低的信息内容列)。等等。在较小的手机上更改单选按钮以选择等。那种废话。当然,自从Android平板电脑实现html选择打击以来,您最终必须创建自己的下拉列表或使用jquery UI等。

答案 15 :(得分:0)

如果以正确的方式执行,它肯定会在桌面上运行。

我使用我的许多应用程序执行此操作,但最好将您的设备特定事件侦听器包装起来:

onDeviceReady: function()  {

      // Your Code  for Device event listner

    },false);

并初始化函数

document.addEventListener("deviceready", onDeviceReady, false);

答案 16 :(得分:0)

有一个工具可以在系统上运行任何Android应用程序。工具名称是'bluestack',它可以在系统上运行任何Android应用程序。

答案 17 :(得分:0)

在chrome中使用Ripple Emulator,您可以运行phonegap app。

PhoneGap是一个应用程序框架,使您能够使用HTML和JavaScript构建本机安装的应用程序。

最简单的思考PhoneGap的方法是一个100%宽度和100%高度的Web视图容器,其中包含一个允许您访问底层操作系统功能的JavaScript编程接口。

More Detail about Phonegap

相关问题