您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

使用Electron打造跨平台程序需要关注的技术点

时间:2023-08-15 12:53:56  来源:  作者:研道鸠摩智

背景

上篇文章已经介绍了使用electron forge+vite+vue3来实现一个桌面应用程序的框架。本文重点介绍完善一个这样的框架的几个通用的需求点及实现方式。

需求

  1. 实现客户端在线升级
  2. 实现与本地操作系统的交互
  3. 实现配置信息持久化
  4. 国际化配置
  5. 实现跨域访问

实现客户端在线升级

update.js

const {App,dialog,autoUpdater} = require('electron');
const log = require("electron-log")
autoUpdater.logger = log
autoUpdater.logger.transports.file.level = "info"

const server = 'https://update.electronjs.org'
const url = `${server}/dongluyang/intel-desktop-app/${process.platform}-${process.arch}/${app.getVersion()}`

autoUpdater.setFeedURL(
  { 
    url:url
  } 
)


autoUpdater.on('checking-for-update', () => {
    log.info("获取版本信息")
})

autoUpdater.on('update-not-avAIlable', () => {
    log.info("没有可更新版本")
})

autoUpdater.on('update-available', ()  => {
    log.info("发现新版本")
})

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
    dialog.showMessageBox({
        type: 'info',
        title: '软件更新',
        message: "发现新版本"+releaseName+", 确定安装?",
        detail: process.platform === 'win32' ? releaseNotes : releaseName,
        buttons: ['确定', '取消']
      }).then(returnValue => {
        if (returnValue.response === 0)  autoUpdater.quitAndInstall()
      })
  })

autoUpdater.on('error', (message) => {
    log.error('There was a problem updating the application')
    log.error(message)
})
  
export default autoUpdater

main.js

import autoUpdater from './update'

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
  }
  // Open the DevTools.
  mainWindow.webContents.openDevTools();
  mainWindow.once('ready-to-show', () => {
     autoUpdater.autoDownload = false
     autoUpdater.checkForUpdates()
 });

};

优缺点比较

方案

优点

缺点

本方案

实现简单,和electron-forge集成容易。electron-forge有丰富的插件生态

  1. 只有update-downloaded事件,没有进度更新的事件。
  2. 无法选择安装路径
  3. 安装过程丑了一点,是一个动态gif

electron-builder + electron-updater的autoUpdater

  1. 有download-progress事件,可以实现下载进度显示。
  2. 不可以选择安装路径

1.实现稍微比上述方案复杂。

2.官方推荐electron-forge打包,与主流技术分叉。

Electron Forge可以被认为是Electron Builder的替代品,后者在应用程序构建和发布方面实现了相同的用例。

这两个项目在理念上的关键区别在于,Electron Forge专注于将现有的官方工具组合成一个单一的构建管道,而Builder则为大多数构建任务重写自己的内部逻辑。

使用Forge有两个主要优势:

Forge一旦在Electron中得到支持,就会接收用于应用程序构建的新功能(例如ASAR完整性或通用macOS构建)。这些功能是在考虑到官方Electron工具的情况下构建的,因此Forge在发布后立即收到它们。

Forge的多包体系结构使其更易于理解和扩展。由于Forge由许多职责明确的较小包组成,因此更容易遵循代码流。此外,它的可扩展API设计意味着您可以编写自己的构建逻辑,而不必为高级用例提供配置选项。

运行界面

日志查看

运行期间,有错误,可以及时查看内容,日志地址是

windows: C:Users%USERPROFILE%AppDataRoaming你的工程logs

mac: ~/Library/Application Support/你的工程 或者 ~/Library/Logs/你的工程

实现与本地操作系统的交互

preload.js

在这个问题中可以暴露一些接口,这些接口可以在前端页面调用,例如下面的就可以在前端vue页面调用window.versions.node调用node方法

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', { 
  node: () => process.versions.node, 
  chrome: () => process.versions.chrome, 
  electron: () => process.versions.electron, 
  ping: () => ipcRenderer.send('ping') ,
  pong: () => ipcRenderer.invoke('pong') 
})

main.js

通过ipcMain来处理

async function handlePing (event, keyword) {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(keyword)
}


// 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', ()=>{
  ipcMain.on('ping', handlePing)
  createWindow()
});

 

运行效果

总结

方向

解释

对应元语

单向

ipcRender向ipcMain发送消息

ipcRender.send与ipcMain.on

双向

ipcRender向ipcMain发送消息,并等待结果

ipcRender.invoke与ipcMain.handle

国际化配置

src/renderer/App.vue

配置默认中文显示

<template>
 <a-config-provider :locale="locale">
    <router-view />
 </a-config-provider>
</template>

<script setup>
import { computed,ref } from 'vue';
import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
import useLocale from './hooks/locale';

