如何在电子框架中使用html模板？ [英] How to use html templates in electron framework?
问题描述
我需要构建一个具有多个窗口的跨平台应用程序。所以我想知道如何在电子中使用html模板。
I need to build a cross platform app with multiple windows. So I would like to know how to use html templates in electron.
推荐答案
基于类似的问题和我所看到的，没有内置html模板语言在Electron中，这实际上很棒，因为它允许您使用任何其他模板语言。
Based on a similar question and what I've seen, there's no built in html template language in Electron, which is actually great because it allows you to use any other template language.
我目前在玩 ejs 在Electron中。
以下是我的 index.ejs 模板文件：
I'm currently playing with ejs in Electron.
Below is my index.ejs template file:
<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 中。请注意，我已经省去了大部分样板代码：
And below is a section of my main.js file where the above template is rendered and loaded onto the BrowserWindow. Note that I've left out most of the boilerplate code:
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));
});
我会给此要点帮助我找到了以下内容的 data：text / html; charset = utf-8 部分可用于加载动态内容的网址。
I'll give some credit to this gist for helping me find the data:text/html;charset=utf-8 part of the url that can be used to load dynamic content.
更新
我实际上不再使用了仅加载默认的html并使用本机DOM方法会更快。 电子快速入门程序演示了如何很好地做到这一点。
I'm actually not using this anymore. It's faster to just load the default html and use the native DOM methods. The Electron Quickstart program shows how to do this nicely.
这篇关于如何在电子框架中使用html模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
