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

Nit*_*ohn 5 electron

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

17x*_*nde 4

基于类似的问题和我所看到的,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>
Run Code Online (Sandbox Code Playgroud)

下面是我的文件的一部分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));
});
Run Code Online (Sandbox Code Playgroud)

我会赞扬这个要点,因为它帮助我找到了data:text/html;charset=utf-8可用于加载动态内容的 url 部分。

更新

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