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

2023-12-07

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


基于类似的问题据我所知,Electron 中没有内置的 html 模板语言,这实际上很棒,因为它允许您使用任何其他模板语言。

我目前正在玩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));
});

我会给予一些信任这个要点帮助我找到data:text/html;charset=utf-8可用于加载动态内容的 url 的一部分。

UPDATE

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在Electron框架中使用html模板? 的相关文章

  • Electron:打开默认电子邮件客户端

    我正在使用选举框架来构建 exe 和 dmg 文件 在应用程序中 我有一个按钮 单击该按钮必须打开系统上安装的默认电子邮件应用程序才能发送电子邮件 以下是打开电子邮件客户端的代码 shell openExternal mailto emai
  • 找不到模块“./App.svelte”或其相应的类型声明

    我有一个将电子与 svelte 集成以及打字稿支持集成的设置 当我运行rollup编译 svelte 应用程序的脚本 我找不到模块 App svelte错误如下图所示 Plugin typescript rollup plugin type
  • setInterval 使用 Electron 一小时后停止

    希望有人能在这里指出我正确的方向 我的电子应用程序需要每 10 分钟左右执行一次 API 调用 目前 我在渲染器进程中使用 setInterval 循环来执行此操作 该循环每 10 分钟触发一次 它通常工作得很好 几个小时后似乎就停止了 我
  • electro-forge如何指定打包的源目录?

    我已经操纵了创建反应应用程序与电子锻造app 现在我需要以某种方式指定从 CRA 生成的构建文件夹用于打包 该文件夹也应该被提供 电子锻造可以实现这样的事情吗 我知道您是在问如何告诉 electro forge 在哪个目录中找到源文件来打包
  • 如何恢复电子应用程序中的默认窗口大小?

    有没有办法将电子应用程序中的主窗口恢复到一定大小 为了解释我想要实现的目标 让我举个例子 当我打开 Windows 资源管理器时 它会以特定大小并在特定位置打开 然后我最大化该窗口并关闭资源管理器 下次当我重新启动资源管理器时 它会以与关闭
  • 节点模块是针对不同的节点模块编译的 67

    我有一个在节点模块版本 67 下编译的节点项目 但现在我收到一个错误 它需要节点模块版本 69 usb bindings node was compiled against a different Node js version using
  • 无法在电子js中加载反应

    这是我的 package js 文件 name cabed version 0 1 0 private false dependencies testing library jest dom 5 16 5 testing library r
  • Firebase 分析日志事件在 Electron 的生产版本中不起作用

    我用了一个firebase https www npmjs com package firebase用于使用实时数据库的软件包 我想实现 firebase 分析 因此我使用相同的软件包并编写分析代码 import as firebase f
  • 在 Mac App Store 的 Electron 应用程序中实现应用内购买

    我环顾四周 似乎有几个人遇到这个问题 但似乎没有人解决它 将 Apple 应用内购买添加到 Electron HTML JS 应用程序 https stackoverflow com questions 39841666 adding ap
  • ElectronJS - 在窗口之间共享 redux 存储?

    我有一个基于的电子应用程序electron react boilerplate 现在 我有一个窗口按照我希望的方式运行 我开始创建一个新窗口 我目前有 2 个 html 文件 每个窗口一个 包含 div 根 div div div div
  • CSS“ch”单元的意外行为

    我正在使用ch用于指定宽度的 CSS 单位div包含文本 我使用的是等宽字体 但是 如果我设置width 80ch 我第一个得到 80 个字符n行 其中n始终是 24 不确定这是否重要 但从那时起只有 79 个字符 这如下面的屏幕截图所示
  • app.dock.hide(); 的等效项是什么?

    我目前正在开发电子托盘应用程序 对于 Mac Electron 框架具有将应用程序隐藏在 Dock 中的功能 app dock hide 我尝试在 Windows 计算机上运行此程序并收到错误 TypeError Cannot read p
  • Electron Web 蓝牙 API requestDevice() 错误

    我正在尝试开发一个与蓝牙低功耗设备通信的应用程序 我使用 Web Bluetooth API 建立了一个工作 网站 一切正常 所以我使用 Electron 框架来构建一个应用程序 这个问题是已知的 如果你开始navigator blueto
  • 是否可以在 Mac Pro 上构建 Electron 应用程序?由于奇怪的 GPU 问题,似乎不是这样

    我尝试拉取并尝试为 Electron 应用程序构建两个不同的引导程序存储库 https github com pastahito electron react webpack https github com pastahito elect
  • Electron 为触摸屏启用触摸事件

    我有一个连接到触摸屏的 Raspberry Pi 并通过 startx 命令在其上运行电子应用程序 startx electron app nocursor 我无法处理触摸事件 例如 touchstart touchend 的问题 显然这是
  • Electron 中的收据热敏打印机

    我需要找到一种在 javascript 中打印收据的方法Electron 我已经尝试过了QZ TRAY但由于 Electron 它不起作用 我也尝试过节点热敏打印机但它也从来没有对我有用 这里有人知道如何在 javascript Elect
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • Electron 包 - 如何写入/读取文件

    我有文件test txt在我的应用程序根目录中 当我使用命令运行我的应用程序时npm start 我可以毫无问题地写入我的文件 但是当我使用电子打包器制作包时 不再可能将文本写入我的文件 我收到错误 Error EACCES permiss
  • 电子节点集成不起作用,也普遍奇怪的电子行为[重复]

    这个问题在这里已经有答案了 我是 Electron 的新手 我一直在努力让它工作 我遇到了无法解释的行为 所以这里有一个总结 我无法让 Electron 和 html 之间的通信正常工作 即使我有nodeIntegration true 网
  • 如何在 Electron 应用程序上获得圆角?

    我目前正在尝试在我正在制作的电子应用程序上获得圆角 我已经尝试了目前在线提供的几乎所有解决方案 但没有一个有任何区别 如何让 Electron 应用程序变得圆润 制作无框透明窗 const myWindow new BrowserWindo

