Electron开发实战之05-build

来源:简书 分类: 文章浏览史 发布时间:2021-09-08 15:29:00 最后更新:2021-09-08 浏览:165
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-09-08 15:29:00

源码 j源码 j-step-c5相关视频

main/index.js


// app: 控制你的应用程序的事件生命周期
// BrowserWindow: 创建和控制浏览器窗口
import { app, BrowserWindow } from 'electron'
import * as path from 'path'
import { format as formatUrl } from 'url'

// 关闭安全警告
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true

// 保持窗口对象的全局引用,如果没有,
// 则当JavaScript对象被垃圾回收时,窗口将自动关闭
let mainWindow = null

const isDevelopment = process.env.NODE_ENV !== 'production'

// 开发模式
const makeDevelopmentMode = win => {
  win.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
  win.setBounds({
    x: 0,
    y: 0,
    width: 800,
    height: 600
  })
  win.webContents.openDevTools()
}

// 生产模式
const makeProductMode = win => {
  win.loadURL(formatUrl({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file',
    slashes: true
  }))
  win.setResizable(false) // 禁止用户改变窗口大小
}

const createMainWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 400,
    height: 600
  })

  // 当 window 被关闭,这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 与此同时,你应该删除相应的元素。
    mainWindow = null
  })

  // 开发模式
  if (isDevelopment) {
    makeDevelopmentMode(win)
    return win
  }

  // 生产模式
  makeProductMode(win)
  return win
}

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上,当单击dock图标并且没有其他窗口打开时,
  // 通常在应用程序中重新创建一个窗口。
  if (mainWindow === null) {
    mainWindow = createMainWindow()
  }
})

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', () => {
  mainWindow = createMainWindow()
})

// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

安装依赖

  • bash
yarn add electron-builder -D

package.json

如果要发布到指定的平台,可以在命令后追加相应的参数。如: --mac --win

"scripts": {
  "build": "electron-webpack && electron-builder"
}
  • bash
yarn build

最后,我们在 dist 文件夹中会得到可执行文件和安装包

上一节 Electron开发实战之04-Hello World
目录
下一节 Electron开发实战之06-vue

php技术微信