在以前總結了一篇自學筆記,經過以前學習到的方法和知識,完成了一個較爲簡單的桌面應用程序,Electron 實現桌面計算器,並打包成 .exe 可執行文件
和 可安裝包文件
html
初始化應用,建立窗口,加載內容node
設置菜單文件,main.js 引入菜單文件web
渲染進程建立子窗口npm
渲染進程與主進程之間通信json
執行用戶選擇操做,並進行本地緩存,便於下次啓動應用時,讀取用戶設置windows
項目文件目錄結構瀏覽器
建立一個空的文件夾,並建立入口 main.js
文件,計算器必要文件,計算器的代碼,此處就不貼了,已上傳至百度雲,可自行下載緩存
安裝electron
app
npm init -y:初始化配置文件 package.jsonelectron
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 ", }
上述爲應用所有源碼,歡迎指教共同窗習~~~!