随机推荐

  • 打开多个文件并对所有打开的文件执行宏

    我想编写一个宏来打开 30 个具有相同结构的 Excel 文件 宏应该对所有文件进行操作 并将每个文件的结果放入另一个 Excel 文件中 这意味着 所有结果 值 将被复制到目标文件中 如何编写VBA代码来打开多个文件 如何从每个文件中获取
  • UWP 命令栏更多按钮未显示 DynamicOverflowEnabled

    我有一个正在使用的 UWP 应用程序自定义媒体传输控件 在这些控件中 我在命令栏中添加了一些额外的按钮主要命令并已设定IsDynamicOverflowEnabled true根据文档 当屏幕尺寸不足以容纳所有按钮时 它应该自动将主要命令发
  • 如何提高应用程序的 Feed 操作请求限制? [关闭]

    Closed 这个问题是无关 目前不接受答案 我正在尝试提高应用程序的限制 因为在大约 50 个请求之后 应用程序将变得无法运行 我怎样才能做到这一点 这是错误 致命错误 未捕获的 OAuthException 341 已达到 Feed 操
  • 块 - 大括号/无大括号? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 当我开始开发时 我遵循了始
  • JS 将字符串转换为多维对象键

    我有一个字符串 例如 convert lamp stamp glass nose 我想创建一个对象键 鼻子 坦克对象已经创建 tank convert lamp stamp glass nose 我该怎么做呢 我使用 split 得到了数组
  • 在 Inno Setup 中从 Internet 安装文件

    我正在使用 Inno Setup 来分发我的应用程序 是否可以检查 Inno Script 的特定条件 并根据需要从互联网下载并安装一些文件 创新设置6 1较新的版本具有内置的下载支持 不再需要第三方解决方案 检查Examples Code
  • Google Chrome 扩展程序登录功能

    我正在开发一个 Chrome 扩展程序 我正在努力实现这一目标 单击 chrome 扩展程序图标 您会看到一个简单的登录页面 输入您的凭据 我需要将它们发送到 REST API 该 API 具有一个登录方法 该方法将返回我需要的 API 密
  • 将 Excel 工作簿另存为 HTML - 无法访问“System.IO.MemoryStream”

    我有一些代码想要将 Excel 电子表格转换为html所以我可以用它作为电子邮件的正文 Excel Application excel new Excel Application Excel Workbook workbook excel
  • 如何更改 .NET 应用程序的预定义 userconfig 目录?

    目前我的应用程序的用户设置存储在这个默认目录中 C Users User Name AppData Roaming Company Name Assembly Name vshos Url Hash Assembly Version 我知道
  • 是否有任何营销 API webhooks 用于修改广告系列/广告集/广告

    在我编写的程序中 用户可以暂停 取消暂停活动 我想知道如果用户通过 Facebook 广告管理器修改营销活动 我是否可以更新营销活动的状态 我能找到的唯一网络钩子是领先一代 看来我发现了隐藏的文档here 你必须将 ads rules en
  • 部署后对参数的更改未显示在报表服务器上

    我的 SSRS 2008 报告中有 7 个参数 3 个字符串多重选择 1 个日期时间 3 个字符串值 并且我已在默认值 它在我的 Visual Studio 2008 预览窗口中工作正常 但是部署后到我的报告服务器 未选中参数的 NULL
  • 仅打印 Python 中特定键的字典术语的值

    我想知道如果我有一本字典并且我想只打印出特定键的值 我会在Python 中做什么 它将位于变量中以及 dict Lemonade 1 45 87 Coke 23 9 23 Water 98 2 127 inp input Select ke
  • 是否可以从模拟器内访问照片的地理标记元数据?

    我编写了一个应用程序来检索照片的 GPS 元数据 它可以在我的 iPhone 上运行 但不能在模拟器中运行 如果我将包含地理标签的照片拖到模拟器上 它就会被放入照片库中 然后 我的应用程序发出以下代码 ALAssetRepresentati
  • nginx 位置通过文件扩展名语法拒绝

    我编写了两种不同的设置 一种用于拒绝对点文件的访问 另一种用于拒绝对文件扩展名列表的访问 但是 是否有任何语法可以拒绝其他文件扩展名列表中的点文件 location 7z bak bash bz2 config dist engine fl
  • 使用应用程序脚本拆分(分解)谷歌电子表格中的合并表格单元格

    当操作 复制 移动 包含合并单元格的范围时 我总是收到错误 您的粘贴与合并单元格重叠 请取消合并单元格并重试 但是当尝试使用以下命令取消合并范围内的单元格时Range breakApart 我收到另一个错误 所选单元格无法合并 这更令人困惑
  • 优雅的 Haskell 案例/错误处理

    我试图更好地理解如何处理 haskell 中的错误情况 并编写了一些代码来帮助我解决这个问题 是否有更好的方法 更优雅 更短 更通用 来处理多个替代方案 例如嵌套的 case 表达式 关于该主题有什么好的教程吗 本例的虚构类型 这有点简化
  • Python:将 Unicode-Hex-String 转换为 Unicode

    我有一个由带有该函数的 unicode 字符串制成的十六进制字符串 def toHex s res for c in s res 02X ord c at least 2 hex digits can be more return res
  • 推动 JavaScript 性能的限制是什么?

    在过去的几个月里 我一直在构建一个原型页面 该页面使用了大量 SVG 并且通常包含很多元素 JavaScript 和服务器端 大量 AJAX 也正在处理大量数据 页面上有数千个事件侦听器 重点是 它相当重 在 JS 中执行此类操作的最大障碍
  • Android 应用程序的 Facebook 登录(使用释放密钥)

    我正在尝试在 Google Play 上发布我的应用程序 我的应用程序中有 Facebook 登录信息 直到昨天 一切都工作正常 直到我运行应用程序时debug keystore 但是 当我使用自己的发布密钥并签署我的应用程序时 Faceb
  • 如何在Electron框架中使用html模板?

    我需要构建一个具有多个窗口的跨平台应用程序 所以我想知道如何在Electron中使用html模板 基于类似的问题据我所知 Electron 中没有内置的 html 模板语言 这实际上很棒 因为它允许您使用任何其他模板语言 我目前正在玩ejs