从零开始搭建Electron项目(二)之例程解析

news2024/11/15 6:46:33

本专栏,前面学习了怎么下载例程并运行。

这里解析例程的构成

从零开始搭建Electron项目之运行例程-CSDN博客文章浏览阅读22次。最好的学习方式就是:给一段能够运行的代码示例。本文给出了例程资源,以及运行的步骤。在国内开发electron有一点特别不好,就是如果不爬梯子,下载依赖容易出错。https://blog.csdn.net/kissgoodbye2012/article/details/139572779?spm=1001.2014.3001.5501

学习资源:

app | Electron控制应用程序的事件生命周期。icon-default.png?t=N7T8https://www.electronjs.org/zh/docs/latest/api/app

一、例程结构

使用vscode打开源码文件夹。

1.1 package.json 程序全局配置

这个文件的主要作用是在运行程序或者打包程序时使用

运行程序:运行cnpm start时,从该文件的scripts下的start启动程序。其他是程序全局的描述信息,如程序名称、程序版本等。main项说明了程序的入口函数:main.js。dependencies项说明程序的依赖关系。

打包程序:build项,确定了打包程序的配置。这个例程没有,后续到需要打包程序时我们再讲解。

1.2 main.js 主进程

这是程序的入口程序,也是程序的主线程,主要作用:管理程序的生命周期

下面的代码注释我加上去的。分为 几个部分,其中定义了几个函数,占了很大的篇幅,将它们折叠后会发现,条理会很清晰。

// 第三方包 electron-updater 来实现自动更新的功能
// 需要搭配update.js 文件
//require是node.js的动态加载方法
require('update-electron-app')({
  //使用第三方包 日志
  logger: require('electron-log')
})

// path是node 内置模块 拼接路径
const path = require('path')
//第三方包glob,详见:https://blog.csdn.net/weixin_45188187/article/details/117921803
const glob = require('glob')

//引入两个模块:app 和 BrowserWindow 
//app 模块,控制整个应用程序的事件生命周期。
//BrowserWindow 模块,它创建和管理程序的窗口。
const {app, BrowserWindow} = require('electron')

const debug = /--debug/.test(process.argv[2])

//process.mas(主进程),进程的参数
if (process.mas) app.setName('Electron APIs')

// 定义全局变量
let mainWindow = null

//定义函数initialize,初始化
function initialize () {
  //后面定义了该函数,使之为单例模式
  makeSingleInstance()

  //后面定义了该函数,导入所有js文件
  loadDemos()

  //定义函数,创建窗口
  //********************** createWindow,begin*************************/
  function createWindow () {
    //const定义常量
    const windowOptions = {
      width: 1080,
      minWidth: 680,
      height: 840,
      // 返回 string - 当前应用程序的名称,即为该应用程序 package.json 文件的 name 字段。
      title: app.getName(),
      //配置安全策略,详情见:https://blog.csdn.net/qq_30386941/article/details/127550392
      webPreferences: {
        nodeIntegration: true
      }
    }

    if (process.platform === 'linux') {
      // Node中的__dirname(前面有两个下划线)是一个全局变量,用来确定当前运行的文件所在的目录。
      windowOptions.icon = path.join(__dirname, '/assets/app-icon/png/512.png')
    }

    //新建窗口
    mainWindow = new BrowserWindow(windowOptions)
    //加载页面
    mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))

    // 在打开 DevTools 的情况下全屏启动, 用法: npm run debug
    if (debug) {
      mainWindow.webContents.openDevTools()
      mainWindow.maximize()
      require('devtron').install()
    }

    mainWindow.on('closed', () => {
      mainWindow = null
    })
  }
  //********************** createWindow,end*************************/

  //1. 初始化应用之后,会触发监听 ready 事件
  app.on('ready', () => {
    createWindow()
  })

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activate', () => {
    if (mainWindow === null) {
      createWindow()
    }
  })
}

