Electron

已于 2024-01-10 17:24:36 修改
阅读量326 收藏 8
点赞数 9
文章标签： electron 前端 vue.js
于 2024-01-10 17:20:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qin_jiangshan/article/details/135508306
版权

1、安装 （过程有点慢，耐心等待；建议替换yarn源或翻墙）

yarn add electron --dev
yarn add electron-devtools-installer --dev
yarn add vue-cli-plugin-electron-builder

2、在src目录下新建 background.ts,作为electron入口

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import path from 'path'
//import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])
let win: any = null
async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    useContentSize: true,
    width: 1220,
    height: 640,
    minWidth: 1220,
    minHeight: 640,
    //transparent: true, //窗口透明  设置后还原窗口win.restore()无效
    //backgroundColor: '#000', //背景颜色
    title: '知乎者也', //标题
    movable: true,
    webPreferences: {
      // Required for Spectron testing
      // enableRemoteModule: !!process.env.IS_TEST,
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env
        .ELECTRON_NODE_INTEGRATION as unknown as boolean,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    }
  })
  if (process.env.NODE_ENV === 'production') {
    //正式
    createProtocol('app')
    win.loadURL('app://./index.html') // Load the index.html when not in development
    //win.webContents.openDevTools()
  } else {
    //开发
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  }
  // 当应用所有窗口关闭要做的事情
  win.on('closed', () => {
    win = null
  })
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  //外网 加载慢 去掉
  //   if (isDevelopment && !process.env.IS_TEST) {
  //     // Install Vue Devtools
  //     try {
  //       await installExtension(VUEJS3_DEVTOOLS)
  //     } catch (e) {
  //       console.error('Vue Devtools failed to install:', e.toString())
  //     }
  //   }
  if (win === null) createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

3、修改package.json文件，新增入口属性以及运行命令

"scripts": {
        "test:unit": "vue-cli-service test:unit",
        "lint": "vue-cli-service lint",
        "web:serve": "vue-cli-service serve --open",
        "web:build": "vue-cli-service build",
        "electron:build": "vue-cli-service electron:build",
        "electron:serve": "vue-cli-service electron:serve",
        "postinstall": "electron-builder install-app-deps",
        "postuninstall": "electron-builder install-app-deps"
    },

4、根目录下新建vue.config.js 用与保存打包配置

module.exports = {
    runtimeCompiler: true,
    publicPath: './',
    //electron 13 把"build":{}从package.json移除，在vue.config.js里写
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            builderOptions: {
                productName: 'zhzy', //打包名称
                appId: 'cn.zhzy.app',
                copyright: 'Copyright © 2022',
                publish: [
                    {
                        provider: 'generic',
                        url: ''
                    }
                ],
                nsis: {
                    allowToChangeInstallationDirectory: true,
                    createDesktopShortcut: true,
                    createStartMenuShortcut: true,
                    shortcutName: 'zhzy',
                    perMachine: true,
                    oneClick: false
                },
                dmg: {
                    contents: [
                        {
                            x: 410,
                            y: 150,
                            type: 'link',
                            path: '/Applications'
                        },
                        {
                            x: 130,
                            y: 150,
                            type: 'file'
                        }
                    ]
                },
                //productName 包名称 version 包版本(package.json)  ext后缀
                mac: {
                    icon: 'public/icons/icon.icns',
                    artifactName: '${productName}_setup_${version}.${ext}'
                },
                win: {
                    icon: 'public/icons/icon.ico',
                    artifactName: '${productName}_setup_${version}.${ext}'
                },
                linux: {
                    icon: 'public/icons',
                    artifactName: '${productName}_setup_${version}.${ext}'
                }
            }
        }
    }
}

隐藏菜单栏

在background.ts增加

autoHideMenuBar: true, //是否隐藏菜单栏

无边框模式

1、在background.ts增加

 frame: false, 
无边框   
不使用无边框模式 
需要屏蔽掉  
并将router/index.ts 路由中的替换 
 原始边框路由

background.ts增加

//登录窗口最小化
ipcMain.on('app-min', function () {
  win.minimize()
})
//登录窗口最大化、还原窗口
ipcMain.on('app-max', function () {
  if (win.isMaximized()) {
    win.restore()
  } else {
    win.maximize()
  }
})
ipcMain.on('app-close', function () {
  //win.close() //在设置无边框后失效
  win = null //主窗口设置为null 防止内存溢出
  app.exit() //直接退出应用程序
})

在src目录下新建proload.ts

import { ipcRenderer } from 'electron'
(window as any).ipcRenderer = ipcRenderer

在background.ts webPreferences新增

 preload: path.join(__dirname, 'preload.ts'), //预加载

