【Electron】electron与cljs的处理

实现效果:
在这里插入图片描述
前言:
如何用cljs的方式,编写electron应用,可以实现多窗体应用

要使用ClojureScript(CLJS)编写一个 Electron 应用程序,并实现多窗体功能,您可以按照以下步骤进行操作:

设置开发环境:

安装 Node.js:确保您的计算机上安装了 Node.js,因为 Electron 依赖于它。
安装 Leiningen 或 Boot(如果您使用的是 Clojure 项目)。
创建项目:

在您选择的项目文件夹中创建一个新的 ClojureScript 项目。您可以使用 Leiningen 或 Boot 创建项目,根据您的偏好选择。

添加 Electron 依赖:

在项目的 project.clj(Leiningen)或 build.boot(Boot)文件中,添加 Electron 作为依赖项。您可以在 :dependencies(Leiningen)或 :dependencies(Boot)部分中添加以下内容:

[reagent "0.10.0"]
[cljsjs/electron "2.0.1"]

这些依赖项包括 Reagent(用于构建用户界面)和 cljsjs/electron(用于 Electron 集成)。

编写 CLJS 代码:

创建 ClojureScript 文件,编写您的 Electron 应用程序逻辑。您可以使用 Reagent 构建用户界面,使用 cljsjs/electron 提供的库来管理 Electron 窗体等。

示例代码:


