作者：OBKoro1
electron的原生對話框dialog，提供了系統對話框, 提供了消息提示、消息提示操作以及選擇檔案、儲存檔案等操作，今天就跟着本文來了解一下electron。
1. 消息提示 dialog.showMessageBoxSync
1.1 消息提示
const { dialog } = require('electron')
dialog.showMessageBoxSync({
type: 'info',
title: '這裡是标題',
message: '提示内容',
detail: '額外資訊'
})
:
1.2 消息提示與确認
const { dialog } = require('electron')
const res = dialog.showMessageBoxSync({
type: 'info',
title: '這裡是标題',
message: '提示内容',
detail: '額外資訊',
cancelId: 1, // 按esc預設點選索引按鈕
defaultId: 0, // 預設高亮的按鈕下标
buttons: ['确認按鈕', '取消按鈕'], // 按鈕按索引從右往左排序
})
console.log('操作結果', res, res === 0 ? '點選确認按鈕' : '點選取消按鈕') // 根據按鈕數組中的下标來判斷
console.log('操作中還有個checkboxLabel的單選框需要使用showMessageBox api才可以擷取到傳回值')
:
1.3 API說明
dialog.showMessageBoxSync(browserWindow, options)
顯示一個消息框，它将阻止程序，直到消息框被關閉。傳回值為點選的按鈕的索引。
參數：
-
browserWindow
-
options
-
type
-
title
-
message
-
detail
-
buttons
-
defaultId
-
cancelId
-
傳回值類型：
-
number
dialog.showMessageBox(browserWindow, options)
與dialog.showMessageBoxSync類似，不同點在于：
- 這是一個異步方法，傳回值為Promise類型；
- 對話框可以指定一個checkbox(複選框)，傳回值中也增加了對應的字段, 同步方法(showMessageBoxSyc)拿不到這個字段 ；
下面是帶複選框的示例：
const { dialog } = require('electron')
const res = dialog.showMessageBox({
type: 'info',
title: '這裡是标題',
message: '提示内容',
detail: '額外資訊',
cancelId: 1, // 按esc預設點選索引按鈕
defaultId: 0, // 預設高亮的按鈕下标
checkboxLabel: '單選框内容',
checkboxChecked: false, // 是否選中單選框
buttons: ['确認按鈕', '取消按鈕'], // 按鈕按索引從右往左排序
})
console.log('操作結果 promise', res) // 傳回一個promise可以通過它判斷結果
:
2. 選擇檔案和檔案夾
2.1 選擇檔案執行個體
const { dialog, app } = require('electron')
const res = dialog.showOpenDialogSync({
title: '對話框視窗的标題',
// 預設打開的路徑，比如這裡預設打開下載下傳檔案夾
defaultPath: app.getPath('downloads'),
buttonLabel: '确認按鈕文案',
// 限制能夠選擇的檔案類型
filters: [
// { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
// { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
// { name: 'Custom File Type', extensions: ['as'] },
// { name: 'All Files', extensions: ['*'] },
],
properties: [ 'openFile', 'openDirectory', 'multiSelections', 'showHiddenFiles' ],
message: 'mac檔案選擇器title'
})
console.log('res', res)
:
API說明
dialog.showOpenDialogSync(browserWindow,options)
參數：
options
-
defaultPath
-
buttonLabel
-
filters
-
properties
-
openFile
-
openDirectory
-
multiSelections
-
showHiddenFiles
-
-
message
tips: 嘗試修改options中的參數來檢視效果；
傳回值類型：
String[] | undefined
- 使用者選擇的檔案或檔案夾路徑;如果取消對話框，則傳回undefined
完整API解釋參考文檔
3. 儲存檔案
3.1 執行個體
const { dialog } = require('electron')
const res = dialog.showSaveDialogSync({
title: '對話框視窗的标題',
defaultPath: '', // 打開檔案選擇器的哪個路徑 需要輸入一個有效路徑
buttonLabel: '确認按鈕文案',
// 限制能夠選擇的檔案為某些類型
filters: [
// { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
// { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
// { name: 'Custom File Type', extensions: ['as'] },
// { name: 'All Files', extensions: ['*'] },
],
nameFieldLabel: '替換檔案', // “檔案名”文本字段前面顯示的文本自定義标簽
showsTagField: true, // 顯示标簽輸入框，預設值為true
properties: [ 'showHiddenFiles' ],
message: 'mac檔案選擇器title'
})
console.log('res', res)
:
3.2 API說明
dialog.showSaveDialogSync(browserWindow,options)
參數：
options
-
defaultPath
-
buttonLabel
-
filters
-
properties
-
openFile
-
openDirectory
-
multiSelections
-
showHiddenFiles
-
-
message
傳回值類型：
String[] | undefined
- 使用者選擇的檔案或檔案夾路徑;如果取消對話框，則傳回undefined；
完整API解釋參考文檔
3.3 不同場景表現
- 選擇了一個存在的檔案 提示" 檔案夾中已有相同名稱的檔案或檔案夾。替換它将覆寫其目前内容。 "，點選确認後傳回該檔案位址
- 選擇了一個不存在的檔案 傳回該不存在的檔案位址
4. 錯誤資訊彈窗
dialog.showErrorBox
。 在Linux上, ready事件之前調用這個API, 消息将被發送到stderr, 并且不會出現GUI對話框。
const { dialog } = require('electron')
dialog.showErrorBox('報錯标題', '報錯内容')
console.log('API非常簡單用于報錯很友善')
https://github.com/tal-tech/electron-playgroundgithub.com
為了能更好學習electron，我們目前創作了一個系列，有興趣可以看看
曉黑闆前端技術：【Electron-Playground系列】菜單篇zhuanlan.zhihu.com
曉黑闆前端技術：【Electron-Playground系列】托盤篇zhuanlan.zhihu.com
曉黑闆前端技術：【Electron-Playground系列】自定義協定篇zhuanlan.zhihu.com
曉黑闆前端技術：【Electron-Playground系列】Dialog與檔案選擇篇zhuanlan.zhihu.com
如果想看更完整的文檔，請參考下面文檔
electron-playground文檔 · 語雀www.yuque.com