版本升级

yarn add electron-updater

src目录下新建upgrade.ts

import { ipcMain } from 'electron'
import { autoUpdater } from 'electron-updater'
let mainWindow: any = null
export function upgradeHandle(window: any, feedUrl: any) {
  const msg = {
    error: '检查更新出错 ...',
    checking: '正在检查更 ...',
    updateAva: '检测到新版本 ...',
    updateNotAva: '已经是最新版本 ...',
    downloadProgress: '正在下载新版本 ...',
    downloaded: '下载完成，开始更新 ...'
  }
  mainWindow = window
  autoUpdater.autoDownload =
    process.env.VUE_APP_UPGRADE === 'automatic' ? true : false //true 自动升级 false 手动升级
  //设置更新包的地址
  autoUpdater.setFeedURL(feedUrl)
  //监听升级失败事件
  autoUpdater.on('error', function (message: any) {
    sendUpdateMessage({
      cmd: 'error',
      title: msg.error,
      message: message
    })
  })
  //监听开始检测更新事件
  autoUpdater.on('checking-for-update', function (message: any) {
    sendUpdateMessage({
      cmd: 'checking-for-update',
      title: msg.checking,
      message: message
    })
  })
  //监听发现可用更新事件
  autoUpdater.on('update-available', function (message: any) {
    sendUpdateMessage({
      cmd: 'update-available',
      title: msg.updateAva,
      message: message
    })
  })
  //监听没有可用更新事件
  autoUpdater.on('update-not-available', function (message: any) {
    sendUpdateMessage({
      cmd: 'update-not-available',
      title: msg.updateNotAva,
      message: message
    })
  })
  // 更新下载进度事件
  autoUpdater.on('download-progress', function (message: any) {
    sendUpdateMessage({
      cmd: 'download-progress',
      title: msg.downloadProgress,
      message: message
    })
  })
  //监听下载完成事件
  autoUpdater.on(
    'update-downloaded',
    function (
      event: any,
      releaseNotes: any,
      releaseName: any,
      releaseDate: any,
      updateUrl: any
    ) {
      sendUpdateMessage({
        cmd: 'update-downloaded',
        title: msg.downloaded,
        message: {
          releaseNotes,
          releaseName,
          releaseDate,
          updateUrl
        }
      })
      //退出并安装更新包
      autoUpdater.quitAndInstall()
    }
  )
  //接收渲染进程消息，开始检查更新
  ipcMain.on('checkForUpdate', () => {
    //执行自动更新检查
    autoUpdater.checkForUpdates()
  })
  ipcMain.on('downloadUpdate', () => {
    // 下载
    autoUpdater.downloadUpdate()
  })
}
//给渲染进程发送消息
function sendUpdateMessage(text: any) {
  mainWindow.webContents.send('message', text)
}

background.ts增加

import { upgradeHandle } from '@/upgrade'
if (process.env.NODE_ENV === 'production') {
    //正式
    createProtocol('app')
    win.loadURL('app://./index.html') // Load the index.html when not in development
    if (process.env.VUE_APP_UPLOAD !== '')
      upgradeHandle(win, process.env.VUE_APP_UPLOAD) //检测版本更新
    //win.webContents.openDevTools()

通过.env.development/.env.production设置 开发与正式环境

# 配置生产环境 系统变量 建议配置一些 常用 或者 数据较单一的配置
NODE_ENV=production
# 版本号  应与package.json version 保持统一
VUE_APP_VERSION=0.1.0
# 升级地址
VUE_APP_UPLOAD= http://192.168.1.51:8011/upload/
# 升级方式 automatic 自动升级 manual 手动升级
VUE_APP_UPGRADE=manual

APP.vue实现

<!--
 * @Description: 
 * @Author: lanchao
 * @Date: 2022-04-14 11:21:23
 * @LastEditTime: 2022-05-28 17:38:12
 * @LastEditors: lanchao
 * @Reference: 
-->
<template>
  <div id="app">
    <router-view />
    <!--异步组件-->
    <Suspense v-if="isUpgrade">
      <template #default>
        <UpgradeComponent />
      </template>
      <template #fallback>
        <h1>检查更新 ...</h1>
      </template>
    </Suspense>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { defineAsyncComponent } from 'vue'
@Options({
  components: {
    //异步加载组件
    UpgradeComponent: defineAsyncComponent(
      () => import('@/components/Upgrade.vue')
    )
  }
})
export default class AppComponent extends Vue {
  isUpgrade = process.env.IS_ELECTRON
    ? process.env.IS_ELECTRON &&
      process.env.NODE_ENV === 'production' &&
      process.env.VUE_APP_UPLOAD !== ''
    : false //判断是否可更新 true是 false否
}
</script>
<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 16px;
}
</style>

