Electron入門Demo之桌面應用計算器筆記（二）
阿新 • • 發佈：2021-01-21
### 碼文不易啊，轉載請帶上本文連結呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14307996.html
在之前總結了一篇自學筆記，通過之前學習到的方法和知識，完成了一個較為簡單的桌面應用程式，**Electron 實現桌面計算器**，並打包成 `.exe 可執行檔案` 和 `可安裝包檔案`
## 簡要繪製一下該Demo的主要功能：
## 簡短描述一下所用到的基礎知識：
1. 初始化應用，建立視窗，載入內容
2. 設定選單檔案，main.js 引入選單檔案
3. 渲染程序建立子視窗
4. 渲染程序與主程序之間通訊
5. 執行使用者選擇操作，並進行本地快取，便於下次啟動應用時，讀取使用者設定
6. 專案檔案目錄結構
### 準備工作
1. 建立一個空的資料夾，並建立入口 `main.js` 檔案，計算器必要檔案，計算器的程式碼，此處就不貼了，已上傳至百度雲，可自行下載
- 連結：https://pan.baidu.com/s/1d-v4MimASMcYKkk_eSXz6Q 提取碼：ft7f
2. 安裝`electron`
- npm init -y：初始化配置檔案 package.json
- npm i electron
3. 建立資料夾及檔案
- 主程序選單檔案：`./main-process/calculatorMenu.js`
- 渲染程序顏色檔案：`./render-process/calculatorColor.js`
`main.js：`基本構建
```
// app:控制應用的生命週期 BrowserWindow: 建立瀏覽器視窗
const { app ,BrowserWindow, ipcMain} = require('electron');
const path = require('path');
// 引入設定選單檔案
require('./main-process/calculatorMenu');
app.on('ready',ny_createWindow)
let win;
// 建立視窗
function ny_createWindow(){
win = new BrowserWindow({
width:345,
height:370,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
}
});
// 載入內容
win.loadURL(path.join(__dirname, './calculator/index.html')) // 計算器
win.on('close',function(){
win = null; // 關閉視窗
app.quit(); // 關閉應用
})
}
```
`./main-process/calculatorMenu.js`
```
// 1.建立選單模板
const { Menu, BrowserWindow, app} = require('electron');
const path = require('path');
let template = [{
label: '計算器',
submenu: [{
label: '關於計算器',
click: function () {
ny_createAboutWindow()
}
},
{
label: '退出',
accelerator: 'ctrl+Q',
click: function () {
app.quit();
}
}
]
},
{
label: '格式',
submenu: [{
label: '顏色',
click: function () {
ny_createColorWindow()
}
},
{
type: 'separator'
},
{
label: '字型增大',
accelerator: 'F11',
click: function (item,win) {
// 主程序 - > 渲染程序 通訊
if(win){
win.webContents.send('add') // 不需要傳送資料
}
}
},
{
label: '字型減小',
accelerator: 'F12',
click: function (item,win) {
if(win){
win.webContents.send('cut')
}
}
},
{
label: '預設字型',
accelerator: (function () {
return 'ctrl+0'
})(),
click: function (item,win) {
if(win){
win.webContents.send('normal')
}
}
}
]
}
]
// 2.構建選單，例項化一個選單物件
let menu = Menu.buildFromTemplate(template);
// 3. 把選單物件設定到應用中
Menu.setApplicationMenu(menu);
// 4.建立 about 視窗
function ny_createAboutWindow() {
let win = new BrowserWindow({
width: 284,
height: 198
})
win.loadURL(path.join(__dirname, '../calculator/about.html'));
// 子視窗不要選單
win.setMenu(null)
win.on('close', function () {
win = null;
})
}
// 5.建立 color 視窗
function ny_createColorWindow() {
let win = new BrowserWindow({
width: 260,
height: 95,
webPreferences: {
nodeIntegration: true
}
});
win.loadURL(path.join(__dirname, '../calculator/color.html'));
win.setMenu(null);
win.on('click', function () {
win = null;
})
}
```
`./calculator/color.html`
```
```
`./render-process/calculatorColor.js`
```
// 渲染程序
const {ipcRenderer} = require('electron')
//