electron 计算器小案例 以及 简单的笔记

 1.什么是electron，它能做什么？

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

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

        可以使用原生的 Node.js 开发环境来开发electron应用。

2.使用electron展示一个桌面应用程序的界面（简单的窗口展示）

        npm init -y  //创建package.json 文件

  electron的下载和引入

npm install electron --save-dev

npm install electron -g 

//-----------------------------

const {app,BrowserWindow} = require('electron')

app的ready事件

        electron 会自动的触发ready事件

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

app.on('ready',()=>{
    //调用创建窗口的函数
    calculate_createwindow()
})

electron 应用程序窗口的创建

//引入  BrowserWindow
const {app,BrowserWindow} = require('electron')

let win  = new BrowserWindow({
    //配置窗口
    width:400,
    height:380,
    title:'计算器'
})

electron 窗口的常见操作

        加载其他指定的页面

const path = require('path')

// 使用的electron 版本为 ^15.3.0 使用 loadURL 加载 失败
// win.loadURL(path.join(__dirname,'/views/index.html'))

// 于是换成了 loadFile
 
win.loadFile(path.join(__dirname,'/views/index.html'))  

        开启调试工具

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.electron 添加应用程序的菜单项

        添加菜单项的方法：Menu.buildFromTemplate(菜单项模板)

        创建菜单模板

                。label：菜单项文本设置

                。click：点击事件，指定事件处理函数

                。role：指定菜单项的角色

                。accelerator ：触发当前项的快捷键

                。设置子菜单项：通过submenu 设置      

4.electron 中的主进程和渲染进程

        主进程：在 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 来实现，如 localsStorage 和 sessionStorage

5.electron应用程序的打包（window环境下）

        (1). 打包为可执行文件

        1.安装  electron-packager  

            npm install --save-dev electron-packager  

        2.打包

        直接使用命令打包 electron-packager  <应用目录> <应用名称> <打包平台> -out = 

 <输出目录> <架构><应用版本><忽略文件><图标>   -overwrite

        配置说明：--platform

                window: --platform=win32 | 架构：--arch=x64 | 图标: --icon = **.ico

                mac:--platform=darwin| 架构：--arch=x64| 图标: --icon = **.icns

        配置 package.json 命令实现打包(window)

"scripts": {
    "packagewin": "electron-packager ./ KPT --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --icon=./images/tray.ico --overwrite "
  },

        3.运行打包命令(window)

        npm run packagewin