更新对话框

<!--手动升级-->
<template>
  <div id="update">
    <el-dialog
      :title="title"
      v-model="dialogVisible"
      width="60%"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      center
    >
      <div class="percentages">
        <el-progress
          status="success"
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          :width="strokeWidth"
          :show-text="true"
        ></el-progress>
      </div>
      <div class="footer" v-if="btnStatus && !isBtn">
        <el-button @click="closeDialog">暂不升级</el-button>
        <el-button @click="upgrade" type="primary">升级</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { ipcRenderer } from 'electron'
@Options({
  components: {}
})
export default class UpgradeComponent extends Vue {
  title = ''
  dialogVisible = false
  closeOnClickModal = false
  closeOnPressEscape = false
  showClose = false
  percentage = 0
  strokeWidth = 200
  timeOut = 0
  btnStatus = false //是否显示升级按钮
  isBtn = process.env.VUE_APP_UPGRADE === 'automatic' ? true : false //true 自动升级 false 手动升级
  /**
   * 关闭
   */
  closeDialog() {
    this.title = ''
    this.dialogVisible = false
  }
  /**
   * 开始更新
   */
  upgrade() {
    ipcRenderer.send('downloadUpdate')
    this.btnStatus = false
  }
  mounted() {
    ipcRenderer.send('checkForUpdate') //检查版本更新
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    let _this = this
    //接收主进程版本更新消息
    ipcRenderer.on('message', (event: any, arg: any) => {
      _this.title = arg.title
      if ('update-available' === arg.cmd) {
        _this.btnStatus = true
        _this.dialogVisible = true //显示升级对话框
      } else if ('download-progress' === arg.cmd) {
        const percent = Math.round(parseFloat(arg.message.percent))
        _this.percentage = percent
      } else if ('update-downloaded' === arg.cmd) {
        _this.dialogVisible = false
      } else if ('error' === arg.cmd) {
        _this.dialogVisible = false
      }
    })
  }
}
</script>
<style lang="scss">
#update {
  background: #f8f8f8;
}
.percentages {
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  text-align: center;
}
body {
  margin: 0px;
}
.v-modal {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}
.el-tooltip {
  display: flex;
  align-items: center;
}
.footer {
  display: flex;
  flex-flow: row-reverse;
}
</style>
<style lang="scss" scoped>
.tableList {
  widows: 150px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.el-tooltip__popper {
  font-size: 14px;
  max-width: 300px !important;
  text-align: justify;
  text-justify: newspaper;
  word-break: break-all;
  line-height: 20px;
}
</style>

将打包后的dist_electron 目录下的 exe文件 和 latest.yml上传到 服务器VUE_APP_UPLOAD

解决打包后白屏

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: process.env.IS_ELECTRON
    ? createWebHashHistory(process.env.BASE_URL)
    : createWebHistory(process.env.BASE_URL), //解决打包后白屏
  routes
})

更换图标

window

如下方式可解决打包后窗口左上角图标不显示问题

修改vue.config.js

"win": {

"icon": "build/icons/icon.ico" （为256*256图片）

}

mac

图标格式icns

推荐在线转换格式

demo地址 zhzy-tveep/src/components at main · Lateautumn00/zhzy-tveep · GitHub

