electron 学习第一天开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

electron 学习

初始化及安装

mkdir my-electron && cd my-electron
npm init
npm install electron

新建一个 my-electron 文件
npm 初始化
安装 electron 依赖

编写第一个 electron

//main.js
const { app, BrowserWindow } = require("electron");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile("index.html");
};

app.whenReady().then(() => {
  createWindow();
});

app 它控制应用的事件生命周期。
BrowserWindow 类暴露了各种方法来修改应用窗口的外观和行为

<!-- index.html -->
<!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>我的第一个ElectronApp</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>👋</p>
  </body>
</html>

启动应用

在 pagejson 里加入以下代码

"main": "main.js",
"scripts": {
    "start": "electron .",
  },

npm start//启动应用

预加载脚本

预加载脚本会在渲染器的网页加载之前注入。你想向渲染器加入需要特殊权限的功能，你可以通过 contextBridge 接口定义全局对象。新建一个 preload.js const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('msg', { globalMsg: () => '我是一个全局变量', }) 在 mian.js 中注入

//main.js
 webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
 },

//render.js
let btn = document.getElementById('btn')
function showMsg(){
    alert(msg.globalMsg())
}
btn.onclick = showMsg

<!-- index -->
 <button id="btn">展示全局变量globalMsg</button>
 <script src="./render.js"></script>

效果图

在进程之间通信 Electron 分为主进程和渲染进程

这意味着主进程不能直接操作渲染进程，渲染进程无法直接操作nodejs的相关接口
- Electron提供了ipcMain 模块和 ipcRenderer 模块来进行进程间通信

//main.js
ipcMain.handle('mainFun', () => {
    console.log('dosomething')
})

//preload.js
contextBridge.exposeInMainWorld('doFun', {
    fun: () => ipcRenderer.invoke('mainFun'),
})

//render.js
doFun.fun()

效果图

打包应用

npm install --save-dev @electron-forge/cli
npx electron-forge import

执行完脚本后Forge 会将一些脚本添加到package.json 文件中

"scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
}

打包执行npm run make

package.json中的author、description等字段需要填写，否则打包会报错。

结语

学习electron的第一天。加油！！！