学习electron第一天

无名指的等待478
95 阅读5分钟

学习electron第一天

使用最简单的代码做一个桌面应用

  1. 第一步需要初始化一个项目pnpm init

  2. 安装electron-----------------------pnpm add -D electron

  3. 第三步配置package.json文件

  4. 在scripts中添加命令"dev":"electron ."

  5. 查看package.json文件可以看出main对应会有一个js文件,初始化应是index.js，但是我会习惯改为main.js,接下来创建这个文件

  6. 接下来就可以在主进程中渲染代码了

    //导入窗口模板
const { BrowserWindow, app } = require("electron");

//创建窗口
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
       // 是否置顶
    alwaysOnTop: true,
    // 打开软件之后希望距离左边屏幕多少像素
    x: 1500,
    //打开软件之后希望距离上边屏幕多少像素
    y: 100,
  });
  //打开哪一个网址,这里是一个听歌网站,若有需要请修改地址就好
  mainWindow.loadURL("https://m2.trtst.com/index");
});

  7. 接下来运行npm run dev或者pnpm dev都可以打开这个软件

如何打开自己的网站

//第一步在根目录下面创建Index.html
//第二部就可以使用了代码如下
//导入窗口模板
const { BrowserWindow, app } = require("electron");
const path = require("path");
//创建窗口
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    // 是否置顶
    alwaysOnTop: true,
    // 打开软件之后希望距离左边屏幕多少像素
    x: 1500,
    //打开软件之后希望距离上边屏幕多少像素
    y: 100,
  });
  // 打开一个网站
  // mainWindow.loadURL("https://m2.trtst.com/index");
  // 打开html文件
  mainWindow.loadFile(path.resolve(__dirname, "index.html"));
});

如何区分主进程和渲染进程

  1. 此时package.json里面的main配置的js就是主进程

  2. 渲染进程是浏览器执行的js,你可以在html文件中使用script标签进行包裹,此时的script就是渲染进程,也可以将渲染进程打包成一个js文件,然后使用script标签引入

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>day01</title>
  </head>
  <body>
    <h1>这里便是我的app内容</h1>
	//引入外部的script文件
    <script src="./js/require.js"></script>
  </body>
</html>

  3. require.js文件内容如下

  4. alert("333");
console.log("打开了");

    渲染进程是使用的浏览器中的js语言，但是主进程使用的是node.js,因此需要区分清除主进程和渲染进程,比如主进程中不可以使用dom操作,但是渲染进程可以

解决每次修改代码还得重新运行终端问题

此时就需要修改package.json文件中的script中的dev了

** "dev": "nodemon --exec electron ."**--------------接下来运行dev就可以在主进程中修改代码,它可以自动重新编译打开软件了

但是此时还有一个问题就是修改html并不会重新编译打开

接下来需要在根目录下创建nodemon.json文件

//将下面的代码添加到nodemon.json文件中
{
  "ignore": ["node_modules", "dist"],
  "colours": true,
  "verbose": true,
  "restartable": "rs",
  "watch": ["*.*"],
  "ext": "html,js"
}

接下里重新启动一个项目就可以了,之后就会发现渲染进程更改代码也会发生改变

解决苹果客户端关闭软件但是还是会在后台运行的情况

//导入窗口模板
const { BrowserWindow, app } = require("electron");
const path = require("path");
//创建窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    // 是否置顶
    alwaysOnTop: true,
    // 打开软件之后希望距离左边屏幕多少像素
    x: 1200,
    //打开软件之后希望距离上边屏幕多少像素
    y: 100,
  });
  // 打开一个网站
  // mainWindow.loadURL("https://m2.trtst.com/index");
  // 打开文件的同时打开控制台
  mainWindow.webContents.toggleDevTools();
  // 打开html文件

  mainWindow.loadFile(path.resolve(__dirname, "index.html"));
};

app.whenReady().then(() => {
  createWindow();
  app.on("window-all-closed", () => {
    //当窗口全部关闭的时候触发的事件
    //process.platform判断当前操作系统是不是苹果系统,如果是的话默认不会关闭后台
    if (process.platform != "darwin") app.quit();
  });
  //当窗口打开时触发的事件
  app.on("activate", () => {
    createWindow();
  });
});

解决css样式问题

//下面的代码是main.js的代码
//导入窗口模板
const { BrowserWindow, app } = require("electron");
const path = require("path");
//创建窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 300,
    height: 300,
    // 是否置顶
    alwaysOnTop: true,
    // 打开软件之后希望距离左边屏幕多少像素
    x: 1200,
    //打开软件之后希望距离上边屏幕多少像素
    y: 100,
    // 是否取消顶部
    frame: false,
    // 是否将窗口透明化
    transparent: true,
  });
    //设置缩放比例是1
      mainWindow.setAspectRatio(1);
  // 打开一个网站
  // mainWindow.loadURL("https://m2.trtst.com/index");
  // 打开文件的同时打开控制台
  // mainWindow.webContents.toggleDevTools();
  // 打开html文件


  mainWindow.loadFile(path.resolve(__dirname, "index.html"));
};

app.on("window-all-closed", () => {
    //当窗口全部关闭的时候触发的事件
    //process.platform判断当前操作系统是不是苹果系统,如果是的话默认不会关闭后台
    if (process.platform != "darwin") app.quit();
  });
  //当窗口打开时触发的事件
  app.on("activate", () => {
    createWindow();
  });
});



接下来是html和css
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>day01</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      /* 设置为可以鼠标左键可以拖动 */
      html {
        -webkit-app-region: drag;
      }
      /* 设置鼠标左键可以拖动 */
      textarea {
        -webkit-app-region: no-drag;
      }
      body {
        width: 100vw;
        height: 100vh;
      }
      div {
        height: 100vh;
        background-color: #ff641e;
        border-radius: 50%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div></div>
    
  </body>
</html>

vite脚手架和electron结合

  1. 首先创建一个vue项目npm init vue@latest

  2. 安装electron pnpm add -D electron

  3. 安装concurrently，这个包是为了可以同时启动多个服务----------------------安装命令pnpm add concurrently

  4. 将package.json文件里面的dev设置成为 "dev": "concurrently "vite" "nodemon --exec electron . "",

  5. 给定主线程执行文件package中的main设置为main.cjs

  6. main.js代码

    //第一步在根目录下面创建Index.html
//第二部就可以使用了代码如下
//导入窗口模板
const { BrowserWindow, app } = require("electron");
//创建窗口
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    // 是否置顶
    alwaysOnTop: true,
    // 打开软件之后希望距离左边屏幕多少像素
    x: 1500,
    //打开软件之后希望距离上边屏幕多少像素
    y: 100,
  });
  // 打开一个网站
  mainWindow.loadURL("http://localhost:5173/");
});

  7. 运行pnpm dev

解决网络安全处理

当没有配置安装策略时，Electron会报出警告，你可以在渲染进程的开发者工具中查看到。

CSP

内容安全策略(CSP) 是应对跨站脚本攻击和数据注入攻击的又一层保护措施。 我们建议任何载入到Electron的站点都要开启。

定义方式

访问内容均来自项目资源

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
avatar
文章
阅读
粉丝