Electron入門Demo之桌面應用計算器筆記（二）

Echoyya、發表於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 檔案，計算器必要檔案，計算器的程式碼，此處就不貼了，已上傳至百度雲，可自行下載

  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

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

程式之間的通訊，傳遞顏色值和字型大小變化的指令

  1. color傳值：渲染程式 --> 主程式 --> 渲染程式

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

    上述為應用全部原始碼，歡迎指教共同學習~~~！

相關文章