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通过将Chromium和Node.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()
          }