精华内容
下载资源
问答
  • 因为基于chrome的新版本,可以使用各种高级语法,不用担心引入过多的Polyfill而影响项目 解决跨域问题,发请求时候可以少一个Options请求

    因为基于chrome的新版本,可以使用各种高级语法,不用担心引入过多的Polyfill而影响项目

    解决跨域问题,发请求时候可以少一个Options请求

     

     

     

    展开全文
  • 初探Electron,从入门到实践

    千次阅读 2019-08-30 08:59:42
    Electron能做什么?许多伟大的公司使用Electron框架的原因又是什么? 带着这些问题和疑惑,通过本文的介绍,可助您全面地认识Electron这门新兴的技术,迅速找到其入门途径,并理解Electron为何被称为当下开发桌面A....

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

    在开始之前,我想您一定会有这样的困惑:标题里的Electron 是什么?Electron能做什么?许多伟大的公司使用Electron框架的原因又是什么?

    带着这些问题和疑惑,通过本文的介绍,可助您全面地认识Electron这门新兴的技术,迅速找到其入门途径,并理解Electron为何被称为当下开发桌面App的最佳选择。

     

    初探Electron
    一、Electron是什么?(为何称之为“跨平台桌面浏览器”)

    前端开发的魅力,在于开发者随时要面临全新技术的挑战!

    曾几何时,作为前端开发者的你可曾想过:如何利用HTML、CSS和JavaScript构建跨平台的桌面应用程序?借助 Electron,这项工作将比你想象的更加简单。

    Electron作为一个使用新兴技术(包括JavaScript,HTML和CSS)创建桌面应用程序的框架,其负责处理硬件,开发者可以更专注于应用程序的核心并从底层更改其设计。

     

    Electron设计之初便充分结合了当今最好的Web技术,作为一个跨平台的“集成框架”,它可以轻松地与Mac、Windows和Linux兼容。而所谓的“集成框架”也就是它将“Chromium”和“Node.js”很好的集成在了一起,并明确分工,Electron负责硬件部分,“Chromium”和“Node.js”负责界面与逻辑,大家井井有条,共同构成了一个成本低廉却十分高效的解决方案,在快速交付上甚至比Native还要快速。

     

    Electron发展里程碑

    ·      2013年4月11日,Electron以Atom Shell为名起步。

    ·      2014年5月6日,Atom以及Atom Shell以MIT许可证开源。

    ·      2015年4月17日,Atom Shell改名为Electron。

    ·      2016年5月11日,1.0版本发布。

    ·      2016年5月20日,允许向Mac应用商店提交软件包。

    ·      2016年8月2日,支持Windows商店。

     

    简而言之,Electron JS是一个运行时框架,它允许用户使用HTML5、CSS和JavaScript创建桌面套件应用程序,而大部分应用程序都是由两种非常受欢迎的技术混合而成:Node.js和Chromium。因此,您编写的任何Web应用程序都可以在Electron JS 上正常运行。

     

    Electron的内置功能包括:

    ·      自动更新 - 使应用程序能够自动更新、升级

    ·      本机菜单和通知 - 创建本机应用程序菜单和上下文菜单

    ·      应用程序崩溃报告 - 您可以将崩溃报告提交给远程服务器

    ·      调试和分析 - Chromium的内容模块可以发现性能瓶颈和运行缓慢的原因。此外,您也可以在应用中使用自己喜欢的Chrome开发者工具

    ·      Windows安装程序 -您可以快速而简单创建安装包


    二、Electron 可以用来做什么?(哪些场景需要使用Electron)

    以Windows平台应用开发为例,大部分人首先会想到使用成熟的开发方案,如QT(C++)、WPF(C#) 等。但面临以下几种使用场景,这些方案将显得捉襟见肘:

    ·      公司要设计一个全新的APP, 但技术人员大部分由前端开发构成

    ·      公司原本就有在线的Web应用,但是想让该应用能够在桌面端直接打开(离线状态下也可使用),并增加一些与系统交互的功能

     

    以我的亲身经历为例:

    在SpreadJS项目中,我们需要将基于web版的表格编辑器封装成APP使用,同时增加文件操作的能力,如导入导出excel、导入PDF等,而SpreadJS是一个纯前端的表格控件,开发人员全部由前端开发组成,对C++和C#并不熟悉,如果投入过大的时间精力用来学习其他开发语言,整个项目的技术管理和项目管理将变得无法控制。除此之外,鉴于项目本身对应用的业务逻辑要求并不高,只是套一个具有浏览器属性的运行环境即可,因此,单独为此配置C++、C# 开发人员将无形中提升更多项目成本。

     

    为此,我们引入了Electron框架:现有的前端开发人员能在不学习其他语言的情况下,直接搞定上述需求,这就是Electron 为我们带来的价值。


    三、为什么选择 Electron?(Electron的出现为前端开发者谋得了一份好差事)

    可以这么说,Electron这个框架让网路里流传很广的一句话不再是玩笑:“不要和老夫说什么C++、Java,老夫行走江湖就一把JS,遇到需求撸起袖子就是干”。Electron可以帮助前端开发者在不需要学习其他语言和技能的情况下,快速开发跨平台桌面应用。

     

    Electron的出现将蚕食很大一部分桌面客户端领域的市场份额,鉴于它的跨平台特性,在不同系统之间仅需少量的优化工作。可想而知,这个成本到底有多低。

    在开发的体验上,Electron是基于"Chromium"和"Node.js"的,所以几乎所有的Node.js模块都可以在Electron上运行,并很容易使用“npm”搭积木的方式快速交付一个产品。

     

    四、大型应用使用Electron框架的成功案例

     
    1. SpreadJS纯前端表格控件
     
    SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,以“高速低耗、高度类似Excel、可无限扩展”为产品特色,提供移动跨平台和浏览器支持,同时满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填报、在线文档、图表公式联动、类 Excel UI 设计等业务场景,在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成等场景下无需大量代码开发和测试,极大降低了企业研发成本和项目交付风险。
     

    2. WebTorrent

    WebTorrent,作为第一个在浏览器中运行的torrent客户端,是一个完全由JavaScript编写并使用WebRTC进行点对点传输的客户端应用。无需任何插件,扩展或安装,WebTorrent将用户链接到分散的浏览器到浏览器网络,以确保有效的文件传输。

    WebTorrent使用Electron框架开发,使其尽可能轻量、无广告且开源。此外,使用Electron还有助于流式传输,并充当混合客户端,将应用程序连接到所有流行BitTorrent和WebTorrent网络。

     

    3. WordPress

    WordPress 桌面是一个使用了Electron和React作为框架的桌面应用程序,提供无缝的跨平台体验,允许用户专注于他们的内容和设计,而不会被任何浏览器标签所分心。

     

    4. Slack

    Slack采用了Electron框架构建,鉴于其高性能表现和无框架外观,将带来与浏览器完全不同的体验方式。对于寻求更集中的工作空间的团队来说,Slack Desktop绝对是最适合的应用程序之一。

    虽然Slack Desktop融合了很多技术,但大多数资源文件和代码都是远程加载的,它们结合了Chromium的渲染引擎和Node.js运行时和模块系统。

     

    5. WhatsApp

    WhatsApp作为下载量最高的Messenger应用程序,也是基于Electron框架构建的。Electron帮助WhatsApp开发人员以低廉的成本完成了几乎所有工作,并通过更加简化和创新的技术,为用户带来全新的桌面体验方式。


    Electron 架构实现
     

    Electron基本文件结构

    Electron有一个基本的文件结构,类似于我们在创建网页时使用的文件结构:

    electron-quick-start

    - index.html 这是一个HTML5网页,目的用于提供画布(canvas)

    - main.js 创建窗口并处理系统事件

    - package.json 是我们应用程序的启动脚本。它将在主进程中运行,并包含有关应用程序的所有信息

    - render.js 处理应用程序的渲染过程

     

    Electron的架构主要分为两部分:主进程和渲染进程

    回顾以往的web开发,我们的代码,无论是HTML、CSS还是Javascript,都是运行在浏览器沙盒中的,我们无法越过浏览器的权限访问系统本身的资源,代码的能力被限制在了浏览器中。浏览器之所以这么做,是为了安全的考虑。设想一下,我们在使用浏览器的时候,会打开各式各样不同来源的网站,如果JavaScript代码有能力访问并操作本地操作系统的资源,那将是多么可怕的事情。

     

    假设:你在某天不小心打开了一个恶意的网站,可能你存储在硬盘上的文件就被偷走了(都用不着去修电脑)。

     

    但我们要开发的是桌面应用程序,如果无法访问到本地的资源肯定是不行的。Electron将nodejs巧妙的融合了进来,让nodejs作为整个程序的管家。管家拥有较高的权限,可以访问和操作本地资源,使用原本在浏览器中不提供的高级API。同时管家也管理着渲染进程窗口的创建和销毁。所以,我们将这个管家称之为主进程。在使用Electron开发的程序中,会使用main.js作为程序的主入口,该文件内代码执行的内容,就是主进程中执行的内容。

     

    主进程

    主进程控制应用程序的生命周期。Electron 用来运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。它内置了完整的Node.js API,主要用于打开对话框以及创建渲染进程。此外,主进程还负责处理与其他操作系统交互、启动和退出应用程序。

     

    主进程就像是应用程序的管家,负责管理整个应用程序的生命周期以及所有渲染进程的创建。

    按照惯例,主进程位于名为main.js的文件中,你可以通过在package.json文件中修改配置属性来更改主进程文件。

    比如,我们可以打开package.json并更改配置属性:

    1

    “main”: “main.js”, =》“main”: “mainTest.js”,

     

    请注意,Electron有且只有一个主进程。且主进程销毁时,所有渲染进程也将一并销毁。在chrome浏览器的默认策略下,每一个tab都是独立的进程,Electron也正是利用了这一策略。

     

    渲染进程

    渲染进程是应用程序中的浏览器窗口。与主进程不同,Electron可以有许多渲染进程,且每个进程都是独立的。由于 Electron 使用了 Chromium 来展示web 页面,所以 Chromium 的多进程架构也被使用到。 每个Electron中的 web 页面运行在它自己的渲染进程中。

    正是因为每个渲染进程都是独立的,因此一个崩溃不会影响另外一个,这些要归功于Chromium的多进程架构。

     

    如何保持进程通信?

     

    即便Electron中的所有进程同时存在并保持独立运行,但他们仍然需要以某种方式进行沟通,尤其是在他们负责不同任务的时候。file:///C:/Users/markxu/AppData/Local/Temp/msohtmlclip1/01/clip_image034.png

    为了保持进程通信,Electron有一个进程间通信系统(IPC也就是内部进程通信)。您可以使用IPC在主进程和渲染进程之间传递信息。

    1

    2

    3

    4

    5

    6

    7

    8

    // 在主进程中

    global.sharedObject = {

    someProperty: 'default value'

    }

    // 在第一个页面中

    require('electron').remote.getGlobal('sharedObject').someProperty= 'new value'Copy

    // 在第二个页面中

    console.log(require('electron').remote.getGlobal('sharedObject').someProperty)

     

    Electron 进程通信的实现方式:

    ·      主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。

    ·      主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的,它只关心它所运行的 web页面。

    ·      在页面中调用与 GUI 相关的原生 API 是不被允许的,因为在 web 页面里操作原生的GUI 资源是非常危险的,而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。

    说句题外话:在两个网页(渲染进程)间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 其中比较好的方案是用 Storage API, localStorage,sessionStorage 或者 IndexedDB,但这些不是今天的主题。

     

    如何构建 Electron系统架构?

    为了降低构建整个 Chromium 带来的复杂度,Electron通过libchromiumcontent 来访问 Chromium 的Content API。libchromiumcontent 是一个独立的、引入了 Chromium Content 模块及其所有依赖的共享库。用户不需要一个强劲的机器来构建Electron。

    Electron只用了Chromium的渲染库而不是其全部组件。这使得升Chromium更加容易,但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。

     

    打包

    原来打包步骤略微繁琐,如今由于社区发展,产生了很多优秀的打包工具,让我们可以不用关注很多细节,(比如asar)

    1

    2

    3

    4

    5

    6

    7

    8

    // 在主进程中

    global.sharedObject = {

    someProperty: 'default value'

    }

    // 在第一个页面中

    require('electron').remote.getGlobal('sharedObject').someProperty= 'new value'Copy

    // 在第二个页面中

    console.log(require('electron').remote.getGlobal('sharedObject').someProperty)

     

    main 端

    1

    2

    3

    4

    ipcMain.on('readFile', (event, { filePath })=> {

    content content = fs.readFileSync(filePath,'utf-8');

    event.sender.send('readFileSuccess', { content});

    });

      

    renderer 端

    1

    2

    3

    4

    5

    6

    ipcRenderer.on('readFileSuccess', (event, {content }) => {

    console.log(`content: ${content}`);

    });

    ipcRender.send('readFile', {

    filePath: '/path/to/file',

    });

     

    我们仅需做的 :将app 的目录结构整理好,提供对应的资源,如icon等,然后使用工具制作镜像即可将资源打包成为各个平台下的APP应用。

     

    打包工具的选择

    file:///C:/Users/markxu/AppData/Local/Temp/msohtmlclip1/01/clip_image036.jpg

    通常情况下,我们选择Electron-builder (跨平台支持性较好,上手成本低)

     

    Electron 快速上手实践  

    这里我准备了一个Demo项目,这个Demo源码您可以在葡萄城技术社区获取到。

    这个演示我将以SpreadJS的一个应用为例,展示如何将Web应用转换为Electron桌面应用。

    我这里使用electron-builder进行项目文件的打包,您可以直接在项目根目录通过 npx electron-builder命令执行打包命令。

    项目打包过程可能需要些时间,在这期间,我向您介绍一下Electron 打包的配置文件,您可以根据您的实际情况配置如下文件以满足您的需求

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    "build": {

    "appId""your.id"// appid

    "productName""程序名称",// 程序名称

    "files": [ // 打包需要的不过滤的文件

    "build/**/*",

    "main.js",

    "node_modules/**/*"

    ],

    "directories": {

    "output""./dist-out"// 打包输出的目录

    "app""./"// package所在路径

    "buildResources""assets"

    },

    "nsis": {

    "oneClick"false// 是否需要点击安装,自动更新需要关掉

    "allowToChangeInstallationDirectory":true//是否能够选择安装路径

    "perMachine"true // 是否需要辅助安装页面

    },

    "win": {

    "target": [

    {

    "target""nsis"// 输出目录的方式

    "arch": [ // 输出的配置ia32或者x64/x86

    "x64"

    }

    ],

    "publish": [ // 自动更新的配置

    {

    "provider""generic"// 自己配置更新的服务器要选generic

    "url":"http://127.0.0.1:8080/updata/" //更新配置的路径

    }

    }

    }  

     

     缓慢的打包进程结束后,您应该可以在项目目录中的build目录看到生成的exe文件

    点击安装,它就像一个普通的桌面应用程序一样开始了安装进程。(这里的软件名称和软件logo都是我们项目中配置好的)

     

    安装完成后,打开程序,这里我们可以看到打包好的应用和在Web端访问时的效果别无二致,同时也能够像其他桌面应用程序一样,支持离线使用。

     

     

    至此,初探Electron,从入门到实践教程结束,如果大家还有更多使用上的疑惑或想要了解更多高级用法,可以通过官方文档学习https://electronjs.org/docs

    同时,葡萄城资深开发工程师也为大家在2019年9月4日 14:00准备了干货满满的线上技术分享公开课,本次分享的内容也正是文中提到的Electron实践,届时欢迎大家按时参加。

    http://live.vhall.com/878864086

    展开全文
  • electron 前言

    2020-05-20 16:18:00
    electron什么 electron是一个让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序 像Typora 和 vscode这些...

    学习electron之前要掌握的知识

    • html
    • CSS
    • JavaScript
    • 最好会vue或react,进一步提高开发效率

    electron是什么

    • electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序
    • 像Typora 和 vscode这些大名鼎鼎的软件就是用electron做的

    浅谈优缺点

    1. 跨平台,但只能跨PC,不能跨手机等嵌入式领域
    2. 学习要求低,只需要会前端就能用electron开发应用

    引用

    https://blog.csdn.net/weixin_34248258/article/details/87976782

    展开全文
  • electron开发计算器

    2020-04-26 16:41:38
    什么是electron,它能做什么 使用electron展示一个桌面应用程序的界面(简单的窗口展示) electron中菜单的添加和配置 electron中的主进程 electron中的渲染进程 electron中主进程和渲染进程之间的通信 ...

    electron完成一个简易的桌面计算器

    效果:
    在这里插入图片描述

    目录
    • 什么是electron,它能做什么

    • 使用electron展示一个桌面应用程序的界面(简单的窗口展示)

    • electron中菜单的添加和配置

    • electron中的主进程

    • electron中的渲染进程

    • electron中主进程和渲染进程之间的通信

    • electron中系统托盘的简单实现

    • electron应用程序的打包(windows环境下)

    1:大前端的发展现状

    现在前端的发展已经到了大前端的时代了。大前端时代是WEB统一的时代,利用html5或者6甚至7,不但可以开发传统的网站,做炫酷的网页动态效果,更可以实现BS架构应用程序、开发手机端web应用,移动端的app应用、移动端Native应用程序、智能设备(比如可穿戴智能手表,可穿戴智能衣服)等,同时使用node.js还可以实现后台开发。甚至还可以实现桌面应用程序的开发。下面我们要介绍的electron就是用来实现跨平台的桌面应用程序开发的。

    2:electron介绍

    Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将ChromiumNode.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。简单说,electron 是一个可以让我们使用js创建桌面应用程序的框架,并且可以很简单的实现跨平台,让我们可以更轻松的书写业务逻辑,而不用担心跨平台的问题

    2.1.它能做什么

    Electron 可以让我们使用纯 JavaScript 调用丰富的原生(操作系统) API 来创造桌面应用。除了常规的 HTML5 接口,这些应用能够使用所有的 Node.js 模块,以及 Electron 特有的模块

    2.2.开发环境

    你可以使用原生的Node.js开发环境来开发Electron应用。 为了打造一个Electron桌面程序的开发环境,你只需要安装好的Node.js、npm、一个顺手的代码编辑器,同时了解一些操作系统命令行客户端的常规操作

    3:使用electron完成一个简易计算器

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFnugQN4-1577030250965)(E:\electron\文档资料\images\00-demo.png)]

    3.1.初体验-展示一个桌面应用程序界面
    • electron的下载和引入

      npm install electron --save-dev
      npm install electron -g
      -----------------
      const { app,BrowserWindow } = require('electron'
    • app的ready事件:main.js

      • electron会自动的触发ready事件

      • 在这个事件中可以创建electron窗口

        app.on('ready', () => {
            hm_createWindow() //创建窗口的函数调用
        })
        
    • electron应用程序窗口的创建(hm_createWindow函数)

      • 引入BrowserWindow

      • 通过BrowserWindow函数创建窗口对象

      • 对窗口进行配置

        win = new BrowserWindow({
            width:390,
            height:670,
            //  设置标题
            title:'计算器'
        })
        
    • electron窗口的常见操作

      • 加载其它指定的页面

        win.loadURL(path.join(__dirname,'./views/index.html')) //使用了path模块生成路径
        
      • 开启调试工具

        win.webContents.openDevTools()
        
      • 添加关闭窗口的事件

        win.on('close',() => {
            // 实现关窗口之后的操作
            win = null
            // 关闭主窗口的时候同时也关闭整个应用程序
            app.quit()
        })
        
    • electron应用程序的启动

      • electron main.js
      • electron .
      • 添加package.json的script配置:“start”: “electron main.js”,之后使用npm start启动electron
    3.2.添加应用程序的菜单项
    • 添加菜单项的方法:Menu.buildFromTemplate(菜单项模板)

    • 创建菜单项模板

      • label:菜单项文本设置

      • click:单击事件,指定事件处理函数

      • role:指定菜单项的角色

      • accelerator:触发当前菜单项的快捷键

      • 设置子菜单项:通过submenu设置

        let template = [
            {
                label:'计算器',
                submenu:[
                    {
                        label:'退出',
                        accelerator:'F11',
                        // role String (可选)-内置事件, 定义菜单项的行为, 当指定 click 属性时将被忽略
                        role:'quit',
                        click:() => {
                             app.quit()
                        }
                    }
                ]
            }
        ]
        
    • 添加菜单到应用程序:

      Menu.setApplicationMenu(menu)
      
    3.3.主进程和渲染进程
    • 主进程:在Electron中运行package.json和main脚本的进程称为主进程。例如,main.js文件属于主进程,同时在main.js文件中直接引入的js文件也属于主进程(如:require(’./mainProcess/menu.js’))
    • 渲染进程:electron使用Chromium的多进程机制来渲染页面,每个页面拥有一个自己的进程,该进程称为渲染进程。如main.js文件中加载了index.html文件,在index.html文件中引入的index.js就属于渲染进程
    • 主进程和渲染进行之间通信的常见方式:(注意,这些方法全部需要在主进程已经创建了BrowserWindow之后才有效)
      • ipcRenderer用于渲染进程
        • ipcRenderer.on(channel, listener) --> channel为事件频道,字符串.listener为触发回调函数,用于响应webContent.send()
        • ipcRenderer.send(channel, data) --> 概念同上,用于向ipcMain发送异步信息
      • ipcMain用于主进程,响应从渲染进程中发送的消息
        • ipcMain.on(channel,listener) --> 响应从ipcRender中相同channel
      • event.sender:主进程监听到渲染进程发送的消息,在响应事件回调函数中使用event.sender.send()方法可以向渲染进程发送消息
      • webContent:ipcMain本身是无法直接发送事件的,只能通过响应事件回调的event来发送,那如果我们想先让主进程发送消息就可以使用webcontent.这个webcontent是在BrowserWIndow实例中的方法
        • webContent.send(channel,data) --> 主进程向渲染进程发送消息
    • 不同渲染进程之间共享数据
      • 我们可以简单的使用HTML5中提供的API来实现,如localStorage和sessionStorage
      • 在electron中,我们可以在主进程中将一个对象存储为全局变量,在渲染进程中通过remote模块进行操作
    3.4.完成菜单项功能:颜色设置
    • 添加设置颜色的静态页面:color.html

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdUtUlrn-1577030250966)(E:\electron\文档资料\images\01-setColor.png)]

    • 添加设置颜色菜单项

      {
          label:'颜色',
              click:() => {
                  wh_createColorWindow()
              }
      }
      
    • 添加单击事件-创建设置颜色窗口

      function wh_createColorWindow(){
          let win = new BrowserWindow({
              width:250,
              height:100,
              title:'颜色'
          })
          // 加载关于页面
          win.loadURL(path.join(__dirname,"../views/color.html"))
          // 设置不再需要菜单块
          win.setMenu(null)
      }
      
    • 业务实现:主进程中接收渲染进程传递的数据

      • 渲染进程中引入ipcRenderer

        const {ipcRenderer} = require('electron')
        
      • 通过ipcRenderer发射事件让主进程进行监听处理

        // 渲染进程向主进程发送消息
        ipcRenderer.send('wh_colortomain',currentColor)
        
    • 业务实现:渲染进程接收主进程传递的数据

      • 在主进程中引入ipcMain:在主进程中使用,通过ipcMain可以接收渲染进程中发送过来的消息

      • 监听渲染进程中发射的事件:

        // 主进程监听渲染进程发送过来的消息
        ipcMain.on('wh_colortomain',(event,color) => {
            // 设置样式:主进程向渲染发送消息:设置index.html页面中的dom元素的样式
            win.webContents.send('wh_setColor',color)
        })
        
      • 业务实现:通过单独模块处理颜色设置

        // 渲染进程监听主进程发送过来的消息,进行处理
        ipcRenderer.on('wh_setColor',(event,color) => {
            // 设置对应元素的样式
            result_text.style.color = color
            // 将当前用户设置的颜色存储到本地存储中
            localStorage.setItem('userColor',color)
        })
        
    3.5.完成菜单项功能:字体大小设置
    • 添加事件

      {
          label:'字体减小',
              accelerator:'F12',
                  click:(item,cwindow,event) => {
                      cwindow.webContents.send('sub')
                  }
      }
      
    • 完成事件处理

      ipcRenderer.on('sub',() => {
          // 获取字体大小
          let fontSize = window.getComputedStyle(result_text,null).fontSize
          // 调整字体大小
          let fontNum = fontSize.replace('px','') - 0 - 3
          // 重置
          result_text.style.fontSize =  fontNum + "px"
          localStorage.setItem('userFontSize',fontNum)
      })
      
    3.6. 实现桌面端隐藏到托盘
    • tray模块:通过tray可以实现系统托盘功能

    • 我们的需求:在点关闭的时候把window隐藏起来,并且任务栏也一并需要隐藏,在点击系统通知区的图标时再把界面显示出来

    • 引入:const { Tray,Menu } = require(‘electron’)

    • 代码:minProcess/tray.js

      // 使用tray可以来实现通知栏图标
      const { Menu, Tray, dialog } = require('electron')
      const path = require('path')
      
      function createTray(win) {
          let appIcon = new Tray(path.join(__dirname, '../images/lar.jpg'))
      
          // 为图标构建菜单项
          const menu = Menu.buildFromTemplate([
              {
                  label: '关闭',
                  click: () => {
                      dialog.showMessageBox({
                          type: 'warning',
                          title: '退出提示',
                          message: '请问是否真的需要退出?',
                          buttons: ['确定', '取消']
                      }, (index) => {
                          if (index == 0) {
                              appIcon.destroy()
                              app.quit()
                          }
                      })
                  }
              }
          ])
      
          appIcon.on('click', () => { //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能
              win.isVisible() ? win.hide() : win.show()
              win.isVisible() ?win.setSkipTaskbar(false):win.setSkipTaskbar(true);
          })
      
          // 设置鼠标上移时的文本提示
          appIcon.setToolTip('黑马程序员')
          // 设置菜单项
          appIcon.setContextMenu(menu)
      }
      // 暴露成员
      module.exports = createTray
      
    3.7.完成简易的计算功能
    • 为dom元素绑定事件

      <div class="calculate">
          <div class="item" onClick="main.reset()">AC</div>
          <div class="item" onClick="main.clickopt('+/-')">+/-</div>
          <div class="item" onClick="main.clickopt('%')">%</div>
          <div class="item orange" onClick="main.clickopt('/',this)">÷</div>
          <div class="item" onClick="main.clickNum('7')">7</div>
          <div class="item" onClick="main.clickNum('8')">8</div>
          <div class="item" onClick="main.clickNum('9')">9</div>
          <div class="item orange" onClick="main.clickopt('*',this)">×</div>
          <div class="item" onClick="main.clickNum('4')">4</div>
          <div class="item" onClick="main.clickNum('5')">5</div>
          <div class="item" onClick="main.clickNum('6')">6</div>
          <div class="item orange" onClick="main.clickopt('-',this)">-</div>
          <div class="item" onClick="main.clickNum('1')">1</div>
          <div class="item" onClick="main.clickNum('2')">2</div>
          <div class="item" onClick="main.clickNum('3')">3</div>
          <div class="item orange" onClick="main.clickopt('+',this)">+</div>
          <div class="item large" onClick="main.clickNum('0')">0</div>
          <div class="item" onClick="main.clickNum('.')">.</div>
          <div class="item orange" onClick="main.calc()">=</div>
      </div>
      
    • 单击数字

      clickNum(num) {
          res = document.querySelector('.result-text'),
          isPoint = num === '.';
          // 数字转为字符串
          result = result.toString();
          // 如果输入小数点并且已经结果中已经有小数点了
          if (result.indexOf('.') !== -1 && isPoint) {
              return;
          }
          result = result + num;
          res.innerHTML = result;
      }
      
    • 单击运算符

      clickopt(ope) {
          res = document.querySelector('.result-text');
          switch (ope) {
              case '+/-':
                  res.innerHTML = result = math.eval(result + '*-1');
                  break;
              case '%':
                  res.innerHTML = result = math.format(math.eval(res.innerHTML + '/100'),4);
                  break;
              default:
                  res.innerHTML = result = result + ope
                  break;
          }
      }
      
    • 重置

      reset() {
          res = document.querySelector('.result-text');
          res.innerHTML = '0';
          result = ''
      }
      
    • 计算结果

      calc(){
          res = document.querySelector('.result-text');
          res.innerHTML = result =  math.eval(result)
      }
      

    4:应用程序打包

    #####4.1 打包为可执行文件

    • 安装 electron-packager:npm install --save-dev electron-packager
    • 正式打包
      • 直接使用命令打包

        • electron-packager <应用目录> <应用名称> <打包平台> --out=<输出目录> <架构> <应用版本> <忽略文件><图标> --overwrite
        • 配置说明:–platform
          • win: 打包平台:–platform=win32 | 架构:–arch=x64 | 图标:–icon=**.ico
          • mac:打包平台:–platform=darwin| 架构:–arch=x64 | 图标:–icon=**.cins
      • 配置package.json命令实现打包

         "packagewin": "electron-packager ./ heima --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --icon=./images/icon.ico --overwrite",
        
    4.2 打包为安装包
    • 下载:npm i electron-builder -g

    • 说明:electron-builder可以将应用程序打包为安装文件,如.exe .dmg,对于windows系统打包为.exe,对于mac系统打包为.dmg

    • 实现electron-builder的配置

       "build": {
          "appId": "com.itcast-wu.app",
          "directories": {
            "app": "./"
          },
          "productName": "计算器",
          "dmg": {
            "icon":"./images/mac.icns",
            "window": {
              "x": "200",
              "y": "150",
              "width": 500,
              "height": 400
            }
          }"mac": {"icon":"./images/mac.icns"},
          "win": {"icon":"./images/icon.ico"}
        }
      

      添加script脚本配置:

      "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "packagewin": "electron-packager ./ heima --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --icon=./images/icon.ico --overwrite",
          "buildmac": "electron-builder --platform=mac --arch=x64",
          "buildwin": "electron-builder --platform=win --arch=x64"
        }
      

      运行命令:

      npm run buildwin
      

    打包后的文件:

    windows下面打包.exe

    mac下面打包 .dmg

    展开全文
  • Electron环境搭建

    2019-08-20 22:52:22
    Electron环境搭建 最近学习中用到了Electron,特此整理一波 一.什么是Electron ... Electron将Chromium和Node.js合并到了同一个...这么说可能你还是不明白Electron能用来什么,简单来说,使用Electron你可以利用Ht...
  • 采用electron开发桌面应用

    千次阅读 2018-12-26 11:43:43
    什么是electron,能做什么? 1.electron是搭载谷歌v8内核的高性能的node环境 ,所有node能用的东西.这里都能用。 2.前端做桌面应用. 前端做桌面应用(electron, nw) 1. electron link. 官网地址: [link]...
  • 最初我是打算用java+vue一套稍微大型的量化交易系统 但因为时间的关系 最终选择了electron做了套阉割版 当然 后续如果有时间了 我会重新用java+vue开发一套。 其实一开始是自己打算自己一个人用的,所以代码规范...
  • 采用electron开发桌面用用

    千次阅读 2018-12-26 11:58:59
    什么是electron,能做什么? 1.electron是搭载谷歌v8内核的高性能的node环境 ,所有node能用的东西.这里都能用。 2.前端做桌面应用. 前端做桌面应用(electron, nw) 1.electron [link]...
  • 也不难理解,为什么 Electron 开发跨平台的桌面应用了。 但是,不同系统间还是会有很大的差异,需要相应地一些额外处理,使得打包出的应用在不同系统下都正常运转。但相比于 80% 都完全复用的代码,这些成本...
  • 01 Electron开发环境搭建,创建demo

    千次阅读 2020-05-05 18:08:05
    那么就开始搞事吧,这就是这个专栏系列开通的原因,至于写到什么程度,我也不太确定,反正这篇文章先给大家介绍下如何搭建Electron开发环境并创建一个项目。 环境要求 windows环境(看自己啦) NodeJS环境(因为...
  • elelctron提供了一个方式来自动唤起electron应用(如下图),这一次就让我们来学学如何通过连接来唤起electron应用,并且我们可以使用这个功能来什么。 1.1 协议唤起示例: 1.2 什么是协议 electron注册的协议, ...
  • 什么Electron 简单的说Electron就是一个让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 而这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行使用。非常适合前端来桌面应用开发。 ...
  • Electron将Web页面打包成桌面应用实例

    万次阅读 多人点赞 2018-07-02 12:07:32
    上一篇文章Electron-vue脚手架改造vue项目 介绍了如何将Vue项目构建成桌面应用的方法。...事实是,将项目打包成桌面应用跟使用什么前端框架没有关系,通过Electron任何项目都打包成桌面应用 electron官网:https...
  • 最近有一个桌面小程序的想法,因为之前用过electron,用起来还是比较顺手的。算法是之前写好的用的是python,没时间去拿js再写一遍了,也不知道有什么其他好方法调用python,所以只能用pyinstaller打包成exe文件,...
  • 使用electron-builder在windows上打包并自动更新 心得:从一个小白开始独自一人了解electron这...注意:文章适合了解electron什么,知道如何简单打包的读者,文章中代码只是一种思路参考,并不完整,不直接使...
  • 在前四篇介绍了electron+vue的难点,到了真正上手的时候会发现有很多的细节才是真正让人头疼的,网上答案千篇一律,并不什么效果,现在就具体开发细节问题来一下整体说明! electron基础 官方文档 什么是...
  • 卡胡圭 一个简单的Kahoot垃圾邮件发送者的GUI。 不隶属于Kahoot。...它能做什么 yeet 开始使机器人加入 切换高级设置菜单 打开高级设置菜单(见下文) 控制台:切换显示 显示控制台 显示测验信息 打开一些
  • 首先 ...这个给了很大启发 ...electron的话注意安装过就不打包了 electron一些js控制样式跟浏览器解析方式不同,写起来要注意格式 写高度的最好写明高度,一些auto会失效 其他的没什么了,想起来在补充 ...
  • 1. RabbitMQ能做什么? RabbitMQ是一个消息代理 - 一个消息系统中间件。它可以为你的应用提供一个通用的消息发送和接收平台,并且保证消息在传输过程中的安全。它可以允许软件、应用相互连接和扩展,通过将消息的...
  • 近段时间学习了Rust,一直想着什么东西深入学习,因为是刚学习,很多地方都不熟悉,所以也就不拿它来编译器这些,至于web开发,实际上我并不建议拿这个来学习一门语言,大概有几个方面,一是web开发的套路...
  • 什么这个? 主要是有压缩图片的需要,但是去找了一圈,发现都有点麻烦 例如有的需要压缩之后,再下载下来 有点不支持文件夹内所有图片压缩,还得一张张上传 为了一个自己感觉比较方便的压缩图片工具,我开发...
  • 其实这个应用并不是那么的特别需求,一来本人写blog越来越少,二来开发工作也是越越少,再者目前的编辑器几乎都支持直接剪切板上传图片,使图床应用的场景越来越少。不过本人本着不想丢弃技术的内心想法,以及锻炼...
  • 从最新的技术趋势看前端的未来

    万次阅读 2016-11-08 07:20:49
    本文仅代表 Phodal 的个人观点,来听听一个前端程序员的 YY。 新一期的ThoughtWorks技术雷达有点出乎意料,使用new标签的框架、工具、技术、...前端在可见的未来在那篇《最流行的编程语言JavaScript能做什么?》的文
  • 渲染进程做什么? 它的开发主要涉及到两个进程的协作——Main(主)进程和Renderer(渲染)进程。简单的理解两个进程的作用: 1.Main进程主要通过Node.js、Chromium和Native APIs来实现一些系统以及底层的操作,...

空空如也

空空如也

1 2 3
收藏数 54
精华内容 21
关键字:

electron能做什么