【Electron】electron与cljs的处理

这篇具有很好参考价值的文章主要介绍了【Electron】electron与cljs的处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现效果:
【Electron】electron与cljs的处理,clojurejs,electron,electron,javascript,前端
前言:
如何用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
【Electron】electron与cljs的处理,clojurejs,electron,electron,javascript,前端

遇到"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文章来源地址https://www.toymoban.com/news/detail-732602.html

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

到了这里,关于【Electron】electron与cljs的处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 纯前端ELECTRON+VUE+FFMPEG实现多路播放RTSP流

    近期有项目需求前端播放rtsp视频流,项目是由electron+vue3搭建,没有后端,因此需要在前端实现解析rtsp流及播放,经过多方考察最后选用了ffmpeg+jsmpeg方案实现,具体实现是参考了@牧也の旅行 大佬的这篇文章 原文地址 实现的,感谢@牧也の旅行 一直在回复我的各种小白问题,

    2024年02月04日
    浏览(38)
  • 银河麒麟v10安装前端环境(Node、vue、Electron+vite)

    此帖子所提到的所有依赖包都是基于银河麒麟v10真机的arm架构包,如果是在windows上的虚拟机上 把依赖包换成x64的包即可,方法步骤都是一样 一.node安装 原始方法安装(建议用第二种nvm方法,因为更简单): 1.1nodejs官网下载基于arm架构的包 1.1.1或者打开终端使用wget方式安装

    2024年02月02日
    浏览(44)
  • 小笔记:Electron中关联格式、处理文件、创建链接的相关编程

    Electron 笔记:Electron中关联格式、处理文件、创建链接的相关编程 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/131041514 【介绍】:本文介绍关于在Electron中绑定文件格式、在菜单

    2024年02月09日
    浏览(37)
  • web前端项目使用electron打包成跨平台桌面端程序(Windows)

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 在使用Electron进行开发之前,您需要安装 Node.js。 我们建

    2024年02月16日
    浏览(83)
  • 在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式

    在线办公协同办公过程中,对于老板给出的文档修改,如果在错别字方面都要自己一个个字去看的话也太浪费时间了,其实word上就有一个修订模式,可以帮助大家高效完成文档的修改,在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式? 第一步:下

    2024年01月21日
    浏览(53)
  • 前端10年进化 Node.js、模块化、CommonJS、AMD、CMD、Webpack、Vue-cli、Electron-vue

    模块化的概念在软件开发领域已经存在很长时间,但在 JavaScript 中的模块化发展相对较晚。以下是对您提出的问题的回答: 提出时间:JavaScript 中的模块化概念相对较早地提出于 CommonJS 规范。CommonJS 是一种 JavaScript 模块化规范,最早在 2009 年由 Ryan Dahl 和其他社区成

    2024年02月11日
    浏览(79)
  • Electron:Electron整合vue

    主要思路:分别启动两个进程,一个是vue,另一个是electron。然后在electron通过loadURL去引入vue的主页面。但怎么才能将这两个项目整合成一键启动呢?请看后文! TODO

    2024年01月19日
    浏览(39)
  • 正确安装Electron、Electron-quick-start和Electron Forge

    Electron Forge引用了Squirrel.windows项目,这导致Electron Forge生成的安装包只能安装在本地用户帐户中。 Or maybe you’re good at reinvent the wheel and can read this part of the documentation. ElectronForge文档 - 扩展 - 制作工具 Squirrel.Windows的Github议题 - Choosing install directory 打开命令行工具,输入 如果正

    2024年02月06日
    浏览(44)
  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(37)
  • electron、electron-forge 安装

    npm修改了registry,安装依旧无效 使用cnpm 倒是可以解决,但是 npx electron-forge import 中 Installing dependencies 使用的是npm 给出一次性解决方案: step1:切换npm的下载源,可以使用nrm 进行管理,有很多写的了,就不赘述了。 或者直接修改 (ps:如果你还想修改回来,可以记录一下现

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包