(ns your-namespace.core(:require[reagent.core :as reagent][cljsjs.electron]))(defn create-window [](let [BrowserWindow (.-BrowserWindow cljsjs.electron)win (BrowserWindow. #js{:width 800 :height 600})](.loadURL win "https://www.example.com")(.onClosed win (fn [] (.destroy win)))))(defn -main [](create-window))

启动 Electron:

使用 npm 或 yarn 安装 Electron,然后创建一个启动脚本(例如 main.js)来启动 Electron,该脚本会加载 ClojureScript 编译后的代码。确保在脚本中正确设置 Electron 的主文件。

示例 main.js:

const { app, BrowserWindow } = require('electron');app.on('ready', () => {const win = new BrowserWindow({ width: 800, height: 600 });win.loadFile('index.html'); // 加载 ClojureScript 编译后的 HTML 文件
});

编译和运行应用:

使用 ClojureScript 编译器(例如 lein cljsbuild 或 boot cljs)编译您的 CLJS 代码,然后运行 Electron 应用程序。

创建多窗体:

您可以使用 Electron 的 API 在应用程序中创建多个窗体。例如,您可以通过在适当的事件处理函数中调用 new BrowserWindow() 来创建新的窗体。

请注意,这只是一个基本示例,用于演示如何使用 ClojureScript 和 Electron 创建一个简单的窗体。根据您的需求,您可以进一步扩展该应用程序以包括更多窗体和功能

方案一:

(本人自测不可执行,可能是主进程中并没有启用@electron/remote
clojure实现electron点击展开第二页,且第一个标签页不关闭

;;引入electron
(ns your-namespace(:require [cljs.nodejs :as nodejs][cljsjs.electron]));;使用BroserWindow组件(but 笔者就是在使用这里出现了报错)(defn open-new-window [](let [remote (.-remote (nodejs/require "electron"))BrowserWindow (.-BrowserWindow remote)mainWindow (.-BrowserWindow remote)newWindow (BrowserWindow.)](.loadURL newWindow "https://www.baidu.com")(.setMenuBarVisibility newWindow false)(.on newWindow "close" (fn [] (.destroy mainWindow)))(.show newWindow)));;考虑这里并没有写入执行的open-new-window方法,于是将方法写入主程序defn main中,也报错
(defn -main [](open-new-window))

在上面的代码中,使用了ClojureScriptcljs.nodejs库来引入Node.js模块,并使用.remote方法获取ElectronBrowserWindowelectron对象。然后,我们使用.BrowserWindow方法创建一个新窗口。

遇到的bug
在这里插入图片描述

遇到"features.isDesktopCapturerEnabled is not a function"的错误,可能是因为您的Electron版本不兼容或未正确配置。
解决方案

(ns your-namespace(:require [reagent.core :as reagent][cljsjs.electron]))(defn open-new-page [](let [remote (.-remote (.-require (js/require "electron")))shell (.-shell remote)BrowserWindow (.-BrowserWindow remote);;这里是重点,but笔者用着不管用newWindow (BrowserWindow. (clj->js {:webPreferences {:nodeIntegration true:contextIsolation false}}))](.loadURL newWindow "https://www.example.com")(.show newWindow)(.openExternal shell "https://www.example.com")))(defn render-component [](let [open-page #(open-new-page)][:div[:button {:on-click open-page} "Open New Page"]]));; 在此处渲染组件
(reagent/render [render-component](.getElementById js/document "app"))

方案二:

作者:Zobb
链接:https://juejin.cn/post/7214350677539323964
来源:稀土掘金

根据掘金作者 js的内容编写cljs
主进程main.js


const { app, BrowserWindow, ipcMain } = require('electron')
app.on('ready', () => {const win = new BrowserWindow({width: 800, height: 600,webPreferences: {enableRemoteModule: true,nodeIntegration: true,contextIsolation: false,}})win.loadURL(`file://${__dirname}/newWindow.html`)ipcMain.on('openWindow', () => {const childWin = new BrowserWindow({ width: 800, height: 600 })childWin.loadURL("https://www.baidu.com")})
})

渲染进程 renderer.js

const { ipcRenderer } = require('electron')
const openWindowBtn = document.getElementById('openWindowBtn')
openWindowBtn.addEventListener('click', () => {ipcRenderer.send('openWindow')
})

主窗口页面 newWindow.html

html复制代码<button id="openWindowBtn">打开新窗口</button>
<script src="renderer.js"></script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/130316.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习】 Python 和 NumPy 系列教程(二):Python基本数据类型:3、字符串(索引、切片、运算、格式化)

目录 一、前言 二、实验环境 三、Python基本数据类型 3. 字符串&#xff08;Strings&#xff09; 1. 初始化 2. 索引 3. 切片 4. 运算 a. 拼接运算 b. 复制运算 c. 子串判断 d. 取长度 5. 格式化 a. 使用位置参数 b. 使用关键字参数 c. 使用属性访问 f-string…

Qt 5.15集成Crypto++ 8.8.0(MSVC 2019)笔记

一、背景 笔者已介绍过在Qt 5.15.x中使用MinGW&#xff08;8.10版本&#xff09;编译并集成Crypto 8.8.0。 但是该编译出来的库&#xff08;.a和.dll&#xff09;不适用MSVC&#xff08;2019版本&#xff09;构建环境&#xff0c;需要重新编译&#xff08;.lib或和.dll&#xf…

分布式、锁、延时任务

1. redission redission 原理 Redis分布式锁-这一篇全了解(Redission实现分布式锁完美方案) 2.zk 2.1 指令 ls / / 下有哪些子节点 get /zookeeper 查看某个子节点内容 create /aa “test” delete /aa set /aa “test01” 2.2 创建节点 模式 默认创建永久 create -e …

redis(1)-hiredis-Windows下的编译

1.linux编译说明文档 GitHub - sewenew/redis-plus-plus: Redis client written in C 2.hiredis 编译 2.1 hiredis下载 https://github.com/redis/hiredis.git 2.2 hiredis cmake编译 2.2.1 配置生成:ConfigeGenerateOpen Project 配置源目录&#xff1a;…

【直接运行TS文件的三种方法】

直接运行TS文件的三种方法 文章目录 直接运行TS文件的三种方法法一&#xff1a;将 ts 编译成 js&#xff0c;然后运行 js 文件法二&#xff1a;用 ts-node 直接运行 ts法三&#xff1a;webstorm中直接运行ts(TypeScript) 法一&#xff1a;将 ts 编译成 js&#xff0c;然后运行 …

解决:AD装配输出拾放文件出现闪退问题

PCB在装配输出过程中&#xff0c;需要导出拾放文件&#xff0c;但是今天每次执行这个过程&#xff0c;AD软件就会直接闪退。 重启AD把项目管理器中没有关掉的一系列乱七八糟文件手动关闭关闭AD软件再次重启AD&#xff0c;打开项目重新导出。

04JVM_语法糖

一、编译期处理 语法糖java编译器把*.java源码编译为*.class字节码的过程中&#xff0c;自动生成和转换的一些代码&#xff08;添加的class字节码&#xff09;&#xff0c;减轻程序员的负担。 1.默认构造器 默认构造器没有写任何的构造方法&#xff0c;但经过编译器编译成字…

Spark2x原理剖析(二)

一、概述 基于社区已有的JDBCServer基础上&#xff0c;采用多主实例模式实现了其高可用性方案。集群中支持同时共存多个JDBCServer服务&#xff0c;通过客户端可以随机连接其中的任意一个服务进行业务操作。即使集群中一个或多个JDBCServer服务停止工作&#xff0c;也不影响用…

Newman+Jenkins实现接口自动化测试

一、是什么Newman Newman就是纽曼手机这个经典牌子&#xff0c;哈哈&#xff0c;开玩笑啦。。。别当真&#xff0c;简单地说Newman就是命令行版的Postman&#xff0c;查看官网地址。 Newman可以使用Postman导出的collection文件直接在命令行运行&#xff0c;把Postman界面化运…

Fourier傅里叶变换的线性性质和位移性质

Fourier傅里叶变换的线性性质和位移性质 为了阐述方便, 假定在这些性质中, 凡是需要求Fourier变换的函数都满足Fourier积分定理中的条件。在证明这些性质时, 不再重述这些条件。 一、线性性质 设 F 1 ( ω ) F [ f 1 ( t ) ] {F_1}(\omega ) {\mathscr F}[{f_1}(t)] F1​(…

2024苹果手机软件备份软件工具iMazing

很多人都会忘记备份iOS 资料&#xff0c;或者因为设置备份时间、位置等不到位&#xff0c;导致需要用的时候找不到备份。接下来&#xff0c;小编就来教大家iMazing软件备份功能的几个设置小技巧&#xff0c;都在软件界面的“选项”内调整&#xff0c;减少备份过程中的出错。 图…

OpenHarmony社区运营报告(2023年8月)

本月快讯 2023年8月3日&#xff0c;OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;发布了Beta2版本。OpenHarmony 4.0 Beta2在系统能力、应用框架、分布式通信、媒体功能、安全性等方面进行了全面升级。其中&#xff0c;ArkUI增强了界面组件能力&#x…

Docker Swarm

Docker Swarm提供 Docker 容器集群服务&#xff0c;是 Docker 官方对容器云生态进行支持的核心方案。将多个 Docker 主机封装为单个大型的虚拟 Docker 主机&#xff0c;快速打造一套容器云平台。 Swarm mode内置 kv 存储功能&#xff0c;提供了众多的新特性&#xff0c;比如&a…

报错ssh: Could not resolve hostname

…按照网上好多教程试了一下&#xff1a; 新建密钥&#xff0c;添加到gitee&#xff0c;重新测试。修改host&#xff0c;加入gitee的ip地址到里面去。修改.gifconfig配置文件&#xff0c;配置成ssh的仓库链接。 这上面的方法都不行&#xff0c;后面发现一篇文章&#xff1a;SS…

c语言flag的使用

flag在c语言中标识某种状态或记录某种信息&#xff0c;可以通过修改flag中来控制程序流程,判断某种状态是否存在或记录某种信息 操作:(1)初始化 (2)赋值 (3)判断 (4)修改 (5)去初始化 #include <stdlib.h>int power_state_check;int main() {int i 0;power_state_check…

GC 算法与种类

对于垃圾收集&#xff08;GC&#xff09;, 我们需要考虑三件事情&#xff1a;哪些内存需要回收&#xff1f;如何判断是垃圾对象&#xff1f;垃圾回收算法有哪些&#xff1f; 一、GC的工作区域 1、不是GC的工作区域 (1)程序计数器、虚拟机栈和本地方法栈三个区域是线程私有的&…

计算机视觉领域经典模型汇总(2023.09.08

一、RCNN系列 1、RCNN RCNN是用于目标检测的经典方法&#xff0c;其核心思想是将目标检测任务分解为两个主要步骤&#xff1a;候选区域生成和目标分类。 候选区域生成&#xff1a;RCNN的第一步是生成可能包含目标的候选区域&#xff0c;RCNN使用传统的计算机视觉技术&#x…

1905. 统计子岛屿

给你两个 m x n 的二进制矩阵 grid1 和 grid2 &#xff0c;它们只包含 0 &#xff08;表示水域&#xff09;和 1 &#xff08;表示陆地&#xff09;。一个 岛屿 是由 四个方向 &#xff08;水平或者竖直&#xff09;上相邻的 1 组成的区域。任何矩阵以外的区域都视为水域。 如…

记录第一次带后端团队

在过去的一个半月里我第一次作为后端开发组长角色参与公司项目从0到1的开发&#xff0c;记录这一次开发的经历。 1、背景介绍 首先说明一下背景。我所在的公司是做智慧社区相关业务&#xff0c;开发的项目是系统升级工具&#xff0c;方便公司实施同事安装和升级系统。 参与后…

借助ChatGPT使用Pandas实现Excel数据汇总

一、问题的提出 现在有如下一个Excel表&#xff1a; 上述Excel表中8万多条数据&#xff0c;记录的都是三年以来花菜类的销量&#xff0c;现在要求按月汇总实现统计每个月花菜类的销量总和&#xff0c;如果使用Python的话要给出代码。 二、问题的解决 1.首先可以用透视表的方…