// 将此应用程序设为单个实例应用程序。
//
// 当尝试启动第二个实例时,将恢复并聚焦到主窗口,
// 而不是打开第二个窗口。
//
// 如果应用程序的当前版本应该退出而不是启动,
// 则返回true.
function makeSingleInstance () {
  if (process.mas) return

  app.requestSingleInstanceLock()

  app.on('second-instance', () => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore()
      mainWindow.focus()
    }
  })
}

// 在主进程目录中需要的每个 JS 文件
function loadDemos () {
  const files = glob.sync(path.join(__dirname, 'main-process/**/*.js'))
  files.forEach((file) => { require(file) })
}

//运行初始化
initialize()

Import 和 Require 的区别 在 TypeScript 中,import 和 require 都可以用来引入模块。但是它们之间有一些区别:

import 是 ES6 中的语法,它会被 TypeScript 编译器解析和处理。

require 是 Node.js 中的模块加载语法,它是动态加载的,不会被 TypeScript 编译器处理。

程序初始化时加载了index.html,这个是页面的文件。

1.3 index.html 主页面

这个定义了页面的布局,完全是web技术了

里面的data-section定义了,点击按钮后,加载html文件。这里是section下的menus.html

二、总结

这是一个简单的示例。使用了nav导航栏。

点击后,在不同的html文件定义页面间跳转。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1810095.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode刷题记录35-419. 甲板上的战舰

问题描述 给你一个大小为 m x n 的矩阵 board 表示甲板,其中,每个单元格可以是一艘战舰 X 或者是一个空位 . ,返回在甲板 board 上放置的 战舰 的数量。 战舰 只能水平或者垂直放置在 board 上。换句话说,战舰只能按 1 x k&#x…

LW-DETR:实时目标检测的Transformer, Apache-2.0 开源可商用,论文实验超 YOLOv8

LW-DETR:实时目标检测的Transformer, Apache-2.0 开源可商用,论文实验超 YOLOv8 LW-DETR 架构实例化高效训练高效推理 目的与解法拆解ViT编码器和DETR解码器多级特征图聚合变形交叉注意力窗口注意力和全局注意力 论文:https://arx…

C语言:结构体数组

结构体数组 介绍定义结构体定义结构体数组初始化结构体数组访问和修改结构体数组的元素遍历结构体数组 示例高级用法动态分配结构体数组使用 malloc 动态分配使用 calloc 动态分配 结构体数组作为函数参数结构体数组与指针多维结构体数组使用 typedef 简化结构体定义结构体数组…

【EDA】SSTA中最慢路径与最快路径统计计算

