Electron入门

换源

淘宝今年刚刚换源了，结果怎么设置都报错，所以干脆使用官方源。

Windows下输入：

1
npm config edit

添加：

1
2
3
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
registry=https://registry.npmmirror.com

运行Hello World

新建一个项目文件夹，在该文件夹下：

1
npm init

“package.json”文件中写了一些该工程的基本信息，入口点默认“index.js”，如果看着别扭可以自己改成“main.js”。

然后开始在该工程文件夹下下载Electron组件：

1
npm install electron --save-dev

打开“package.json”的“scripts”字段下加上：

1
"start":"electron .",

在该工程文件夹下新建“index.js”文件，输入：

1
console.log("Hello World")

再在该工程文件夹下打开终端，运行：

1
npm run start

打包

填写“package.json”中的Author和Description项，然后下载依赖：

1
2
3
npm install --save-dev @electron-forge/cli
npx electron-forge import
npm install --save-dev @electron-forge/plugin-fuses

打包：

1
npm run make

在“out”文件夹下有个文件夹。

网页版

新建“index.html”，这是要render的页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
        />
        <meta
            http-equiv="X-Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
        />
        <title>Hello from Electron renderer!</title>
    </head>
    <body>
        <h1>Hello from Electron renderer!</h1>
        <p>👋</p>
    </body>
</html>

然后“main.js”里这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const{app,BrowserWindow}=require('electron/main')
const createWindow=()=>{
    const win=new BrowserWindow({
        width:800,
        height:600
    })
    win.loadFile('index.html')
}
app.whenReady().then(()=>{
    createWindow()
    app.on('activate',()=>{
        if(BrowserWindow.getAllWindows().length===0){
            createWindow()
        }
    })
})
app.on('window-all-closed',()=>{
    if(process.platform!='darwin'){
        app.quit()
    }
})

网页渲染方法

需要使用预加载脚本的方法，以下为“main.js”修改后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const{app,BrowserWindow}=require('electron/main')
const path=require('node:path')
const createWindow=()=>{
    const win=new BrowserWindow({
        width:800,
        height:600,
        webPreferences:{
            preload:path.join(__dirname,'preload.js')
        },
        frame:false //无chrome边框模式 不想加可以删掉
    })
    win.loadFile('index.html')
}
app.whenReady().then(()=>{
    createWindow()
    app.on('activate',()=>{
        if(BrowserWindow.getAllWindows().length===0){
            createWindow()
        }
    })
})
app.on('window-all-closed',()=>{
    if(process.platform!='darwin'){
        app.quit()
    }
})

新建一个预加载脚本“preload.js”，内容例如暴露versions变量：

1
2
3
4
5
6
const{contextBridge}=require('electron/renderer')
contextBridge.exposeInMainWorld('versions',{
    node:()=>process.versions.node,
    chrome:()=>process.version.chrome,
    electron:()=>process.versions.electron
})

新建渲染器“renderer.js”，渲染ID为info的标签内容：

1
2
const information=document.getElementById('info')
information.innerText=`This app is using Chrome (v${window.versions.chrome()}),Node .js (v${window.versions.node()}), and Electron (v${window.versions.electron()})`

然后在主页面加上ID为info的标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
        />
        <meta
            http-equiv="X-Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
        />
        <title>Hello from Electron renderer!</title>
    </head>
    <body>
        <h1>Hello from Electron renderer!</h1>
        <p>👋</p>
        <p id="info"></p>
    </body>
    <script src="./renderer.js"></script>
</html>

引入Bootstrap

安装模块：

1
npm install bootstrap@5.3.0-alpha1

修改“index.html”：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
        />
        <meta
            http-equiv="X-Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
        />
        <title>Hello from Electron renderer!</title>
        <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
        <h1>Hello from Electron renderer!</h1>
        <p>👋</p>
        <div>
            <button id="openFile" class="btn btn-success">Open File</button>
            <button id="sendMsg" class="btn btn-warning">Send Message (Open File)</button>
        </div>
    </body>
    <script>
        window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');
        require('./node_modules/bootstrap/dist/js/bootstrap.min.js');
    </script>
</html>