[亂說]Electron 無邊框視窗最大化最小化關閉功能

阿新 • • 發佈：2019-01-25

Electron 無邊框視窗最大化最小化關閉功能

目的

實現無邊框視窗，並新增最大化最小化和關閉功能

前提

操作流程

先在介面上放三個按鈕

 <body style="-webkit-app-region: drag">
      <section style="-webkit-app-region: drag">
          <!--html程式碼-->
          <h1>Hello World!</h1>
      </section>

      <section 
 style="-webkit-app-region: no-drag">
          <button type="button" id="maxbt">max</button>
          <button type="button" id="minbt">>min</button>
          <button type="button" id="closebt">>close</button>
      </section>
    <!-- All of the Node.js APIs are available in this renderer process. --> 

    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>

     // require('electron').ipcRenderer; 

      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
  ``` 
**-webkit-app-region: drag是可拖動的樣式**
2. 新增事件把要做的操作傳送給主程序  

``` javascript
var ipc = require('electron').ipcRenderer;
document.getElementById('maxbt').addEventListener('click', () => {
  console.log('hello vscode!')
  ipc.send('window-max');

})
document.getElementById('minbt').addEventListener('click', () => {
  console.log('hello vscode!')
  ipc.send('window-min');

})
document.getElementById('closebt').addEventListener('click', () => {
  console.log('hello vscode!')
  ipc.send('window-close');

})





<div class="se-preview-section-delimiter"></div>

在主程序中調相應的方法

const electron = require('electron')
const ipc = electron.ipcMain
//登入視窗最小化
ipc.on('window-min',function(){
  mainWindow.minimize();
})
//登入視窗最大化
ipc.on('window-max',function(){
  if(mainWindow.isMaximized()){
      mainWindow.restore();  
  }else{
      mainWindow.maximize(); 
  }
})
ipc.on('window-close',function(){
  mainWindow.close();
})

提示

ipc不適合大資料通訊，最好只做命令的傳遞
原始碼

基礎不穩寫出來的程式碼也不是很好，開源的學習成本其實是很高的，特別是對於新手，自己學習一定要把握好度。

[亂說]Electron 無邊框視窗最大化最小化關閉功能

Electron 無邊框視窗最大化最小化關閉功能目的實現無邊框視窗，並新增最大化最小化和關閉功能前提操作流程先在介面上放三個按鈕 <body s

ubuntu下視窗最大化最小化關閉右邊顯示

1、首先安裝gconf-editor: sudo apt-get install gconf-editor 2、Ctrl+Alt+T調出終端，執行：gconf-editor 3、此時會開啟“配置編輯器”，找到“/apps/metacity/general”選項，把

unity視窗最大化最小化及視窗還原

using System; using System.Collections; using System.Collections.Generic; using System.Runtime.InteropServices; using UnityEngine; public

1.6.2 簡單自繪控制元件——無邊框對話方塊最小化按鈕

1、準備PNG檔案： 2、插入Static Text 控制元件，並將其設定在視窗右上角 CRect rect; GetClientRect(rect); //獲取對話方塊大小 CWnd *pWnd; pW

自定義最大化最小化關閉按鈕

實現效果：　　知識運用：　　資原始檔　　　將圖片存入資原始檔　資源管理器-Properties-Resources.resx檔案　　讀取資原始檔中的圖片　Properties名稱空間下的Resoources資源類　　pictureBox.Image=Properties.Res

Qt個性化定製最大化最小化關閉等設定

