Electron入门Demo之桌面应用计算器笔记（二） (2)

./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 ", }

上述为应用全部源码，欢迎指教共同学习~~~！