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

添加單擊事件-創建設置顏色窗口

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開發計算器

electron完成一個簡易的桌面計算器

目錄

1：大前端的發展現狀

2：electron介紹

2.1.它能做什麼

2.2.開發環境

3：使用electron完成一個簡易計算器

3.1.初體驗-展示一個桌面應用程序界面

3.2.添加應用程序的菜單項

3.3.主進程和渲染進程

3.4.完成菜單項功能：顏色設置

3.5.完成菜單項功能：字體大小設置

3.6. 實現桌面端隱藏到托盤

3.7.完成簡易的計算功能

4：應用程序打包

4.2 打包爲安裝包

canvas刮刮卡遊戲開發

vue路由懶加載辦法

面試準備之原生JS

JQ編程原理

項目中用到的特別函數封裝

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結