环顾四周后,我决定创建一个简单的解决方案来解决这个问题,我将把它发布给所有愿意这样做的人。我们只需要一个指向 android 构建目录的静态 http 文件服务器:
<project_folder>/platforms/android/assets/www
碰巧在成功构建后,该文件夹包含所有要提供的文件,包括 cordova.js、cordova_plugins.js 和整个 plugins 文件夹及其 javascript 文件。
由于 node 存在,使用 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) 对您设备上的实时更新是可见的(警告:这会暴露您的源代码,因此在使用此脚本之前您必须了解自己在做什么)。对于那些需要更详细说明的人:
- 将上述 sn-p 保存到空文件夹中的“livesrv.js”文件中
- 打开该文件夹的命令提示符
- 运行一次“npm install express”(如果未全局安装)
- 使用命令运行服务器
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>
所有这些都是从服务器加载`index.html'。不要忘记用您自己的(运行节点服务器的主机的 IP 地址)更新 YOUR_SERVER_IP。
最后一步:我在我的 web 应用程序中放置了一个按钮(您可以使用应用程序的“静态”部分,例如永久徽标,如果有的话),它允许您触发重新加载。
$('#mylogo').on('click', function () {
console.log("Reloading..");
window.location.reload();
});
这对我有用。初始构建/安装后,每次我按下徽标时,应用程序都会从服务器重新加载(更新的)内容,因此无需重建。试试这个,让我知道它是否适合你。不要忘记允许设备与服务器连接(即:启用wifi!)
要发布应用,请将起点改回index.html 并移除重新加载按钮。
缺点/限制:
- 重新加载时,Visual Studio 的 DOM 与目标应用的连接会丢失(至少在我的测试中)
- 总体上应该是一个更简单/自动化的解决方案。
- 如果您在上次实际构建后添加了插件,是否需要重新构建。
好处:
- 设备上的即时应用更新,在 js/css/html 内容发生更改时消除构建时间
我可能忽略了一些事情,特别是如果有现成的服务可以用来实现这一点,所以如果你知道任何可以简化这一点的事情,请告诉我。因此,请随意批评以上所有内容,因为我非常有兴趣阅读您的想法。顺便说一句,如果有人愿意将此作为 V/S 的插件,我真的很想使用它。
干杯!