【Electron】electron与cljs的处理

news2025/1/10 15:59:11

实现效果:
在这里插入图片描述
前言:
如何用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.coloradmin.cn/o/1002836.html

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

相关文章

管易云与金蝶云星空对接集成仓库查询打通仓库新增

管易云与金蝶云星空对接集成仓库查询打通仓库新增 接通系统&#xff1a;管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌&#xff0c;先后开发了C-ERP、EC-OMS、EC-WMS、E店管家、BBC、B2B、B2C商城网站建设等产品和服务&#xff0c;涵盖电商业务全流程。 对接目…

KEIL5工程改名3步骤

实际上无法另存&#xff0c;通过复制改名方式来间接完成。 如下3个步骤可以完成改名 &#xff08;1&#xff09;直接修改FX3U_STM32F407.uvprojx 文件名称&#xff0c;体现在左上角第一行&#xff0c;Project&#xff1a;xxxx &#xff08;2&#xff09;点开工程option&#…

SEO和SEM的区别与联系:优化和推广的艺术

SEO和SEM的区别与联系&#xff1a;优化和推广的艺术 在当今商业竞争日益激烈的市场环境下&#xff0c;企业对于网站的建设和管理越来越重视。为了吸引更多的潜在客户&#xff0c;企业不得不花费大量时间和资源来进行SEO优化和SEM推广。虽然二者都是提高网站流量的有效方法&…

如何像 Sealos 一样在浏览器中打造一个 Kubernetes 终端?

作者&#xff1a;槐佳辉。Sealos maintainer 在 Kubernetes 的世界中&#xff0c;命令行工具&#xff08;如 kubectl 和 helm&#xff09;是我们与集群交互的主要方式。然而&#xff0c;有时候&#xff0c;我们可能希望能够在 Web 页面中直接打开一个终端&#xff0c;执行这些命…

【前端项目】博客系统(页面设计)

文章目录 一、预期效果二、实现博客列表页三、实现博客正文页四、实现博客登录页五、实现博客编辑页 一、预期效果 代码详情见&#xff1a;gitee链接 &#x1f495; 博客列表页效果 &#x1f495; 博客详情页效果 &#x1f495; 博客登录页效果 &#x1f495; 博客编辑页效果…

2招教你解决:iPhone微信黑名单怎么恢复好友

前几天和男朋友吵架了&#xff0c;一气之下就把他拉黑了。现在想把他恢复回来&#xff0c;但是一直找不到他的聊天对话框&#xff0c;所以想问问大家该怎么将他移出黑名单。 无论是情侣吵架、朋友吵架还是与家人之间有矛盾&#xff0c;大家很容易在怒火的刺激下将对方拉入黑名单…

通过阿贝云免费云服务器部署vue3+vite项目

通过阿贝云免费云服务器部署vue3vite项目 阿贝云&#xff1a;https://www.abeiyun.com 首先访问阿贝云登录后申请服务器&#xff0c;需要关注微信公众号绑定 然后我们给服务器安装操作系统&#xff0c;这里我使用了centos7.6 这里我使用finalshell 连接服务器 我们首先配置ng…

apple pencil的替代品买啥比较好?平价电容笔排行榜

电容笔作为现在当下热销的数码配件&#xff0c;国内许多品牌商也加入其中&#xff0c;导致许多小伙伴购选的难度加大&#xff0c;太多品牌&#xff0c;看得眼花缭乱&#xff0c;更不知道哪些功能比较好&#xff0c;要想在这么多品牌中找到适合自己的&#xff0c;更是难上加难。…

2024年java面试--mysql(3)

系列文章目录 2024年java面试&#xff08;一&#xff09;–spring篇2024年java面试&#xff08;二&#xff09;–spring篇2024年java面试&#xff08;三&#xff09;–spring篇2024年java面试&#xff08;四&#xff09;–spring篇2024年java面试–集合篇2024年java面试–redi…

【前端开发】JS Vue React中的通用递归函数