const { currentLocale } = useLocale();

const locale = computed(() => {
  switch (currentLocale.value) {
    case 'zh-CN':
      return zhCN;
    case 'en-US':
      return enUS;
    default:
      return zhCN;
  }
});
const percentage = ref(0);
const showProgressBar = ref(false);
</script>

src/render/hooks/locale.js

import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';

export default function useLocale() {
  const i18 = useI18n();
  const currentLocale = computed(() => {
    return i18.locale.value;
  });
  const changeLocale = (value) => {
    if (i18.locale.value === value) {
      return;
    }
    i18.locale.value = value;
    localStorage.setItem('arco-locale', value);
    Message.success(i18.t('navbar.action.locale'));
  };
  return {
    currentLocale,
    changeLocale,
  };
}

src/render/main.js

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  legacy: false, // 如果你使用 Composition API(推荐),请将legacy设置为false
  locale: 'zh', // 默认语言环境
  messages: {
    en: {
      hello: 'Hello',
      welcome: 'Welcome to our app!',
    },
    zh: {
      hello: '你好',
      welcome: '欢迎来到我们的应用!',
    },
  },
});


createApp(App).use(i18n).use(router).use(ArcoVue,{}).use(ArcoVueIcon).mount('#app');

显示代码

<p>{{ $t('welcome') }}</p>

 

剩余的两个功能,下一篇再完善。预告下,后面我把这个项目的模块进行分解,然后子模块拆分成技术点,然后通过ChatGPT来实现,看看它的效果如何。敬请期待!是否能实现大部分功能,我们拭目以待。



Tags:Electro   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  Search: Electro  点击:(47)  评论:(0)  加入收藏
如何为Electron应用开发原生模块
大家都知道JavaScript无论是在浏览器中运行、还是在Node.js中运行都是单线程运行的,所以并不适合在处理一些CPU密集型任务。但是Node.js允许开发者使用C、C++等语言开发像普...【详细内容】
2023-12-26  Search: Electro  点击:(80)  评论:(0)  加入收藏
Electron、Vite和Vue 3助你打造功能丰富桌面应用
Vite的快速热更新能力和Vue 3的高效性能,加速了开发周期,使得开发者能够更快地迭代和测试应用。很多vue3的UI可以使用,例如本文选用的arco-design,这就是站在巨人肩膀之上。背景...【详细内容】
2023-08-28  Search: Electro  点击:(282)  评论:(0)  加入收藏
使用Electron打造跨平台程序需要关注的技术点
背景上篇文章已经介绍了使用electron forge+vite+vue3来实现一个桌面应用程序的框架。本文重点介绍完善一个这样的框架的几个通用的需求点及实现方式。需求 实现客户端在线...【详细内容】
2023-08-15  Search: Electro  点击:(175)  评论:(0)  加入收藏
Electron是目前最好的桌面框架吗?
如果您正在尝试使用JavaScript构建桌面应用程序,您可能至少考虑过Electron。GitHub于2013年为其Atom编辑器发布了Electron,并被Microsoft、Discord和Slack等许多大公司使用。...【详细内容】
2023-01-04  Search: Electro  点击:(382)  评论:(0)  加入收藏
使用.NET5、Blazor和Electron.NET构建跨平台桌面应用
Electron.NET是一个嵌入了ASP.NET Core的Electron的封装,通过Electron.NET可以构建基于.NET5的跨平台的桌面应用,使得开发人员只需要使用ASP.NET Core和 Blazor就可以胜任桌面...【详细内容】
2021-11-30  Search: Electro  点击:(867)  评论:(0)  加入收藏
electron 打包vue为桌面应用的详细过程
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Search: Electro  点击:(516)  评论:(0)  加入收藏
Electron 简介
本教程我们来学习 Electron 的基础知识,下面我们先来学习一下什么是 Electron。Electron是什么Electron 是是 GitHub 开发的一个开源框架。它允许使用 Node.js(作为后端)和 Chr...【详细内容】
2021-05-18  Search: Electro  点击:(9663)  评论:(0)  加入收藏
基于 Vue3.0+Electron 搭建桌面端应用
目前electron最新稳定版本为v11.2.1,star高达89.2K+。# 官网地址https://www.electronjs.org/# 仓库地址https://github.com/electron/electron有数千个超优秀的软件是基于E...【详细内容】
2021-02-08  Search: Electro  点击:(2523)  评论:(0)  加入收藏
electron-builder 打包生成桌面App
开发electron客户端程序,打包是绕不开的问题。如何使用来源:https://www.php.cn/div-tutorial-411690.htmlbuilder的使用和配置都是很简单的builder配置有两种方式package.jso...【详细内容】
2020-08-07  Search: Electro  点击:(1716)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条