![](https://img-blog.csdnimg.cn/edfd0f5617dd4d85aaa95a921372853b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
跨平台桌面开发从入门到精通
文章平均质量分 90
该专栏主要面向的是有基础的前端基础,html+css+js的前端开发者来了解electron这项技术,以及带领大家快速使用这些基础的技术进行入门客户端开发!博主从事软件开发10余年,有着丰富的项目经验和实战经验,希望能在这里和大家共同探讨,共同成长!
星火燎猿
我们只用技术说话 眼界决定境界,定位决定地位! 留言私信直接说问题,不要问在不在,我看到了会第一时间回复。
展开
-
Electron教程大结局
Electron初阶教程大结局前情回顾未来计划感谢前情回顾前面我们通过14篇文章的篇幅,以理论知识和案例实践的方式从0开始进行了Electron开发跨平台桌面客户端的讲解和案例展示,通过该系列课程的学习,学员完全可以快速掌握并入门相关的开发工作。快速构建出自己的知识架构体系,让我们来回顾一下我们前面讲解的文章脉络:第一讲我们介绍了Electron,并给出了为什么要用Eletron开发客户端软件的理由!第二讲我们重点介绍了Electron创建项目的3种方式.第三讲讲了Electron中的重要知识点原创 2021-09-11 15:42:57 · 479 阅读 · 2 评论 -
第十四讲 Electron应用打包发布(小猿Markdown编辑器)
第十四讲Electron应用打包发布前言前言上一讲中我们完成了小猿编辑器的美化工作并完成了编辑器的核心功能,这一讲我将重点讲一下如何对原创 2021-09-09 20:30:48 · 638 阅读 · 0 评论 -
第十三讲 给小猿编辑器添加托盘图标以及系统通知功能
第十三讲 给小猿编辑器添加托盘图标以及系统通知功能前言托盘图标以及右键菜单开发步骤主进程通知渲染进程通知前言经过一系列的开发美化,我们的小猿Markdown编辑器案例也将慢慢接近尾声,本章内容我们主要讲一讲electron的系统托盘以及在electron中如何调用我们系统底层的通知功能。系统托盘其实在客户端开发中是必备功能,大家好好学,学习完成以后你也能开发出很出色的软件产品。托盘图标以及右键菜单效果图开发步骤素材准备程序添加托盘图标托盘添加鼠标放上去的提示为托盘添加右键菜单原创 2021-09-09 20:29:26 · 244 阅读 · 0 评论 -
第十二讲运用前面学习知识美化Markdown编辑器
第十二讲运用前面学习知识美化Markdown编辑器前言项目目录结构无边框窗体设计设计首页排版顶部菜单窗体顶部可拖拽顶部右侧功能菜单实现绑定事件左侧菜单页面实现事件绑定前言文末有代码仓库地址,可以直接拉代码下来运行。在这一讲里面我们将运用上一讲学到的内容知识,对我们前面讲的Markdown编辑器进行美化操作,之前的界面设计比较粗糙,只要能满足基本的功能要求,但是要作为一款拿的出手的产品,界面大方美观肯定是要的。在这个看脸的时代,功能不管怎么样,界面一定要好看。废话不多说,我们来看看前后的对比照:老版原创 2021-09-06 21:22:27 · 247 阅读 · 0 评论 -
第十一讲Electron无边框窗体和透明窗体设计
第11章继续完善美化我们的小猿Markdown编辑器原创 2021-08-22 20:03:14 · 2962 阅读 · 0 评论 -
第十讲使用Electron开发一个MarkDown编辑器
第九讲使用Electron开发一个MarkDown编辑器功能介绍代码目录结构打开本地文件保存本地文件新建文件小结功能介绍大家都知道,MarkDown编辑器越来越受到大家的喜欢,各大博客平台(CSDN,简书)都推出了MarkDown写博客的功能,包括这篇文章,我也是使用MarkDown进行编写的,本节课我们将带领大家从0开始开发一款属于自己的MarkDown编辑器。废话不多说,直接上演示图:新建文件:打开文件使用到的知识点都是我们前面讲过的,系统菜单,主进程和渲染进程通信,使用Node原创 2021-08-20 20:44:43 · 1035 阅读 · 0 评论 -
第九讲使用VSCODE调试Electron程序
第九讲使用VSCODE调试Electron程序介绍调试主进程调试渲染进介绍前面学员反馈说程序执行的时候遇到问题没办法调试,这节课程主要给大家介绍如何利用vscode来调试我们的Electron程序。前面课程我们已经介绍过,Electron程序包括主进程和渲染进程两部组成。开发过程中调试对于开发人员来说是必不可少的,今天我们就来讲一讲如何利用Vscode调试Electron程序,让你在以后的开发中遇到问题能够快速定位并解决问题!调试主进程首先我们打开vscode如下图所示点击左侧虫子一样的图片原创 2021-08-19 21:45:48 · 1591 阅读 · 2 评论 -
第八讲Electron中使用dialog模块
第八讲Electron中使用dialog模块介绍示例包括的方法dialog.showOpenDialogSync([browserWindow, ]options)dialog.showOpenDialog([browserWindow, ]options)dialog.showSaveDialogSync([browserWindow, ]options)dialog.showSaveDialog([browserWindow, ]options)dialog.showMessageBoxSync([br原创 2021-08-11 20:06:02 · 1876 阅读 · 0 评论 -
第七讲Electron中渲染进程和渲染进程之间通信
第七讲Electron中渲染进程和渲染进程之间通信介绍渲染进程间传值渲染进程和渲染进程之间的通信介绍相信大家通过前面的学习,对Electron中的主进程和渲染进程之间的通信有了一个深刻的认识,但是大家想过没有,如果在渲染进程和渲染进程传值,我们应该怎么做?让我们先回顾一下渲染进程的创建方式:const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: {原创 2021-08-10 20:09:17 · 402 阅读 · 0 评论 -
第六讲Electron中主进程和渲染进程之间的双向通信
第六讲Electron中主进程和渲染进程之间的双向通信概述主进程和渲染进程通信渲染进程和主进程之间通信概述通过前面课程的讲解,大家对Electron的开发有了一定的认识,但是运用到实际开发中,我们就需要考虑很多情况,比如我们通过点击渲染进程触发主进程中的某个函数获取到了数据最终要显示到渲染进程中我们该怎么做,第一讲的时候我们给了个例子,渲染进程加载的时候通过主进程读取了本地的文本文件并在渲染进程中进行了显示,大家还有印象吗,本章就重点讲讲这里面的运行原理,本章主要要讲的就两个模块ipcMain和ipc原创 2021-08-09 22:02:21 · 879 阅读 · 0 评论 -
第五讲使用Electron创建原生应用菜单和上下文菜单
第五讲使用Electron创建原生应用菜单和上下文菜单整体介绍Menu模块的构成静态方法实例方法实例事件MenuItem介绍click函数role参数type参数lable参数sublabel参数tooltipacceleratoriconenabledacceleratorWorksWhenHiddenvisibleBooleancheckedBooleanregisterAcceleratorsharingItemsubmenuidbeforeafterbeforeGroupContainingafte原创 2021-08-06 21:09:53 · 672 阅读 · 0 评论 -
第四讲Electron模块介绍及ipcMain,ipcRender,shell模块功能演示
第四讲Electron模块介绍及ipcMain,ipcRender,shell模块功能演示介绍主进程模块(28个)渲染进程模块(3个)通用模块(5个)案例讲解介绍从今天开始我们进入Eelectron的核心知识点学习,这些知识点将在我们后续的课程中不断的讲解和加深印象,你学习本篇的目的不要求全部掌握全部知识点,写本篇的目的只是为了能让你明白Eelctron里面的全貌。做到心中有韬略,后面的具体战术实战,我们将安排一些单独的课程讲解,当然该篇也会挑一些简单的模块来加深你对模块使用的影响。Electron总原创 2021-08-04 21:29:03 · 583 阅读 · 0 评论 -
第三讲 Electron中的主进程、渲染进程以及运行原理
Electron中的主进程、渲染进程以及运行原理目录运行原理一张图带你了解全貌主进程渲染进程主进程中使用nodejs模块新的项目结构目录运行原理#mermaid-svg-5CCa5pVnql0aGOQw .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-5CCa5pVnql0aGOQw .label text原创 2021-08-03 11:26:16 · 442 阅读 · 0 评论 -
第二讲 Electron项目创建的几种形式介绍
Electron项目创建的几种形式介绍快速创建Electron项目使用git仓库快速克隆项目并创建下载项目使用npm进行项目生成使用Electron-forge搭建一个项目纯手工搭建一个Electron项目快速创建Electron项目该篇文章主要讲解怎么快速创建一个electron项目并将它运行起来,完成我们electron的第一个hello world事例,以后的课程事例我将使用vscode进行代码创建和演示,如果你还没有下载,请先下载最新的安装!为了让大家学习不那么杂乱,本教程的所有安装都是用npm原创 2021-07-30 17:58:36 · 852 阅读 · 0 评论 -
第一讲 Electron跨平台开发介绍
Electron跨平台开发介绍欢迎加入Electron跨平台初级课程学习什么是Electron?为什么要学习Eelctron进行桌面客户端的开发?对于个人对于企业桌面客户端开发技术那么多,为什么就选择Electron?搭建第一个Electron环境准备工作安装Electron环境欢迎加入Electron跨平台初级课程学习你好,亲爱的开发者朋友,欢迎加入Electron跨平台初级课程的学习,在下面的课程中,我将带你手把手从一个前端开发者,进入到桌面客户端这一新的开发领域,本系列的课程将带你快速入门Elec原创 2021-07-29 17:36:30 · 480 阅读 · 2 评论