Question

我需要构建一个包含多个窗口的跨平台应用。所以我想知道如何在电子中使用html模板。

Answer 1

根据a similar question以及我所看到的内容，Electron中没有内置的html模板语言，这实际上很棒，因为它允许您使用任何其他模板语言。

我目前在Electron玩ejs。以下是我的EXEC [dbo].[InsertCategory] @Name= @Name模板文件：

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

我会对this gist给予一些赞助，帮助我找到可用于加载动态内容的网址的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)); });部分。

<强>更新

我实际上不再使用它了。加载默认的html并使用原生DOM方法更快。 Electron Quickstart程序显示了如何很好地完成这项工作。

Answer 2

另一个选择是在构建过程中进行模板制作。这是一个使用gulp向CSP meta标签和内联脚本添加随机数的简单示例。

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模板？

2 个答案: