[Electron] Electronとcljsの処理

実装効果:
ここに画像の説明を挿入します
序章:
cljs を使用して電子アプリケーションを作成し、マルチフォームアプリケーションを実現する方法

ClojureScript (CLJS) を使用して Electron アプリケーションを作成し、マルチフォーム機能を実装するには、次の手順に従います。

開発環境をセットアップします。

Node.js をインストールする: Electron は Node.js に依存しているため、Node.js がコンピューターにインストールされていることを確認してください。
Leiningen または Boot (Clojure プロジェクトを使用している場合) をインストールします。
プロジェクトを作成します:

選択したプロジェクトフォルダーに新しい ClojureScript プロジェクトを作成します。好みに応じて、Leiningen または Boot を使用してプロジェクトを作成できます。

Electron 依存関係を追加します。

プロジェクトの project.clj (Leiningen) または build.boot (Boot) ファイルに、依存関係として Electron を追加します。:dependency (Leiningen) または :dependency (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))

電子を開始します:

npm または Yarn を使用して Electron をインストールし、Electron を起動するための起動スクリプト (main.js など) を作成します。これにより、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 を使用して単純なフォームを作成する方法の基本的な例にすぎないことに注意してください。ニーズに応じて、アプリケーションをさらに拡張して、より多くのフォームや機能を含めることができます。

オプション 1:

(セルフテストは実行可能ではありません。メインプロセスで有効になっていない可能性があります@electron/remote)
Clojure は電子クリックを実装して 2 番目のページを展開し、最初のタブページは閉じません

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

上記のコードでは、ライブラリを使用してs モジュールを導入しClojureScript、およびオブジェクトをメソッドを使用して取得します。次に、メソッドを使用して新しいウィンドウを作成します。cljs.nodejsNode.j.remoteElectronBrowserWindowelectron.BrowserWindow

遭遇したバグ
ここに画像の説明を挿入します

「features.isDesktopCapturerEnabled は関数ではありません」というエラーが発生する場合は、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"))

オプション II:

著者：Zobb
リンク：https://juejin.cn/post/7214350677539323964
出典：レアアースナゲット

Nuggets author 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>

オプション 1:

オプション II:

おすすめ