Hello_Electron

发布时间:

更新时间:

官方文档挺详细，在此记录创建空模板的主要操作内容，不同的技术方案会有不同的初始化方法，比如结合ts，结合react等，此时一般去看看那边的技术文档。这里只介绍官方的基本初始化步骤。

前提：安装nodejs

  1. 改为国内镜像（设置一次即可），现在十有八九下载失败或很慢。
    npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

  2. 打开终端或用vscode的终端，初始化package.json 。
    npm init

  3. 修改package.json里的入口
    "main":"main.js" 或者引用min版本的js

  4. 安装electron
    npm i electron -D 或者临时指定镜像源
    npm i electron -D --ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

  5. 创建入口文件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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    const { app, BrowserWindow, ipcMain } = require('electron')
    const path = require('path')

    function createWindow () {
      const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
        //   preload: path.join(__dirname, 'preload.js')
        }
      })

      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()
      }
    })

    //覆盖原生js的alert
    ipcMain.on("alert", (e, args) => {
      e.preventDefault();
      dialog.showMessageBoxSync(win, { type: "info", title: args[0], message: args[1] });
    });

若使用TypeScripts，创建tsconfig.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    //"strictNullChecks": true,
    "strict": false,
    //"allowJs": true,
    "removeComments": true,
    "moduleResolution": "node",
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "include": ["src"]
}

完整的配置选项可以用命令初始化个文件
tsc --init
若提示没有tsc命令，则安装TypeScript，这个可以全局安装
npm i typescript -g

本文标题: Hello_Electron

本文作者: Ariaya

发布时间: 2023-04-07

原始链接: Hello_Electron

许可协议: 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

请吃小笼包
支付宝 | Alipay
微信 | Wechat
≡