[Electron] Processing of electron and cljs

Implementation effect:

Preface:
How to use cljs to write electron applications to achieve multi-form applications

To write an Electron application using ClojureScript (CLJS) and implement multi-form functionality, you can follow these steps:

Set up the development environment:

Install Node.js: Make sure Node.js is installed on your computer as Electron depends on it.
Install Leiningen or Boot (if you are using a Clojure project).
Create project:

Create a new ClojureScript project in the project folder of your choice. You can create projects using Leiningen or Boot, depending on your preference.

Add Electron dependency:

In your project's project.clj (Leiningen) or build.boot (Boot) file, add Electron as a dependency. You can add the following in the :dependencies (Leiningen) or :dependencies (Boot) section:

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

These dependencies include Reagent (for building user interfaces) and cljsjs/electron (for Electron integration).

Write CLJS code:

Create ClojureScript files to write your Electron application logic. You can use Reagent to build user interfaces, use the library provided by cljsjs/electron to manage Electron forms, etc.

Sample code:

(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))

Start Electron:

Install Electron using npm or yarn, and then create a startup script (such as main.js) to start Electron, which loads the ClojureScript compiled code. Make sure you set up Electron's main file correctly in your script.

Example main.js:

const {
    
     app, BrowserWindow } = require('electron');

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

Compile and run the application:

Compile your CLJS code using a ClojureScript compiler (such as lein cljsbuild or boot cljs), and then run the Electron application.

Create multiple forms:

You can use Electron's API to create multiple forms in your application. For example, you can create a new window by calling new BrowserWindow() in the appropriate event handler.

Note that this is just a basic example of how to create a simple form using ClojureScript and Electron. Depending on your needs, you can further extend the application to include more forms and functionality

Option One:

(My self-test is not executable, maybe it is not enabled in the main process @electron/remote)
Clojure implements electron click to expand the second page, and the first tab page is not closed

;;引入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))

In the above code, the library is used ClojureScriptto cljs.nodejsintroduce Node.jthe s module, and the and objects are obtained using .remotethe method . Then we create a new window using the method.ElectronBrowserWindowelectron.BrowserWindow

Bugs encountered

Encountering the error "features.isDesktopCapturerEnabled is not a function" may be because your version of Electron is incompatible or not configured correctly.
solution

(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"))

Option II:

Author: Zobb
Link: https://juejin.cn/post/7214350677539323964
Source: Rare Earth Nuggets

Write cljs
main process main.js based on the content of Nuggets author 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")
    })
})

Rendering process renderer.js

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

Main window page newWindow.html

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