4.4)是否有一种方法可以实现“实时-6ren">
个人中心
gpt4 book ai didi

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

转载 作者：数据小太阳 更新时间：2023-10-29 06:15:31 25 4
gpt4 key购买 nike

刚开始检查使用 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/

25 4 0
文章推荐： javascript - 在 ng-if 中设置监视元素
文章推荐： javascript - 如何在 AngularJS 中有条件地应用指令？
文章推荐： javascript - 如何在 ProtractorJS 中扩展 ElementFinder 对象？
文章推荐： javascript - react 路由器中的层次结构
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com