使用Electron 创建桌面应用

最新推荐文章于 2024-09-18 20:02:09 发布
最新推荐文章于 2024-09-18 20:02:09 发布
阅读量395 收藏
点赞数
分类专栏： 前端 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/krysliang/article/details/117080889
版权
本文详细介绍了如何使用Electron框架创建桌面应用程序。从安装到配置，再到实际的开发流程，逐步指导开发者构建自己的跨平台应用。内容涵盖基本概念、主进程与渲染进程的区别、HTML/CSS/JavaScript在Electron中的应用，以及打包与发布步骤。
摘要由CSDN通过智能技术生成
 
Electron是一个使用前端的技术来创建桌面应用的框架，打包后可以再MAC、windows和linux上直接运行。
 
1、安装
安装的时候按照它官网的文档进行了搭建，但是一直报错，这也是个坑啊。后来把代码改了一下，按照下面的安装方式就可以了
创建一个文件夹，然后先clone一个demo下来 
git clone https://github.com/electron/electron-quick-start

 

 
然后执行 
npm i --save-dev electron

 

 
注意：当这一步运行到下面这里的时候，赶快按ctrl + c结束运行，不然你会一直安装失败
 
然后进入到my app\node_modules\electron目录下面找到install.js，修改下面代码
  

 



                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  kkkkkkkkkrys
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
使用 Electron 构建桌面应用程序的介绍

				
			

			

				

					qq_60174013的博客
				

				

					08-22
					
					1590
					
				

			

		

		

			
				
另一个主要优势是，如果您可以构建网站，则可以使用 Electron.js 构建桌面应用程序，因此，现有的 Web 开发人员/Web 开发团队可以轻松地转化为桌面软件的开发人员。有了这个，构建桌面应用程序不再是编写 C++、C# 或 Java 的开发人员的专有能力，因为 Web 开发人员现在可以将他们的技能转移到推出行业标准的桌面软件。对象的新实例来实现这一点。随着这些强大的公司采用 Electron.js 而不是原生桌面软件开发方法，Electron.js 已将自己确立为开发桌面应用程序的值得信赖的框架。

			
		

	



                

            
              



	

		

			

				
					
用electron开发的图形界面PNG图片压缩工具

				
			

			

				

					08-11
				

			

		

		

			
				
这是个用 electron 开发的图形界面 PNG 图片压缩工具。支持无损压缩和有损压缩。

			
		

	



              


  
              

                


	

		

			

				
					
Electron创建一个桌面应用

				
			

			

				

					亮
				

				

					02-25
					
					2281
					
				

			

		

		

			
				
Electron创建一个桌面应用参考链接 
1. 初始化 
     
    安装node.js 
    创建目录my_app 
    命令行进入my_app目录 
    npm init 
    全默认 
 
1. 安装electron 
     
    打开~/.npmrc 
    修改代码为： 
    registry=https://registry.npm.taobao.

			
		

	





	

		

			

				
					
Electron桌面应用

					
最新发布

				
			

			

				

					weixin_57136547的博客
				

				

					09-18
					
					367
					
				

			

		

		

			
				
main是主进程，preload是预加载进程，renderer是渲染进程。将图标和上下文菜单添加到系统的通知区域。Tray | Electron 中文网。Menu | Electron 中文网。创建原生应用菜单和上下文菜单。

			
		

	



		

			
		



	

		

			

				
					
electron生成桌面应用程序

				
			

			

				

					lazy_why的博客
				

				

					04-27
					
					1057
					
				

			

		

		

			
				
electron+vue3+electron-builder开发打包桌面程序

			
		

	





	

		

			

				
					
electron实现桌面应用

				
			

			

				

					搬砖猴哥
				

				

					08-21
					
					4864
					
				

			

		

		

			
				
1. 简介

官网
Electron是由GitHub开发，使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用
在PC端混合app开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体, 而electron相对而言是更好的选择方案，它的社区相对比较活跃，bug比较少，文档先对利索简洁。
electron 相对来说比 

			
		

	





	

		

			

				
					
如何使用Electron构建桌面应用程序

				
			

			

				

					m0_75198698的博客
				

				

					05-05
					
					550
					
				

			

		

		

			
				
该代码包含一个名为 createWindow 的函数，该函数创建一个浏览器窗口，加载应用的 index.html 文件，并打开开发者工具。当 Electron 完成初始化并准备创建浏览器窗口时，将调用该函数。该命令会将 Electron 安装到项目的 node_modules 文件夹中，并将其添加到 package.json 文件的 devDependencies 中。在项目文件夹中创建一个名为 index.js 的文件，该文件将包含应用程序的主要逻辑。// 加载应用的 index.html。

			
		

	





	

		

			

				
					
electron-vue开发桌面应用界面模板

				
			

			

				

					11-01
				

			

		

		

			
				
标题中的“electron-vue开发桌面应用界面模板”指的是利用Electron和Vue.js框架构建的桌面应用程序的用户界面模板。Electron是一个用JavaScript、HTML和CSS构建跨平台桌面应用的开源库，它允许开发者使用Web技术来...

			
		

	





	

		

			

				
					
基于Electron实现桌面应用开发代码实例

				
			

			

				

					10-15
				

			

		

		

			
				
基于Electron实现桌面应用开发是一种流行的方式，它允许开发者使用Web技术（JavaScript、HTML和CSS）构建跨平台的桌面应用程序。Electron框架结合了Chromium和Node.js，为开发者提供了便利的开发环境。  首先，环境...

			
		

	





	

		

			

				
					
