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

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

这里解析例程的构成

从零开始搭建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/127550392webPreferences: {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 debugif (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) returnapp.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.mzph.cn/bicheng/25772.shtml

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

相关文章

【吊打面试官系列-Mysql面试题】MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么 ?

大家好,我是锋哥。今天分享关于 【MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么 ?】面试题,希望对大家有帮助; MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么 ? 以下是 MySQL_fetch_array 和 MySQL…

让AI做2024新高考1卷数学最后一题:AI智商横向对比!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

【Python】成功解决SyntaxError: invalid syntax

【Python】成功解决SyntaxError: invalid syntax 下滑即可查看博客内容 🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地!🎇 🎓 博主简介:985高校的普通本硕&am…

探索OrangePi AIpro:单板计算机的深度体验之旅

准备阶段:环境与资料 在开始我们的探索之旅前,确保您已准备好以下装备: OrangePi AIpro:我们的主角,一台功能强大的单板计算机。Windows 10笔记本电脑:作为我们的辅助工具,用于管理和测试。路…

SSM民宿在线预订平台的设计与实现-计算机毕业设计源码44449

摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对民宿在线预订平台等问题,对民宿…

力扣74. 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵:每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。给你一个整数 target ,如果 target 在矩阵中,返回 true ;否则,返回 false 。 示…

1.nginx介绍

介绍 是一个高性能的http和反向代理服务器。 特点 占用内存少,并发能力强。 nginx专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受高负载的考验,有报告表明能支持高达50,000个并发连接数。 基…

游戏服务器工程实践一:百万级同时在线的全区全服游戏

我应该有资格写这篇文章,因为亲手设计过可以支撑百万级同时在线的全区全服类型的游戏服务器架构。 若干年前我在某公司任职时,参与研发过一款休闲类型的游戏,由 penguin 厂独代。研发的时候,p 厂要求我们的游戏服务器要能支撑百万…

Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios

什么是Vue? Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/ Vue快速入门 打开页面&#xff0…

MySQL事务,视图,用户管理学习笔记【事务概念 | 事务隔离级别 | 设置级别 | 视图 | 用户管理】

博客主页:花果山~程序猿-CSDN博客 文章分栏:MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习,一起进步,一起探索编程的无限可能吧!让我们一起努力,一起成长! 目录 一,事务初…

面试杂谈之clickhouse

clickhouse 之前定时任务读取binlog 批量同步clickhouse kafka 批量给clickhouse灌数据 clickhouse列式数据库,运行时创建库表,加载数据查询数据压缩,磁盘存储,向量化引擎,利用CPU多核并行处理缺少完整的update/del…

【SQL】牛客网SQL非技术入门40道代码|练习记录

跟着刷题:是橘长不是局长哦_哔哩哔哩_bilibili 6查询学校是北大的学生信息 select device_id, university from user_profile where university 北京大学 7查找年龄大于24岁的用户信息 select device_id, gender, age, university from user_profile where age…

开源低代码平台技术为数字化转型赋能!

实现数字化转型升级是很多企业未来的发展趋势,也是企业获得更多发展商机的途径。如何进行数字化转型?如何实现流程化办公?这些都是摆在客户面前的实际问题,借助于开源低代码平台技术的优势特点,可以轻松助力企业降低开…

设计模式-装饰器模式(结构型)

装饰器模式 装饰器模式是一种结构模式,通过装饰器模式可以在不改变原有类结构的情况下向一个新对象添加新功能,是现有类的包装。 图解 角色 抽象组件:定义组件的抽象方法具体组件:实现组件的抽象方法抽象装饰器:实现…

沐风老师3DMAX一键多孔结构建模插件Porous使用方法

​3DMAX一键多孔结构建模插件Porous使用教程 3dMax是大家熟知的3D建模软件之一,其功能非常的强大,在科研绘图领域有着非常广泛的应用,但是由于科研绘图的图形(模型)一般都属于异形结构,手工绘制建模&#x…

mysql设置允许外部ip访问,局域网IP访问

(支持MYSQL8版本) 1. 登录进入mysql;mysql -uroot -p输入密码进入 2. 输入以下语句,进入mysql库,查看user表中root用户的访问 use mysql; select host,user from user; 3. 更新user表中root用户域属性&#xff0c…

Docker核心架构原理的深入分析

一、前言 由于平常工作中对Docker使用还是比较频繁的,但是一般都是基础的功能使用,并未对其核心架构原理做梳理,因此抽空简单总结一下这玩意的一些核心概念点知识,以备后面求职工作时可以更为深入地了解这个容器化工具。 二、Do…

springboot与flowable(2):流程部署

一、创建项目 创建springboot项目添加相关依赖。 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.…

Upscayl:款利用人工智能技术,深度学习算法,实现图像无损放大和增强的强大工具。

Upscayl AI&#xff1a; Upscayl AI是一款基于先进的人工智能技术&#xff0c;特别是深度学习算法开发的图像增强工具。它能够智能地分析并改善图像质量&#xff0c;实现无损放大、细节重建和模糊消除&#xff0c;让老旧、低分辨率或模糊的照片焕发新生&#xff0c;达到高清画…

工程师 - VMware workstation pro个人版现已免费

May 13, 2024 VMware 桌面虚拟机管理程序(VMware Desktop Hypervisors) 使用行业标准桌面管理程序 VMware Workstation Pro for Windows 和 Linux 或 VMware Fusion for Mac 运行 Windows、Linux 和其他虚拟机。 Run Windows, Linux and other virtual machines with VMware Wo…