electron 框架 快速入門

簡介

開發環境

創建項目

創建文件夾、初始化項目、安裝依賴

    mkdir my-electron-app && cd my-electron-app

    npm init -y

    npm i --save-dev electron

注意:

# 若下載不成功 可創建 .npmrc文件 => 指定下載源:
            registry=https://registry.npm.taobao.org
            electron_mirror="https://npm.taobao.org/mirrors/electron/"

創建主進程

const { app, BrowserWindow } = 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()
  }
})

創建子程序

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span></span>,
        Chromium <span></span>,
        and Electron <span></span>.
    </p>
</body>
</html>

定義預加載腳本

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

修改您的 package.json 文件

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

應用程序生成 安裝包

npm i -D electron-builder

# 在下面指定構建配置package.json:
"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
}
"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}


npm run dist // 生成安裝包
npm run pack // 生成測試包
# 安裝electron-builder
vue add electron-builder

# 預覽
npm run electron:serve

# npm命令打包
npm run electron:build

參考資料

electron

electron-builder

cnpm 鏡像源

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://juejin.cn/post/6956835681238777887