假设(X1,X2)为二元高斯随机向量,均值(μ1,μ2),标准差(σ1,σ2),相关系数ρ 定义:Xmax(X1,X2&…

Keil软件仿真的使用

一、软件的初始化设置 初始设置可以按照下图,这里我使用的是STM32F103C8T6,所以单片机型号为STM32F103C8,这个设置在Debug目录下。然后进行时钟的设置,我们板上晶振为8M,这里将时钟改为8. 或许有人想问如果是别的型号单…

JavaScript基础用法(变量定义、输入输出、转义符、注释和编码规范)

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

基于ensp的园区网络搭建综合实验

核心技术介绍 1、虚拟局域网(VLAN) 2、链路聚合(E-trunk) 3、多生成树协议(MSTP) 4、VLANIF三层逻辑接口 5、虚拟路由冗余协议(VRRP) 6、开放式最短路径优先(OSPF&…

C语言:(动态内存管理)

目录 动态内存有什么用呢 malloc函数 开辟失败示范 free函数 calloc函数 realloc函数 当然realooc也可以开辟空间 常⻅的动态内存的错误 对NULL指针的解引⽤操作 对动态内存开辟的空间越界访问 对⾮动态开辟内存使⽤free释放 使⽤free释放⼀块动态开辟内存的⼀部分 …

G盘文件系统损坏:全面解析与应对策略

在数字时代,数据的重要性不言而喻。然而,G盘文件系统损坏却时常给我们的数据安全带来威胁。当G盘文件系统受损时,可能导致文件丢失、数据无法访问等严重后果。本文将深入探讨G盘文件系统损坏的现象、原因、恢复方案以及预防措施,帮…

Java学习-JDBC(四)

连接池 现有问题 每次操作数据库都需要重新获取新连接,使用完毕后需close释放,频繁的创建和销毁造成资源浪费连接的数量无法把控,对服务器造成巨大压力 连接池 连接池是数据库连接对象的缓冲区,通过配置,由连接池负…

刷机维修进阶教程-----红米k30 nv损坏故障 修复实例教程步骤解析

小米红米系列机型在米8起始就有了串码校验。不得随意更改参数限制。不同于其他机型,可以任意刷入同芯片的基带qcn来修复基带和串码丢失。米系列刷入同芯片基带qcn会提示nv损坏故障。是因为有串码校验。一般在于格机或者全檫除分区后写新参数出现的故障。 这种解决方法通常有两…

OpenAI与核聚变公司寻求合作,白宫拨款1.8亿美元用于核聚变商业化研究

在当下,由 AI 引发的新一轮能源危机已经不再是一个小概率的「黑天鹅」事件,而是一头正在向我们猛冲而来的「灰犀牛」。 Helion Energy,是一家总部位于美国华盛顿州埃弗雷特的能源创业公司。 3.5研究测试:hujiaoai.cn 4研究测试&am…

Pytorch 实现目标检测三(Pytorch 25)

一 目标检测数据集 目标检测领域没有像MNIST和Fashion‐MNIST那样的小数据集。为了快速测试目标检测模型,我们收集并标记了一个小型数据集。首先,我们拍摄了一组香蕉的照片,并生成了1000张不同角度和大小的香蕉图像。然 后,我们在…

基于STM32开发的智能空气质量监控系统

⬇帮大家整理了单片机的资料 包括stm32的项目合集【源码开发文档】 点击下方蓝字即可领取,感谢支持!⬇ 点击领取更多嵌入式详细资料 问题讨论,stm32的资料领取可以私信! 目录 引言环境准备智能空气质量监控系统基础代码实现&…

Kafka的分区副本机制

目录 生产者的分区写入策略 轮询策略 随机策略 按key分配策略 乱序分区 自定义分区策略 实现步骤: 消费者组Rebalance机制 Rebalance触发时机 Rebalance的不良影响 消费者分区分配策略 Range范围分配策略 RoundRobin轮询策略 Stricky粘性分配策略 生产…

冯喜运:6.11#现货黄金#美原油#行情趋势分析及操作建议

【黄金消息面分析】:随着全球经济的波动,黄金作为传统的避险资产,其价格走势一直备受投资者关注。上周五,美国非农就业报告的强劲表现给美联储降息预期泼了冷水,同时,中国5月份未增持黄金,结束了…

Unity ShaderGraph 扭曲

需要注意的是: HDRP ShaderGraph中 你不能扭曲UI,所以假如你要扭曲视频,请把视频在材质上渲染 播放,这样就可以扭曲视频了喔, ShaderGraph扭曲

3、线性代数

1、矩阵转置 A[i,j]A[j,i] 2、对称矩阵 :A转置A [0,2,3] [2 1 5] [3,5,1] 3、三维矩阵 求和 axis0 两个矩阵相加 axis1 两个向量相加 ,axis2 向量内部相加 keepdimsTrue 求和后维度保持不变 4、cumsum累加求和 5、torch.mm() 或 torch.bmm() 【矩…

CleanMyMac2024最新免费电脑Mac系统优化工具

大家好,我是你们的好朋友——软件评测专家,同时也是一名技术博主。今天我要给大家种草一个超级实用的Mac优化工具——CleanMyMac! 作为一个长期使用macOS的用户,我深知系统运行时间长了,缓存文件、日志、临时文件等都会…

【高校科研前沿】广西大学博士生冯德东为一作在Habitat Int发文:区域乡村性与贫困治理变化的时空格局及相关效应——以滇桂黔石漠化地区为例

1.文章简介 论文名称:Spatio-temporal patterns and correlation effects of regional rurality and poverty governance change: A case study of the rocky desertification area of Yunnan-Guangxi-Guizhou, China(区域乡村性与贫困治理变化的时空格…