Electron入門Demo之桌面應用計算器筆記（二）
碼文不易啊，轉載請帶上本文鏈接呀，感謝感謝 //www.cnblogs.com/echoyya/p/14307996.html
在之前總結了一篇自學筆記，通過之前學習到的方法和知識，完成了一個較為簡單的桌面應用程式，Electron 實現桌面計算器，並打包成 .exe 可執行文件 和 可安裝包文件
簡要繪製一下該Demo的主要功能：
簡短描述一下所用到的基礎知識：
-
初始化應用，創建窗口，載入內容
-
設置菜單文件，main.js 引入菜單文件
-
渲染進程創建子窗口
-
渲染進程與主進程之間通訊
-
執行用戶選擇操作，並進行本地快取，便於下次啟動應用時，讀取用戶設置
-
項目文件目錄結構
準備工作
-
創建一個空的文件夾，並創建入口
main.js文件，計算器必要文件，計算器的程式碼，此處就不貼了，已上傳至百度雲，可自行下載- 鏈接：//pan.baidu.com/s/1d-v4MimASMcYKkk_eSXz6Q 提取碼：ft7f
-
安裝
electron-
npm init -y：初始化配置文件 package.json
-
npm i electron
-
-
創建文件夾及文件
-
主進程菜單文件：
./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
<script>
require('../render-process/calculatorColor');
</script>
./render-process/calculatorColor.js
// 渲染進程
const {ipcRenderer} = require('electron')
//<li data-color="#00ffff" style="background-color: #00ffff;"></li>
let lis = document.querySelectorAll('li');
// 遍歷每個li，綁定點擊事件 獲取對應的顏色值 this.dataset.color, 發送到主進程
for (let i = 0; i < lis.length; i++) {
var li = lis[i];
li.onclick = function(){
ipcRenderer.send('colorToMain',this.dataset.color)
}
}
進程之間的通訊，傳遞顏色值和字體大小變化的指令
-
color傳值：
渲染進程 --> 主進程 --> 渲染進程 -
fontSize傳值：
主進程 --> 渲染進程
程式碼補充：
main.js：
ipcMain.on('colorToMain',function(event,color){
win.webContents.send('colorToRender',color);
})
./calculator/index.js
// 獲取螢幕input對象
let txt = document.getElementById("txt");
if (localStorage.getItem('color')) {
txt.style.color = localStorage.getItem('color')
}
if (localStorage.getItem('fontSize')) {
txt.style.fontSize = localStorage.getItem('fontSize')
}
// 接受 Color
ipcRenderer.on('colorToRender', function (event, color) {
txt.style.color = color
localStorage.setItem('color', color)
})
// 字體增大
ipcRenderer.on('add', function (event, data) {
let fontSize = window.getComputedStyle(txt).fontSize;
fontSize = parseInt(fontSize) + 3
txt.style.fontSize = fontSize + 'px'
localStorage.setItem('fontSize',fontSize + 'px');
});
// 字體減小
ipcRenderer.on('cut', function (event, data) {
let fontSize = window.getComputedStyle(txt).fontSize;
fontSize = parseInt(fontSize) - 3;
txt.style.fontSize = fontSize + 'px';
localStorage.setItem('fontSize',fontSize + 'px');
})
// 默認字體
ipcRenderer.on('normal', function (event, data) {
txt.style.fontSize = '30px';
txt.style.color = '#ffffff';
localStorage.setItem('fontSize','30px');
localStorage.setItem('color', '#ffffff')
});
打包為安裝包
-
下載：
npm i electron-builder -g -
electron-builder可以將應用程式打包為安裝文件，如.exe .dmg,對於windows系統打包為.exe,對於mac系統打包為.dmg
-
實現electron-builder的配置,package.json 文件,
npm run XXX執行"build":{ "appId":"com.test.app", "productName":"calculator", "dmg":{ "icon":"./images/mac.icns", "window":{ "x":200, "y":150, "width":540, "height":380 } }, "mac": { "icon":"./images/mac.icns" }, "win":{ "icon":"./src/img/win.ico" } }, "scripts": { "start": "electorn .", "buildwin":"electron-builder --win ", "buildwin":"electron-builder --mac ", "packager":"electron-packager ./ calculator --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --ignore=node_modules --icon=./src/img/win.ico --overwrite ", }
上述為應用全部源碼，歡迎指教共同學習~~~！