文章目录 前言一、递归函数的由来二、功能实现1.后台数据2.处理数据3.整体代码 总结 前言 大家好&#xff0c;今天和大家分享一下在前端开发中js&#xff0c;vue&#xff0c;react的通用递归方法。 递归是指一个函数在执行过程中调用自身的行为。通过递归&#xff0c;可以将一…

SpringBoot 基于 MongoTemplate 的工具类

一、 什么是MongoDB MongoDB基于分布式文件存储的数据库。由C语言编写。MongoDB是一个高性能&#xff0c;开源&#xff0c;无模式的文档型数据库&#xff0c;是当前NoSql数据库中比较热门的一种。 他支持的数据结构非常松散&#xff0c;是类似json的bjson格式&#xff0c;因此…

SAP GUI 8.0 SMARTFORMS 使用SCR LEGACY TEXT EDITOR GUI8.00 禁用MSWORD

Smartforms使用WORD作为编辑器是很痛苦的一个事情&#xff0c;不支持拖拽&#xff0c;还很慢&#xff0c;各种不习惯&#xff0c;总之是非常的不舒服&#xff0c;能导致失眠。 在S/4以前的系统&#xff0c;可以使用TCODE I18N或者程序RSCPSETEDITOR或者暴力党直接改表TCP0I来…

SAP-ABAP-底表的创建和应用-01

1、创建底表SE11 给底表起个名字&#xff0c;点击创建 输入描述&#xff0c;选择交付类A&#xff0c;表视图维护选择&#xff1a;X允许显示维护。如果选择N&#xff0c;就不能维护数据了。 点击字段页签,维护字段 维护完自己需要的字段&#xff0c;点击激活&#xff0c;或触发…

Oracle(1):Oracle简介

1 什么是 ORACLE ORACLE 数据库系统是美国 ORACLE 公司&#xff08;甲骨文&#xff09;提供的以分布式数据库为核心的一组软件产品&#xff0c;是目前最流行的客户/服务器(CLIENT/SERVER)或B/S 体系结构的数据库之一。 ORACLE 通常应用于大型系统的数据库产品。 ORACLE 数据…

Java基于SpringBoot+Vue的 4S店车辆管理系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1 简介2 技术栈3 功能总览4 系统设计4.1 系统设计主要功能4.2 数据库设计4.2.1 数据库设计规范4.2…

Numba:加速python代码

通常我们加速python代码是考虑把.py文件编译成.c文件&#xff0c;然后把.c文件编译成.so或.pyd文件&#xff0c;可以参考另一章博文&#xff1a; Cython为py程序加密&提高性能_cythonize_Rnan-prince的博客-CSDN博客 现在我们考虑一种不用将py文件编译成.c文件的方法&…

正中优配:月线macd指标参数设置?

随着投资者长期持有股票的越来越受欢迎&#xff0c;月线MACD目标已成为识别趋势和交易信号的重要东西。但是&#xff0c;许多投资者在设置MACD目标参数时仍然感到困惑。本文将从多个视点剖析&#xff0c;为您解答月线MACD目标参数设置的问题。 什么是MACD目标&#xff1f; MAC…

630. 课程表 III

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;贪心优先队列 写在最后 Tag 【贪心】【优先队列】【数组】 题目来源 630. 课程表 III 题目解读 有 n 门编号从 1 到 n 的课程&#xff0c;有一个数组 courses&#xff0c;其中 courses[i] [duration, lastDay] 表示…

喜报 | 祝贺璞华科技通过CMMI Lv5 等级复审!

喜报频传 璞华科技顺利通过复审认证 再次荣获CMMI5级证书 让我们共同庆祝这一荣耀的时刻 展望更加美好的未来 2023年8月&#xff0c;经Safety Equipment Institute评估&#xff0c;璞华科技顺利通过全球软件领域CMMI五级&#xff08;简称CMMI5&#xff09;复审认证&#xf…

【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

系列文章目录 【Vue】vue2预览显示quill富文本内容&#xff0c;vue-quill-editor回显页面&#xff0c;v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件&#xff0c;在线预览方式一&#xff0c;pdfjs文件包…