草庐IT

javascript - Visual Studio cordova,在 Android 设备上到 "live reload"的简单方法?

coder 2025-04-01 原文

刚开始检查使用 Visual Studio 2015 开发 cordova 应用程序的工作流程。

我的问题是,在实际的 android 设备上调试时(假设版本 > 4.4)是否有一种方法可以实现“实时重新加载”(在 JS/CSS/HTML 中进行更改,并且这些更改在不重新启动构建过程的情况下变为事件状态)。我可以理解,从项目中添加/删除插件对于实时重新加载(由于需要构建 native 代码)来说是一个更大的问题,但对于我们的 javascript 代码,这不只是更新目标文件吗?我真的不关心没有用户交互的更新目标的自动化,我只需要避免耗时的重建过程,当需要频繁的小改动时。我读过 Ionic 框架已经做到了,但是是否需要 ionic 才能做到这一点?我也看到/测试了 phonegap,但我不想这样做。

我对此很陌生,但我认为实时重新加载只涉及一个静态 http 服务器指向我们的源(管理“虚拟”cordova.js 等)加上一些东西,比如将项目的起始 html 更改为指向到我们的服务器而不是文件(甚至是我们应用程序上的“重新加载”按钮)。是不是这样?我猜我在某个地方错了,否则我希望将其视为 V/S 标准问题。只是说。如果不是 V/S,是否有工具/插件可以安装?

抱歉,问题/帖子很长。非常感谢评论/指示

最佳答案

环顾四周后,我决定创建一个简单的解决方案来解决这个问题,并将其发布给所有关心这样做的人。我们只需要一个指向 android 构建目录的静态 http 文件服务器:

<project_folder>/platforms/android/assets/www

碰巧在成功构建后,文件夹中包含所有要提供的文件,包括 cordova.js , cordova_plugins.js和整个plugins包含他们的 javascript 文件的文件夹。

由于存在节点,因此很容易用节点/express 制作一个“快速”的 http 服务器。这是我起草的脚本(可以根据您的需要随意修改)。

livesrv.js:

var express     = require('express');
var server      = express();
var http        = require('http').Server(server);
var port        = 80;
var static_root = process.argv[2] || '<YOUR_PROJECT_FOLDER>/platforms/android/assets/www';

server.all('/*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

server.use(function(req, res, next) 
{
  console.log('--> '+req.url);
  if(req.url.match(/(.png|.jpg|.jpeg|.svg|.woff|.woff2|.ttf|.otf|.eot)/)) {
    res.header('Cache-Control', 'max-age=691200');
  } else {
    res.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
    res.header('Pragma', 'no-cache');
    res.header('Expires', 'Thu, 01 Jan 1970 00:00:01 GMT');
  }
  next();
});

server.use(express.static(static_root));

http.listen(port, function() {
  console.log("startup: server started @ port " + port + ", root:"+static_root);
});

当您启动此节点应用程序时,您的项目文件 (js/css/html) 可以从您的设备进行实时更新(警告:这会暴露您的源代码,因此在使用此脚本之前您必须清楚自己在做什么).对于那些需要更详细说明的人:

  • 将上述代码段保存到空文件夹中的“livesrv.js”文件
  • 打开该文件夹的命令提示符
  • 运行一次“npm install express”(如果没有全局安装)
  • 使用命令运行服务器

node livesrv <your_project_folder>/platforms/android/assets/www

下一步:更改config.xml您项目的起始 HTML 指向另一个 HTML 文件(在本例中我选择了“main.html”)

创建“main.html”,它只不过是服务器的“ Bootstrap ”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body>
    <script>
        console.log("Starting..");
        setTimeout(function () {
            console.log("Booting app..");
            window.location.href = "http://<YOUR_SERVER_IP>/index.html";
        }, 200);
    </script>
</body>
</html>

所有这一切都是从服务器加载“index.html”。不要忘记用您自己的(运行节点服务器的主机的 ip 地址)更新 YOUR_SERVER_IP。

最后一步: 我在我的 webapp 中的某处放置了一个按钮(您可以使用应用程序的“静态”部分,例如永久 Logo ,如果您有的话),它允许您触发重新加载。

$('#mylogo').on('click', function () {
   console.log("Reloading..");
   window.location.reload();
});

这对我有用。初始构建/安装后,每次我按下 Logo 时,应用程序都会从​​服务器重新加载(更新的)内容,因此无需重建。试试这个,让我知道它是否适合你。不要忘记允许设备与服务器连接(即:启用 wifi!)

要发布应用程序,请将起点改回 index.html并删除重新加载按钮。

缺点/限制:

  • 当您重新加载时,visual studio 与目标应用程序的 DOM 连接丢失(至少在我的测试中)
  • 总体上应该是一个更简单/自动化的解决方案。
  • 如果您在上次实际构建后添加了插件,则需要重建。

好处:

  • 即时应用在设备上更新,消除了 js/css/html 内容发生变化时的构建时间

我可能忽略了一些事情,特别是如果有现成的服务可以用来实现这一点,所以如果您知道任何可以简化这一点的方法,请告诉我。所以请随意批评以上所有内容,因为我非常有兴趣阅读您的想法。顺便说一句,如果有人愿意将其作为 V/S 的插件,我真的很乐意使用它。

干杯!

关于javascript - Visual Studio cordova,在 Android 设备上到 "live reload"的简单方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35677836/

有关javascript - Visual Studio cordova,在 Android 设备上到 "live reload"的简单方法?的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点,但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  6. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索,但这不是我需要的。我也看过ruby​​-doc.org,但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗?更新我用methods()方法做了实验,得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline,但已经有几个月没有使用它了。现在,在Ruby1.9.2上全新安装时,它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗? 最佳答案

随机推荐