electron创建第一个桌面应用，亲测有效

				
			

			

				

					weixin_67921285的博客
				

				

					09-30
					
					101
					
				

			

		

		

			
				
国内快速安装electron的方法

			
		

	





	

		

			

				
					
最简单方法实现Electron自动刷新页面

				
			

			

				

					01-03
				

			

		

		

			
				
网上关于开发时热更新的文章很多，但实现过程都非常麻烦。下午在github上找到了一种成本最低的方法：
electron-reloader

首先，安装这个npm模块：
npm install --save-dev electron-reloader

然后，在程序入口文件（一般是index.js）中最下方加入以下代码：
try {
  require('electron-reloader')(module,{});
} catch (_) {}

最后，重启应用，尝试更改html等静态文件，窗口就能自动刷新了。
还可以修改配置对象，开启debug模式：

作者：mrhaoxiaojun

			
		

	





	

		

			

				
					
如何利用 Electron 快速开发一个桌面端应用

				
			

			

				

					huan132456765的博客
				

				

					06-05
					
					7499
					
				

			

		

		

			
				
一直以来都有听说利用electron可以非常便捷的将网页应用快速打包生成为桌面级应用，并且可以利用 electron 提供的 API 调用原生桌面 API 一些高级功能，于是这次借着论证环信 Web 端 SDK 是否可以在 electron 生成的桌面端正常稳定使用，我决定把官方新推出的，打包到桌面端，并记录一下这次验证的过程以及所遇到的问题以及解决方式。

			
		

	





	

		

			

				
					
Electron创建桌面应用程序

				
			

			

				

					HTongi的博客
				

				

					02-06
					
					221
					
				

			

		

		

			
				
Electron是一个可以使用JavaScript，Html和CSS创建桌面应用程序的框架，重要的是此框架，可以跨平台，无论是Mac还是Windows，甚至是linux都可以使用此框架

在使用Electron框架之前，应该安装Node环境
检查您的电脑上是否有node环境

node -v



如果出现版本号，说明电脑上有了node环境


然后在你想要的地方，创建一个文件夹，可以取名为electron-app（也可以随便你喜欢的名字）


进入文件夹之后，初始化文件夹为一个项目，使用命令


npm 

			
		

	





	

		

			

				
					
1分钟学会使用Electron 编写一个登录界面

				
			

			

				

					bjjgff的博客
				

				

					01-21
					
					1976
					
				

			

		

		

			
				
在根目录下创建assets目录，在assets目录下创建images， 我们需要再images里面放一个logo.jpeg格式的图片。将文件中的main的值修改为main.js, 在scripts中添加 "start": "electron ." 用来启动项目。首先，我们可以创建一个项目目录，命名为 "electron-login"，这个目录将用于存放我们的项目文件。成功初始化项目后，我们的项目目录中将会多出一个重要的文件“package.json”。运行成功后，我们就可以看到我们的界面效果如下图。

			
		

	





	

		

			

				
					
 electron-ui 快速方便的打造炫酷的桌面应用

				
			

			

				

					weixin_33712881的博客
				

				

					11-03
					
					5538
					
				

			

		

		

			
				
electron-ui是什么
electron-ui是基于electron和electron-vue扩展出来的一套基础的应用框架，目的是为了快速的搭建炫酷的桌面应用，其实也算不上框架只是一种解决方案而已，让electron后来的开发者在少采坑的情况下搭建出相对漂亮而快速的应用
为什么要做这个
公司的有个项目使用electron搭建的，最开...

			
		

	





	

		

			

				
					
在vue项目中使用electron,生成桌面图标，快速打开系统

				
			

			

				

					fang0321的博客
				

				

					09-07
					
					2048
					
				

			

		

		

			
				
在vue项目中使用electron,生成桌面图标，快速打开系统

			
		

	





	

		

			

				
					
Electron打包成win安装包并创建桌面快捷方式

				
			

			

				

					不忘初心
				

				

					07-12
					
					2万+
					
				

			

		

		

			
				
一开始打包通过electron-packager，可以将electron应用打包成可执行exe，虽然可以实现桌面端应用，但是没有安装包而且没有在桌面创建快捷方式总是显得不是很正规，于是查询了下官网，果然有安装程序，下面就一点一点开始实现需求

首先我们需要将我们的程序打包 
这里我们使用electron-packager

npm install electron-packager --save-...

			
		

	





	

		

			

				
					
Electron设置窗口图标、设置桌面快捷方式图标

					
热门推荐

				
			

			

				

					BigFamer的博客
				

				

					10-26
					
					2万+
					
				

			

		

		

			
				
一、前言
在开发一款桌面应用时，设置窗口图标和桌面快捷方式图标是两个必须的需求。下面来看看我基于Electron开发的实际项目中是如何配置最终实现了这个需求吧。
二、实现设置窗口图标和桌面快捷方式图标
1、准备好你的Icon图标
要得到一个icon图标十分简单，你需要有一张目标图标的png格式图片，然后找一个可以免费在线转换icon图标的网站转换下载即可，这里我提供一个我用过的很不错的在线转换工具：在线转换icon图标工具。

这里需要说明一下，有的童鞋可能在纠结转换成多大的图标才可以呢？
我的快捷方式图标

			
		

	





	

		

			

				
					
使用Electron和JavaScript创建跨平台桌面应用

				
			

			

				

					
				

			

		

		

			
				
"使用Electron构建桌面应用，利用JavaScript、Node.js和Electron技术栈创建个性化的桌面应用程序。本文档适合具有HTML/CSS/JavaScript基础，熟悉Node.js的开发者，介绍如何利用Electron开发跨平台的桌面应用。"  在...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值