【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.mzph.cn/news/76432.shtml

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

相关文章

C语言实现扫雷小游戏

1.首先扫雷游戏要存储布置好的雷信息&#xff0c;需要一个二维数组 不是雷放* 雷&#xff1a;# 不是雷&#xff1a;0 雷&#xff1a;1 2. 给2个二维数组 9*9 一个存放雷的信息&#xff0c;一个存放布置好雷的信息 3.为了防止在统计坐标周围的…

基于人工智能与边缘计算Aidlux的工业表面缺陷检测

一&#xff1a;训练yolov8得到onnx模型&#xff08;相关教程有很多&#xff09; 二&#xff1a;模型转化&#xff1a; 网站&#xff1a; https://aimo.aidlux.com/ 输入试用账号和密码: 账号:AIMOTC001&#xff0c;密码:AIMOTC001 我们选择 TensorFlowLite 一步步完成转化 …

TCP的三次握手与四次挥手

首先&#xff0c;源端口号和目标端口号是不可少的&#xff0c;这一点和 UDP 是一样的。如果没有这两个端口号。数据就不知道应该发给哪个应用。 接下来是包的序号。为什么要给包编号呢&#xff1f;当然是为了解决乱序的问题。不编好号怎么确认哪个应该先来&#xff0c;哪个应该…

跨站请求伪造

1.CSRF 概述 1.1 CSRF 原理 1.1.1 基本概念 ​ 跨站请求伪造&#xff08;Cross Site Request Forgery&#xff0c;CSRF&#xff09;是一种攻击&#xff0c;它强制浏览器客户端用户在当前对其进行身份验证后的Web 应用程序上执行非本意操作的攻击&#xff0c;攻击的重点在于更…

选择排序——直接选择排序

直接选择排序&#xff1a;&#xff08;以重复选择的思想为基础进行排序&#xff09; 1、简述 顾名思义就是选出一个数&#xff0c;再去抉择放哪里去。 设记录R1&#xff0c;R2…&#xff0c;Rn&#xff0c;对i1&#xff0c;2&#xff0c;…&#xff0c;n-1&#xff0c;重复下…

分布式、锁、延时任务

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

Python基础: with模式和__enter__ 和 __exit__

一、说明 有一些任务&#xff0c;可能事先需要设置&#xff0c;事后做清理工作。 with方法就是python的非常酷的语句&#xff0c;安全可靠&#xff0c;方便。我们自己的类如何具备with的能力?必须拥有__enter__()方法&#xff0c;另一个__exit__()&#xff0c;因此&#xff0c…

黑马JVM总结(五)

&#xff08;1&#xff09;方法区 它是所有java虚拟机 线程共享的区&#xff0c;存储着跟类的结构相关的信息&#xff0c;类的成员变量&#xff0c;方法数据&#xff0c;成员方法&#xff0c;构造器方法&#xff0c;特殊方法&#xff08;类的构造器&#xff09; 方法区在虚拟机…

【算法专题突破】双指针 - 最大连续1的个数 III(11)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;1004. 最大连续1的个数 III - 力扣&#xff08;Leetcode&#xff09; 这道题不难理解&#xff0c;其实就是求出最长的连续是1的子数组&#xff0c; 但是&#xff0c;他支…

用vagrant快速创建linux虚拟机

参考B站&#xff1a;https://www.bilibili.com/video/BV1np4y1C7Yf 1、下载VirtualBox 2、下载vagrant 3、vagrant官网下载.box文件 官网&#xff1a;https://app.vagrantup.com/boxes/search 例如要下载这个centos/7 点进去&#xff0c;点击下载 下载后放到一个指定目录…

OSCP系列靶场-Esay-SunsetNoontide保姆级

OSCP系列靶场-Esay-SunsetNoontide 目录 OSCP系列靶场-Esay-SunsetNoontide总结准备工作信息收集-端口扫描目标开放端口收集目标端口对应服务探测 信息收集-端口测试chatgpt学习 漏洞利用-getwebshell漏洞利用-unrealircd 内网遨游-getshell交互shellFLAG1获取信息收集-内网基础…

【C++进阶】二叉树进阶之二叉搜索树

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

Vector底层原理——面试之我答

Vector概述 vector是STL中最常用的容器&#xff0c;vector主要功能是作动态数组来弥补传统数组的缺点&#xff0c;如&#xff1a;不灵活&#xff0c;不方便插入等等。 Vector支持随机访问&#xff0c;因此访问某一个元素的时间复杂度是O(1)。 vector中存储着许多易用的函数方法…

Azure + React + ASP.NET Core 项目笔记一:项目环境搭建(二)

有意义的标题 pnpm 安装umi4 脚手架搭建打包语句变更Visual Studio调试Azure 设置变更发布 pnpm 安装 参考官网&#xff0c;或者直接使用npm安装 npm install -g pnpmumi4 脚手架搭建 我这里用的umi4&#xff0c;官网已附上 这里需要把clientapp清空&#xff0c;之后 cd Cl…

【JAVA】String类

作者主页&#xff1a;paper jie_的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和…

基于SSM的高校共享单车管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Redis原理:IntSet

&#xff08;笔记总结自b站黑马程序员课程&#xff09; 一、结构 IntSet是Redis中set集合的一种实现方式&#xff0c;基于整数数组来实现&#xff0c;并且具备长度可变、有序等特征。 结构如下&#xff1a; typedef struct intset {uint32_t encoding; //编码方式uint32_t l…

读取XML的几种方式

一、为什么使用XML 1、便于不同应用程序之间通信。 2、便于不同平台之间通信。 3、便于不同平台之间数据共享。 二、Dom读取 xml文件内容 <?xml version"1.0" encoding"UTF-8"?> <bookstore><book id"1"><name>冰…

python main 函数-启动-传递参数 python 打包 exe C# 进程传参

Part1:Python main 传递参数 在Python编程中&#xff0c;我们经常需要从命令行或其他外部环境中获取参数。Python提供了一种简单而灵活的方式来处理这些参数&#xff0c;即通过main函数传参 1.python main 函数-启动-传递参数 test.py import sysdef main():# 获取命令行参…

C盘清理教程

C盘清理教程 首先使用space Sniffer 扫一下c盘&#xff0c;然后看一下到底是哪个文件这么大 第二步&#xff0c;创建软链接。 首先将我们需要移动的文件的当前路径拷贝下来&#xff1a;C:\Users\Tom\Desktop\test-link\abc\ghi.txt 然后假设剪切到D盘下&#xff1a;D:\ghi.…