gpt4 book ai didi

electron - 如何在 Electron 框架中使用 html 模板?

转载 作者:行者123 更新时间:2023-12-03 12:20:20 24 4
gpt4 key购买 nike

我需要构建一个具有多个窗口的跨平台应用程序。所以我想知道如何在 Electron 中使用 html 模板。

最佳答案

基于 a similar question 和我所看到的,Electron 中没有内置的 html 模板语言,这实际上很棒,因为它允许您使用任何其他模板语言。

我目前正在 Electron 中使用 ejs
下面是我的 index.ejs 模板文件:

<html lang="en">
<head>
<title>The Index Page</title>
</head>
<body>
<h1>Welcome, this is the Index page.</h1>
<% if (user) { %>
<h3>Hello there <%= user.name %></h3>
<% } %>
</body>
</html>

下面是我的 main.js 文件的一部分,上面的模板被渲染并加载到 BrowserWindow 上。请注意,我省略了大部分样板代码:

const ejs = require('ejs');
//... Other code
let win = new BrowserWindow({width: 800, height: 600});
//... Other code
// send the data and options to the ejs template
let data = {user: {name: "Jeff"}};
let options = {root: __dirname};
ejs.renderFile('index.ejs', data, options, function (err, str) {
if (err) {
console.log(err);
}
// Load the rendered HTML to the BrowserWindow.
win.loadURL('data:text/html;charset=utf-8,' + encodeURI(str));
});

我要感谢 this gist 帮助我找到了可用于加载动态内容的 url 的 data:text/html;charset=utf-8 部分。

更新

我实际上不再使用它了。仅加载默认 html 并使用 native DOM 方法会更快。 Electron Quickstart 程序展示了如何很好地做到这一点。

关于electron - 如何在 Electron 框架中使用 html 模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40280011/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com