跳到主要内容

1 篇博文 含有标签「electron」

查看所有标签

electron学习笔记

· 阅读需 5 分钟
XOne
XOne
小站站长

Webpack + Typescript

npm init electron-app@latest my-new-app -- --template=webpack-typescript

React代码需要，增加jsx支持

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

npm 换成 pnpm 需要 install​

pnpm install @electron-forge/plugin-base @electron-forge/maker-base @types/webpack --save-dev

路由​

pnpm install react-router-dom

less​

pnpm install less less-loader --save-dev

webpack.rules.ts

{
    test: /\.less$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
          importLoaders: 1,
        },
      },
      'less-loader',
    ],
  }

antd pro​

pnpm install antd --save
pnpm install @ant-design/pro-components --save
pnpm install @ant-design/pro-card
pnpm install @ant-design/pro-descriptions
pnpm install @ant-design/pro-field
pnpm install @ant-design/pro-form
pnpm install @ant-design/pro-layout
pnpm install @ant-design/pro-list
pnpm install @ant-design/pro-provider
pnpm install @ant-design/pro-skeleton
pnpm install @ant-design/pro-table
pnpm install @ant-design/pro-utils

编译使用 babel-plugin-import 优化 antd 打包体积

pnpm install babel-plugin-import --save-dev
pnpm install @ant-design/icons --save

数据存储 electron-store

conf 是处理类型报错安装

pnpm install electron-store conf

tsconfig.json中模版默认是："moduleResolution": "node" ，electron-forge似乎很难或者不支持配置"moduleResolution": "node16" 或者其他属性值，这里采用投机取巧的方式配置别名，修复electron-store的类型错误
tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "conf": ["node_modules/conf/dist/source"]
    }
  }
}

设置路径别名

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

webpack.renderer.config.ts

{
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
}

除了 tsconfig.json webpack.renderer.config.ts 配置别名外 还需要修复 eslint 提示

pnpm install eslint-import-resolver-typescript --save-dev

.eslintrc.json

"settings": {
    "import/resolver": {
        "typescript": {}
    }
}

进程通信（‌IPC）‌

使用ipcMain和ipcRenderer模块：‌主进程通过ipcMain模块监听事件，‌渲染进程通过ipcRenderer模块发送事件，‌实现双向通信。‌
使用remote模块：‌允许在渲染进程中直接调用主进程中的模块和方法，‌实现简单的跨进程通信‌。
使用webContents模块：‌通过此模块可以直接向指定的渲染进程发送消息，‌实现通信‌。‌
使用进程之间的共享变量：‌通过建立全局变量或共享内存来实现跨进程通信‌。‌

使用ipcMain和ipcRenderer模块​

渲染进程 -> 主进程
方式一：

// 渲染进程 发出事件
ipcRenderer.send("channel1", 1, 2, 3);
// 主进程 监听事件
ipcMain.on("channel1", (e, a, b, c) => {
    console.log("监听到渲染进程的发出的事件(callback)", a, b, c);
  })

方式二：

// 渲染进程 发出事件
ipcRenderer.invoke("channel2", 1, 2, 3);
// 主进程 监听事件
ipcMain.handle("channel2", (e, a, b, c) => {
    console.log("监听到渲染进程的发出的事件(Promise)", a, b, c)
})

主进程 -> 渲染进程
方式一：

// 渲染进程 监听事件
ipcRenderer.on(channel, handler) 
// 主进程 发出事件
mainWindow.webContents.send("channel3");

网络请求

pnpm install axios
// forge.config.ts 配置Content-Security-Policy 不是配置html中
const config: ForgeConfig = {
  plugins: [
    new WebpackPlugin({
      devContentSecurityPolicy: "default-src 'self'; connect-src *; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
      devServer: {
        //配置代理 解决跨域
        proxy: {
          '/login': {
            target: 'http://localhost:8080', // 另一个API服务器地址
            changeOrigin: true,
          },
        },
      },
    }),
  ],
};


//对应axios拓展文件 requestUtil.ts
const request = axios.create({
  baseURL: 'http://localhost:4000',
});

requestUtil.ts 文件详细如下

import axios from 'axios';

const request = axios.create({
  baseURL: 'http://localhost:4000',
  timeout: 1000,
  headers: {
    'X-Custom-Header': 'foobar',
    // 'Content-Type': 'application/json',
  },
  // withCredentials: true, //保持跨域请求的cookie信息
});

request.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization = token ? `Bearer ${token}` : '';
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  function (response) {
    // 对响应数据做一些处理
    return response;
  },
  function (error) {
    // 对响应错误做处理
    return Promise.reject(error);
  }
);

export default request;