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

问题描述

| 如果我在phonegap中开发了一个Web应用程序,那么可以使同一Web应用程序运行在浏览器中的常规台式机/笔记本电脑中吗?     

解决方法

        请查看Ripple Chrome插件,以在Chrome浏览器中运行PhoneGap应用以及设备类型仿真。     ,        是的...没有: 是的,因为它是由html,css和javascript组成的,所以您的web应用程序将在桌面浏览器中运行。 Phonegap专用的javascript调用(加速度计,指南针,文件等)不会。 基本上,如果您遵循标准的“是”,则可以相对轻松地将您的应用程序移植到大多数浏览器,此时的工作大部分是主题化工作。     ,        DesktopGap使用嵌入式Chrome浏览器代替IE。只有Windows版本。     ,        不在浏览器中,但Phonegap具有Windows 8支持,因此如果您按此处编译应用程序 ;您可以仅在w8上运行您的应用程序,但我没有尝试过。     ,        如果您做对的话,它肯定会在台式机和网络服务器上运行。 我使用许多应用程序来执行此操作,需要注意的是: 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;
},
不太漂亮,但希望能有所帮助。     ,        MacGap是一个非常活跃的项目,似乎很好地支持了API。 las,它仅适用于Mac OSX,但可能是一个很好的起点?     ,        现在,您可以将
browser
平台与Cordova一起使用。 您可以使用常规的Cordova CLI命令安装它
cordova platform add browser
然后安装标准的Cordova插件,它们提供与设备上相同的编程接口。例如看一下https://github.com/apache/cordova-plugin-camera/#supported-platforms。 Howether支持的设备并非100%兼容,但Cordova团队尝试将尽可能多的兼容解决方案作为平台提供给浏览器     ,        令我感到惊讶的是,我找不到在桌面浏览器中测试应用程序的简单方法,因此我启动了一个GitHub项目,这使整个过程变得毫不费力。目前仅模拟了数量有限的插件,但我将添加更多插件,希望贡献者可以帮助更快地完成其他插件。还计划支持选择不同的屏幕尺寸和其他自定义设置。希望能帮助到你。     ,        如果您的phonegap应用程序不依赖于任何本机代码,那么可以,您只需使用创建Web应用程序所需的html,css和js文件即可。如果您的phonegap应用程序使用任何phonegap插件或特定于phonegap的javascript调用,那么您只需要决定如何在Web应用程序上实现这些即可。     ,        您也可以尝试使用--disable-web-security命令行选项在Chrome中运行您的应用。它将允许您执行一些“移动”操作,例如跨域请求等。 希望这可以帮助 !     ,        由于电话间隙应用程序是使用JS,HTML和CSS构建的,因此您可以访问这些HTML文件并在浏览器中运行。 但是您的代码可以访问任何设备特定的调用,那么它将引发错误。     ,        如果您使用的是Mac,请打开终端并禁用网络安全
open -a /Applications/Google\\ Chrome.app --args --allow-file-access-from-files --disable-web-security
打开homepage.html并享受:)     ,        正如雷米所说,您编写的大多数标准内容都可以,但是您需要包装某些使用摄像头/加速度计的方法,以查看您是否在应用程序中。 尽管更好的解决方案是使用功能检测,因为您可以上传图片并通过移动网站中的HTML输入使用相机,但是我敢肯定您现在可以在某些版本的Desktop Chrome中访问网络摄像头。 如果要构建适当的通用应用程序,则需要使用大量功能/设备检测,或者具有核心核心产品,并使用Gi​​t子模块之类的东西来将其作为Phonegap应用程序包含和扩展。 没有单一,简单,标准化的方式来做到这一点。     ,        试试这个:https://github.com/icblenke/phonegap-mac 我尝试了一个样品,效果很好。     ,如果您以正确的方式进行操作,它将肯定会在桌面上运行。 我使用许多我的应用程序执行此操作,但是最好包装特定于设备的事件监听器,例如:
onDeviceReady: function()  {

      // Your Code  for Device event listner

    },false);
并初始化功能
document.addEventListener(\"deviceready\",false);
    ,        有一个工具可以在系统上运行任何android应用。工具名称为“ bluestack”,它可以在系统上运行任何android应用。     ,        在Chrome中使用Ripple Emulator,您可以运行phonegap应用。 PhoneGap是一个应用程序框架,使您可以使用HTML和JavaScript构建本地安装的应用程序。 想到PhoneGap的最简单方法是宽度为100%,高度为100%的Web视图容器,并带有JavaScript编程界面,该界面可让您访问基础操作系统功能。 有关Phonegap的更多详细信息     ,        您可以安装Android VM并在台式机/ Mac / Cisco办公终端/电话/等上运行它。 您可能要问的是您是否可以拥有单个代码库。答案是99%是。您需要几个\“ extra \\”文件用于phonegap(index.html,config),但除此之外,您可以将相同的代码部署到两个地方。工作正常。好吧,有些“陷阱”,例如ѭ8,在某些手机/平板电脑上无法正常工作,而当前的Android版本和其他版本不支持这些数据列表。布局问题也可以通过媒体查询解决。但是,两个地方都使用相同的代码库。只需对Web服务进行AJAX即可。如果需要,HTML可以在应用程序本地存储。 PhoneGap应用程序与WebApp的99%相同。实际上,将完全相同的文件夹压缩并上传到build.phonegap,就像复制到Web门户一样。完全如上所述,您可以使用相同的Web应用程序,并且确实可以在Web浏览器中运行。顺便说一句,您可以使用HTML / js中的摄像头,并且不需要特定于PhoneGap的代码。对于GPS同样如此(尽管您需要一些健壮的代码才能使其在许多手机上都能正常工作)。加速度计和其他硬件当然是例外。但是,du! 实际上,我的答案是指出您将遇到的许多问题的仅有的两个之一。另外,需要指出设备像素的混乱情况。您可以使用CSS和百分比布局进行细化,然后使用media-query为平板电脑,更新的手机等添加自定义CSS mod。这当然是一团糟。如果您想要更好的支持,最终将为平板电脑,手机和其他显示器尺寸制作几乎定制的屏幕。然后,您将学习如何制作UI小部件/片段/使其变得更聪明。一个简单的示例是使用jquery数据表并在较小的设备上时更改列(隐藏较低的信息内容列)。等等,将单选按钮更改为较小的电话上的选项。等等。当然,由于html select的Android平板电脑实施受到打击,您最终将不得不发明自己的Droplist或使用jquery UI等中的一个。