个人文档库

Appearance

Read It 开发日志 002 ​

通过前面的学习我们得到了一个简单的客户端程序，里面展示了vue3的项目生成的页面。今天我们继续开发Read It 项目，添加一些基础配置。

一、开发准备 ​

1、知识点 ​

  • 依赖库
    • electron-win-state
    • path
  • Electron
    • webContents.openDevTools()
    • Preload

二、打开浏览器控制台 ​

javascript
win.webContents.openDevTools();
操作步骤
  • 在main.js里createWindow函数里设置打开浏览器控制台.

image-20230824205644891

  • 设置成功后，能看到浏览器控制台

image-20230824205424025

三、记录窗口大小 ​

我们前面写的窗口的宽高是固定的 1000*800 这样每次启动都是这个位置和大小,对于用户来说很不友好.所以为了提高用户体验我们用electron-win-state插件来实现,用户关闭窗口是什么位置和大小,再次打开还是一样的.

1、安装 electron-win-state 依赖 ​

shell
yarn add electron-win-state -D // "electron-win-state": "^1.1.22"

2、导入依赖 ​

在main.js中导入

javascript
//引入插件    作用：记录窗口的位置大小
const WinState = require('electron-win-state').default;

//创建窗口
const createWindow = () => {
    // 设置默认窗口大小
    const winState = new WinState({
        defaultWidth: 1000,
        defaultHeight: 800,
    });

    const win = new BrowserWindow({
        ...winState.winOptions,
    });

    //将窗口位置大小存起来
    winState.manage(win);
};
main.js 完整代码
javascript
// 我们从 electron 里导出 app 和 BrowserWindow
//app应用模块
//BrowserWindow 浏览器串口模块
const {app, BrowserWindow} = require('electron');
//引入插件    作用：记录窗口的位置大小
const WinState = require('electron-win-state').default;

//创建窗口
const createWindow = () => {
    // 设置默认窗口大小
    const winState = new WinState({
        defaultWidth: 1000,
        defaultHeight: 800,
    });

    const win = new BrowserWindow({
        ...winState.winOptions,
        // width: 1000, // 窗口默认宽度
        // height: 800, // 窗口默认高度
    });

    //将窗口位置大小存起来
    winState.manage(win);

    // 给窗口装载页面
    win.loadURL('http://localhost:5173/');
    // win.loadFile('./renderer/index.html')

    //自动打开发开工具
    win.webContents.openDevTools();

};

//应用就绪，可以装载窗口了
app.whenReady().then(() => {
    createWindow();
});

注意

完成上述代码就可手动拖拽窗口位置和大小，关闭窗口后重新打开会是上次的位置和大小，代码改完记得重启项目不然有可能不生效。😊别问我咋知道的。

四、配置 preload ​

预加载脚本/桥接文件

因为渲染程序和主程序直接传递消息有严重的安全隐患，所以要通过这里的’桥’文件当工具人.

image-20230825124713281

1、创建preload/index.js ​

在跟目录下创建 文件夹 preload 然后在里面创建 index.js

/preload/index.js

javascript
console.log(0);

2、导入 preload/index.js ​

在main.js中导入

javascript
const {resolve} = require('path');
//创建窗口
const createWindow = () => {
    const win = new BrowserWindow({
        webPreferences: {
            // 在页面运行其他脚本之前预先加载指定的脚本
            // 桥接文件
            preload: resolve(__dirname, './preload/index.js'),
        },
    });
};
main.js 完整代码
javascript
// 我们从 electron 里导出 app 和 BrowserWindow
//app应用模块
//BrowserWindow 浏览器串口模块
const {app, BrowserWindow} = require('electron');
const {resolve} = require('path');
//引入插件    作用：记录窗口的位置大小
const WinState = require('electron-win-state').default;

//创建窗口
const createWindow = () => {
    // 设置默认窗口大小
    const winState = new WinState({
        defaultWidth: 1000,
        defaultHeight: 800,
    });

    const win = new BrowserWindow({
        ...winState.winOptions,
        // width: 1000, // 窗口默认宽度
        // height: 800, // 窗口默认高度

        webPreferences: {
            // 在页面运行其他脚本之前预先加载指定的脚本
            // 桥接文件
            preload: resolve(__dirname, './preload/index.js'),
        },
    });

    //将窗口位置大小存起来
    winState.manage(win);

    // 给窗口装载页面
    win.loadURL('http://localhost:5173/');
    // win.loadFile('./renderer/index.html')

    //自动打开发开工具
    win.webContents.openDevTools();

};

//应用就绪，可以装载窗口了
app.whenReady().then(() => {
    createWindow();
});

3、控制台显示 0 ​

image-20230824220446655