視窗如果繼承QDialog，那視窗就只有關閉按鈕；如果繼承QWidget，那麼就有關閉，最大化，最小化三個按鈕,如何個性化定製這三個按鈕呢,解決方案是void setWindowFlags ( Qt::WindowFlags type ) setWindowFlags ( Qt::W

Java JFrame隱藏標題欄以及最大化最小化關閉和拖動

CSDN上第一篇部落格，請大家多多支援！ // 轉載請註明出處！直入主題吧，目前主流的軟體，圖形化介面一般都沒有標題欄，優點是簡單大方。然而，介面的最大化最小化和關閉按鈕也隨之隱藏，窗體也無法拖動。因此，我總結了一些解決這些問題的思路，僅供

MFC 如何判斷視窗是否最小化，以及自動讓顯示最大化

bool bPrintIconic = false; if(m_pPrintDlg) { bPrintIcon

MFC中視窗隨最小化最大化按鈕最大最小化

轉載於：https://blog.csdn.net/Bettyshasha/article/details/51603752 1.選中對話方塊，右鍵-》屬性-》訊息，新增WM_SIZE函式。 2.在對話方塊類標頭檔案.h裡面新增： void ReSize(); POINT o

C#中視窗的最小化和恢復

只需變更WindowState屬性即可： var nCurrentWindowState = WindowState; WindowState = FormWindowState.Minimized;

Delphi最大化最小化、窗體變化事件

private procedure WMSysCommand(var Msg:TMessage);message WM_SYSCOMMAND; procedure TForm1.WMSysCommand(var Msg: TMessage); b

pb 窗體最大化最小化觸發事件

一般情況下，如果是關閉窗體時觸發該事件的話，直接在窗體的事件closequery（）中處理，設定如下： this.windowstate =minimized！ return 1 // 0 Allow the window to be closed //1 Prev

C#WinForm窗體的最大化最小化及還原

//最大化 private void button1_Click(object sender, EventArgs e) { WindowState = FormWindowState.Maximized; }//最小

c#捕獲窗體的最大化最小化按鈕的事件

protected override void OnResize(EventArgs e) { if(WindowState == FormWindowState.Maximized) {

解決winform中mdi子窗體載入時顯示最大化最小化按鈕的方法

場景：在mid載入子窗體的時候如果指定WindowState為Maximized，載入完成後主窗體會顯示最大化、最小化、關閉的按鈕圖示。解決方法： 1.更改主窗體FormMain的屬性。制定MainMenuStrip的屬性為menuStrip1控制元件。menuStrip1控制元件就是主窗體上的選單欄。

Qt:QML:程式最大化最小化全屏之間的切換

啥也不說了，直接上程式碼 import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Window 2.0 Application

更改ubuntu對話方塊中的關閉最大化最小化按鍵放到對話方塊右側

相信有很多朋友是先成為為windows使用者，然後才能為ubuntu使用者的。做為windows使用者，對最小化/最大化/關閉按鈕放在右邊，認為是一件理所當然的事。因此對ubuntu將它們放在左邊多少有點不適應。下面讓我們在ubuntu中試試如何改變這點：1. 開啟終端，並

vc響應最大化最小化按鈕的事件或訊息 .

源方法一。在OnSize訊息事件中處理最小化 SIZE_MINIMIZED，最大化 SIZE_MAXIMIZED，還原 SIZE_RESTORED，例如： void CMainDlg::OnSize(UINT nType, int cx, int cy) { CDialog::OnSize(

C# WinForm開發系列之自定義無邊框窗體(最大化，最小化，關閉，拉伸和移動的相關知識)

////重寫系統WndProc函式,使無邊框窗體可移動 protected override void WndProc(ref Message m) { switch (m.Msg) {

Electron 入門案例：讀取本地json檔案，實現使用者登入、修改內容，最小化，最大化，關閉視窗

進入公司實習的第一個月，導師讓學習electron技術，經過兩個星期的學習，做了一個小Demo。主要功能是使用者在訪問後臺伺服器訪問失敗時（登入時會首先訪問後臺伺服器，伺服器訪問失敗時會讀取本地檔案，本案例為json檔案，進行登入），修改使用者資訊（修改本地

[亂說]Electron 無邊框視窗最大化最小化關閉功能

Electron 無邊框視窗最大化最小化關閉功能

目的

前提

操作流程

提示

相關推薦