electron实现计算器

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

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

接下来着使用eletron从零完成一个计算器项目

搭建项目

展示一个桌面应用程序界面

• 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

添加应用程序的菜单项

• 添加菜单项的方法：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)
  

主进程和渲染进程

• 主进程：在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模块进行操作

完成菜单项功能：颜色设置

• 添加设置颜色菜单项

  {
      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)
    })
    

完成菜单项功能：字体大小设置

• 添加事件

  {
      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)
  })
  

实现桌面端隐藏到托盘

• 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
  

完成简易的计算功能

• 为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)
  }
  

应用程序打包

打包为可执行文件

• 安装 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",
    

打包为安装包

• 下载：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