Qin_jiangshan
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron 调用C# 动态库DLL
09-13
使用electron-edge-js组件调用dll文件的对应方法。
electron
03-28
电子 国内NPM加速 npm config set registry https://registry.npm.taobao.org npm config set metrics-registry https://registry.npm.taobao.org #npm config set registry https://registry.npmjs.org #npm config set metrics-registry https://registry.npmjs.org # 检查是否安装成功 npm config list 赢得打造重要笔记使用vs2015 npm install --global --production windows-build-tools --vs2015 构建设置 # install dependencies npm install # serve
electron.zip
07-10
Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8。这是我配置好的一个资源包，可以直接把项目导进来，稍微配置一下就可以成功，详情内容请看我的博客，有具体的步骤。
Electron demo
08-31
windows环境亲测成功，linux环境打包成功，未测试
electron.rar
12-23
electron在window10上面的缓存，解决国内网不好的问题
Electron打包方式
热门推荐
duansamve的博客
08-24 2万+
Electron提供了两个打包工具，本文将分别尝试使用两个工具对项目打包，并分析其打出来的包的结构
electron 快捷键
wandoumm的博客
11-03 1643
ctr +shift +i 打开控制面板。
electron 起步
「 虚幻私塾」
09-09 1747
比如酷狗音乐，导航是比较好看。做法是隐藏原生菜单，用自己的 html 代替。下面我们将原生菜单功能改为自定义菜单。首先通过frame// frame boolean (可选) - 设置为 false 时可以创建一个无边框窗口 默认值为 true。// 去除边框，菜单也不可见了})Tip: frame boolean (可选) - 设置为 false 时可以创建一个无边框窗口 默认值为 true接着在 html 页面实现自己的菜单。新建窗口span>
electron安装
jakelihua
07-30 3051
Electron是一种强大的桌面应用开发框架，使用HTML、CSS和JavaScript构建跨平台的应用程序。它基于Node.js和Chromium，可以在Windows、macOS和Linux等操作系统上运行，为开发者提供了一种简单而高效的方式来创建原生桌面应用。
【实战】学习 Electron：构建跨平台桌面应用
程序边界
10-18 6952
Electron 最早由 GitHub 开发，它允许开发者使用 Web 技术来构建桌面应用程序。Electron 基于 Node.js 和 Chromium，这两个都是开源项目，因此 Electron 有着丰富的生态系统和文档支持。使用 Electron，开发者可以创建使用 HTML、CSS 和 JavaScript 构建的跨平台桌面应用程序，这些应用程序可以在 Windows、macOS 和 Linux 上运行。
electron打包
jjy8040的博客
09-09 1万+
electron 文档地址： https://www.electronjs.org/docs 快速启动官方项目： // 克隆示例项目的仓库 git clone https://github.com/electron/electron-quick-start // 进入项目 cd electron-quick-start // 安装依赖 npm install // 运行 npm start web项目转为electron应用： 首先安装electron插件npm install electron -D 关
Electron框架：构建跨平台桌面应用的终极解决方案
程序边界
12-17 5976
Electron是一个基于Chromium和Node.js的开源库，用于构建跨平台的桌面应用程序。通过使用Electron，开发者可以使用HTML、CSS和JavaScript等Web技术来编写桌面应用，同时可以利用Node.js的强大功能来实现本地化操作。Electron框架的主要优点是开发效率高、跨平台性能好以及易于维护。《Electron入门与实战》围绕Electron核心的功能展开，讲解了如何使用Electron技术快速开发桌面应用。
Electron实战
飞鸿的博客
01-10 4066
摘要 时间过得真快，在忙碌的工作中，2020 年就已经过去了。 虽然到了 2021 年，年龄增加了一岁，白头发多了很多，技术学了很多，但是工资却没有见涨。 那能如何呢？难道 xxx 不再剥削了，打工人就能自由了？ “打工人，打工魂，打工才是人上人”，透露出小人物在平凡生活中的不懈追求， 有着更积极的乐观主义色彩。 这是一种自嘲，也是一直激励。同为打工人，那就一起来学习一直很火的 electron 吧。 阅读本文需要一定的 node 基础知识。知道 electron 是开发桌面应用程序的技术。 本文主要介绍
《Fundamentals of Power Electronics》——正则电路模型
weixin_53126442的博客
05-05 468
所有PWM CCM dc-dc转换器执行类似的基本功能。第一，它们转换电压和电流水平，理想状态下效率为100%。第二，它们包含波形的低通滤波功能。虽然有必要去除高频开关纹波，但这种滤波也影响低频电压和电流的变化。第三，转换器的波形可以通过改变占空比来控制。我们期望具有相似物理特性的转换器应该具有特性相似的等效电路模型。因此，可以定义一个正则电路模型，正确地解释所有这些基本属性。任意CCM交流等效电路PWM dc-dc转换器可以被变换成这种规范形式。这使我们能够物理熟悉，并比较转换器的交流特性。
Electron axios token失效刷新token
weixin_41521961的博客
05-06 111
在Electron中，localStorage仅在浏览器进程（渲染进程）中起作用， 这里axios请求需要使用electron-store来保存token。
electron 视频抓图并保存图片到本地
最新发布
weixin_41521961的博客
05-11 89
【代码】electron 视频抓图并保存图片到本地。
Electron学习笔记（四）
qq_45897239的博客
05-11 160
六、数据 1、使用本地文件持久化数据 (1) 用户数据目录 (2) 读写本地文件 (3) 第三方库 2、读写受限访问的 Cookie 3、清空浏览器缓存
electron vlc
03-23
Electron VLC是一个基于Electron框架和VLC媒体播放器的开源项目，它提供了一个跨平台的桌面应用程序开发环境，可以用于构建功能强大的媒体播放器应用程序。 Electron是一个使用HTML、CSS和JavaScript构建跨平台桌面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值