如何在电子框架中使用 html 模板？

Question

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

Answer 1

根据和我所见，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 并使用本机 DOM 方法会更快。 Electron Quickstart 程序展示了如何很好地做到这一点。

Answer 2

另一种选择是在构建过程中进行模板化。这是一个使用 gulp 将随机数添加到 CSP 元标记和内联脚本的简单示例。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= scriptNonce %>';">
    <title>Basic Electron App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="application/javascript" nonce=<%= scriptNonce %>>
      require('./index.js');
    </script>
  </body>
</html>

并在 gulfile.js 中将以下内容添加到您已有的内容中，并确保此任务包含在您的管道中。您也可以使用以下代码更新您当前的 html 任务。

const template = require('gulp-template');
const uuidv4 = require('uuid/v4');

gulp.task('copy-html', () => {
  // Create nonces during the build and pass them to the template for use with inline scripts and styles
  const nonceData = {
    scriptNonce: new Buffer(uuidv4()).toString('base64'),
    styleNonce: new Buffer(uuidv4()).toString('base64')
  };
  return gulp.src('src/*.html')
  .pipe(template(nonceData))
  .pipe(gulp.dest('dist/'));
});

这是一个非常精简的示例。如果有人感兴趣，我在 https://github.com/NFabrizio/data-entry-electron-app 有一个更完整的示例，尽管当运行应用程序时仍然有一个警告，因为我正在使用的软件包之一拉入了 react-beautiful-dnd，它添加了内联样式，但目前不接受随机数。

如何在电子框架中使用 html 模板？

How to use html templates in electron framework?

electron