草庐IT

半个前端新手入门Electron的过程

王谷雨的笔记 2023-03-28 原文

前言

先说几句废话,本人是一名 web 后端开发,主语言是 java,在学 Electron 之前,只会一点点 HTML和 JavaScript。本文讲的也是我学习 Electron 的过程,而非教程,请酌情参考。

Electron是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromiu 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

前置准备

下面列举一下学 electron 之前需要掌握哪些技能:

  • 独立开发一个页面的能力

    HTML+ JS + CSS,这是必备技能

  • Node.js

    建议掌握。需要会安装 node 环境,剩下的 API 可以边用边学

因为 js 是弱类型语言,在缺少注释和约束的情况下,写时一时爽,维护。。。
而 TypeScript 的显式类型使代码可读性更高,更符合我使用 Java 时的习惯,所以又去学了 TypeScript。下面的讲解都基于 Electron + TypeScript,而非 Electron + JS,这个需要区分下。

开始学习

一阶段

Electron文档

按照官方文档学习,学习顺序如下:

  1. 安装 Electron

  2. Electron中的流程 部分

    了解 Electron 的流程模型(主进程和渲染器进程)、上下文隔离等。进程间通信可以看完教程部分再回来细看。

    在渲染器进程中无法使用 Node.js 和 Electron 的 API 是很难受的一点,下文细说。

  3. 教程 部分

    只学习基本要求、创建您的第一个应用程序、使用预加载脚本,其他的先略过

二阶段

完成了一阶段的学习,还是不知道如何打包一个桌面端程序。此时就轮到 electron-vite 登场了。

electron-vite 是一个新型构建工具,旨在为 Electron ****提供更快、更精简的开发体验。

创建基础工程

electron-vite 提供了多种模板,因为我使用 TypeScript 开发,也不打算引入 vue 等框架,所以使用的是 vanilla-ts 模板。

npm create @quick-start/electron my-app
√ Select a framework: » vanilla
√ Add TypeScript? ... Yes
√ Add Electron updater plugin? ... No
√ Enable Electron download mirror proxy? ... No

运行

按照提示,使用命令行进入到项目中,执行npm install安装依赖,然后执行npm run dev即可进行调试。

模板也集成了 VsCode 调试,在安装完依赖之后,用 VsCode 打开项目,按 F5 也可进行调试。

默认情况下,构建输出将放置在 my-app/out 文件夹中,

打包

npm run build:win

window 系统的打包一行命令搞定,生成的 exe 安装包在 my-app/dist 文件夹中

三阶段

在掌握了基础的 Electron API 和能将程序打包之后,就可以开始开发自己的程序了。

由于 Electron 的上下文隔离,Electron API 和 Node API 都无法在渲染器进程中使用,只能绕个弯,由主进程提供方法,渲染器进程通过预加载脚本的方式去调用。这就导致了一个问题,很多方法的实际执行都放在主进程中(渲染器进程只是调用),导致了主进程的卡顿,有没有大佬有好的解决方案?

对我来说,这就是一个面向搜索引擎编程的阶段。遇到问题,我一般用以下步骤处理:

  1. 只看搜索引擎第一页,没有就换种描述再搜,还没有就跳转步骤2
  2. 翻官方文档,大部分问题在官方文档中都能找到解决方案。这步需要点耐心,很多问题不是文档没写,而是没找对。
  3. 最后就是请教大神了

附上:提问的智慧

记录下新手容易遇到的坑

  1. 不要使用 window.alert 和 window.confirm 方法,会导致 input 框光标消失

    https://github.com/electron/electron/issues/20400

    解决方案是使用 Electron 的弹框 dialog.showMessageBoxSync()

  2. 有多个页面时,使用预加载脚本出错,提示找不到对应的js文件

    文档:多窗口应用程序

  3. 静态资源处理

  4. 不要阻塞主进程,耗时的任务开线程去做,否则会造成页面卡顿

    文档:Worker Threads

    注意在 Electron 中,web worker脚本可以使用 node api,但是不支持 Electron API,也不允许使用其他依赖 Electron API 的库,例如 electron-store

  5. 安装引导

    默认配置打包出来的安装包,运行就直接安装在默认路径了。可以去修改 electron-builder 中的 nsis配置

    # electron-builder.yml 文件
    nsis:
      oneClick: false # 创建一键安装程序还是辅助安装程序(默认是一键安装)
      allowElevation: true # 是否允许请求提升,如果为false,则用户必须使用提升的权限重新启动安装程序 (仅作用于辅助安装程序)
      allowToChangeInstallationDirectory: true # 是否允许修改安装目录 (仅作用于辅助安装程序)
      createStartMenuShortcut: true # 是否创建开始菜单快捷方式
      artifactName: ${name}-${version}-setup.${ext}
      shortcutName: ${productName}
      uninstallDisplayName: ${productName}
      createDesktopShortcut: always
    

    文档:electron-builder#nsis

总结

本文描述了笔者学习 Electron 并捣鼓出一个小工具的过程。

有关半个前端新手入门Electron的过程的更多相关文章

  1. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  2. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  5. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  6. ruby-on-rails - ruby 新手,有人可以帮我从控制台破译这个错误吗? - 2

    我真的只是不确定这意味着什么或我应该做什么才能让网页在我的本地主机上运行。现在它只是显示一个错误,上面写着“我们很抱歉,但出了点问题。”当我运行railsserver并在chrome中打开localhost:3000时。这是控制台输出:StartedGET"/users/sign_in"for127.0.0.1at2013-07-0512:07:07-0400ProcessingbyDevise::SessionsController#newasHTMLCompleted500InternalServerErrorin55msNoMethodError(undefinedmethod`

  7. ruby - Ruby 中的 block 和过程 - 2

    我已经开始学习Ruby,我已经阅读了一些教程,甚至还买了一本书(“ProgrammingRuby1.9-ThePragmaticProgrammers'Guide”),我遇到了一些以前从未见过的新东西使用我知道的任何其他语言(我是一名PHP网络开发人员)。block和过程。我想我明白它们是什么,但我不明白的是为什么它们如此伟大,以及我应该在何时何地使用它们。我到处都看到他们说block和过程是Ruby中的一个很棒的特性,但我不理解它们。这里有人能给像我这样的Ruby新手一些解释吗? 最佳答案 block有很多好处。电梯演讲:bloc

  8. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定

  9. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

  10. Simulink方法总结和避坑指南(一)——Simulink入门与基本调试方法 - 2

    文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分:三、信号处理部分和显示部分:四、基本的通信链路搭建:四、特殊模块:interpretedMATLABfunction:五、总结和坑点提醒一、项目场景  最近一个任务是使用simulink搭建一个MIMO串扰消除的链路,并用实际收到的数据进行测试,在搭建的过程中也遇到了不少的问题(当然这比vivado里面的debug好不知道多少倍)。准备趁着这个机会,先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。  在本篇中,主要记录simulink的基本原理和基本的SISO通信传输链路(QPSK方式),计划在下篇记

随机推荐