Visual Studio cordova,在Android设备上“实时重新加载”的简单方法
Visual Studio cordova, simple way to "live reload" on Android devices?
>刚刚开始检查使用 Visual Studio 2015 开发 cordova 应用程序的工作流程。
我的问题是,在实际的 android 设备上调试时(假设版本> 4.4),有没有办法实现"实时重新加载"(在 JS/CSS/HTML 中进行更改,这些更改无需重新启动构建过程即可激活)。我可以肯定的是,从项目中添加/删除插件对于实时重新加载来说将是一个更大的问题(由于需要构建本机代码),但对于我们的 javascript 代码,这不就是更新目标上的文件吗?我真的不在乎在没有用户交互的情况下更新目标的自动化,我只需要避免耗时的重建过程,当需要频繁的微小更改时。我读过 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 文件。
由于节点存在,因此很容易使用node/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 安装快速"(如果未全局安装)
- 使用命令运行服务器
node livesrv <your_project_folder>/platforms/android/assets/www
下一步:将项目起始 HTML config.xml
更改为指向另一个 HTML 文件(在本例中,我选择了"main.html")
创建"main.html",这只不过是服务器的"引导程序"。
<!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>
所有这些作用都是从服务器加载"索引.html"。不要忘记使用您自己的(运行节点服务器的主机的 IP 地址)更新YOUR_SERVER_IP。
最后一步:我在我的网络应用程序中的某个地方放了一个按钮(您可以使用应用程序的"静态"部分,例如永久徽标,如果您有的话),它允许您触发重新加载。
$('#mylogo').on('click', function () {
console.log("Reloading..");
window.location.reload();
});
这对我有用。初始构建/安装后,每次我按下徽标时,应用程序都会从服务器重新加载(更新的)内容,因此无需重新构建。试试这个,让我知道它是否适合你。不要忘记允许设备与服务器连接(即:启用wifi!
要释放应用程序,请将起点更改回index.html
并删除重新加载按钮。
缺点/限制:
- 重新加载时,Visual Studio 的 DOM 连接与目标应用会丢失(至少在我的测试中)
- 总的来说应该是一个更简单/自动化的解决方案。
- 如果您在上次实际构建后添加了插件,则需要重建。
好处:
- 即时应用程序设备上更新,消除了 js/css/html 内容更改时的构建时间
我可能忽略了一些事情,特别是如果有现成的服务可以用来实现这一目标,所以如果你知道任何简化这一点的东西,请告诉我。因此,请随时批评上述所有内容,因为我非常有兴趣阅读您的想法。顺便说一句,如果有人想把它作为 V/S 的插件,我真的很想使用它。
干杯!
我的解决方案是让应用程序通过标准Cordova下载方法动态下载额外的Javascript文件,然后在代码中添加指向它们的链接。它们在您将 HTML 脚本标记添加到索引页的那一刻执行。
答案不多,但它可能会引导您朝着正确的方向前进。
编辑:
尝试这样的东西来下载脚本:
var ft = new FileTransfer();
ft.download([VARIOUS PARAMS YOU CAN FIND ONLINE]);
这将包含在项目中:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = [PATH YOU GOT FROM THE DOWNLOAD ABOVE];
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
很抱歉代码无法正常工作,但这是我在工作中的全部时间!鑫达
- 在新的浏览器选项卡上加载新的aspx页面后调用JavaScript函数
- 更改css链接并等待加载新的css
- 如何在Ajax加载新内容时停止JavaScript执行
- 当在ng视图中加载新路由时,Tabbing(tabindex)针对错误的元素
- 如何使用输入数据加载新的extjs图表
- JQuery Masonry.Ajax图标和“;加载新项目”;绳子放错地方了
- 通过javascript在同一个打开的选项卡中重新加载新的网页内容
- 当用户到达页面右侧时加载新内容
- 数据表 AJAX 筛选器重新加载数据
- 超链接单击以加载新页面并执行JavaScript
- 单击时加载新的 SVG
- 在RadWindow中加载新页面,然后从加载的窗体中关闭窗口
- ajax在页面刷新之前不会加载新的sql结果
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 使用Ajax加载页面,并在必要时加载新脚本
- 加载新页面时的过渡效果,AJAX
- Ajax没有正确加载新页面
- 正在加载新的Javascript,但正在调用旧的Javascript.MVC
- 咕噜咕噜的手表:实时加载重新加载落后 1 步....
- 我怎么能有一个花哨的盒子一样的弹出体加载,但与cookie不连续加载重新加载