作者: OBKoro1
electron原生對(duì)話框
electron的原生對(duì)話框dialog躁锁，提供了系統(tǒng)對(duì)話框, 提供了消息提示纷铣、消息提示操作以及選擇文件、保存文件等操作战转，今天就跟著本文來(lái)了解一下electron搜立。
PS：本文以及相關(guān)示例出自electron-playground，所有示例都可以即時(shí)運(yùn)行槐秧，這是一個(gè)可以快速實(shí)驗(yàn)electron的各種相關(guān)API的項(xiàng)目啄踊，你可以基于它來(lái)學(xué)習(xí)和了解electron的相關(guān)api。
1. 消息提示 dialog.showMessageBoxSync
1.1 消息提示
const { dialog } = require('electron')
dialog.showMessageBoxSync({
type: 'info',
title: '這里是標(biāo)題',
message: '提示內(nèi)容',
detail: '額外信息'
})
electron-playgroud運(yùn)行示例:
1.2 消息提示與確認(rèn)
const { dialog } = require('electron')
const res = dialog.showMessageBoxSync({
type: 'info',
title: '這里是標(biāo)題',
message: '提示內(nèi)容',
detail: '額外信息',
cancelId: 1, // 按esc默認(rèn)點(diǎn)擊索引按鈕
defaultId: 0, // 默認(rèn)高亮的按鈕下標(biāo)
buttons: ['確認(rèn)按鈕', '取消按鈕'], // 按鈕按索引從右往左排序
})
console.log('操作結(jié)果', res, res === 0 ? '點(diǎn)擊確認(rèn)按鈕' : '點(diǎn)擊取消按鈕') // 根據(jù)按鈕數(shù)組中的下標(biāo)來(lái)判斷
console.log('操作中還有個(gè)checkboxLabel的單選框需要使用showMessageBox api才可以獲取到返回值')
electron-playgroud運(yùn)行示例:
1.3 API說(shuō)明
dialog.showMessageBoxSync(browserWindow, options)
顯示一個(gè)消息框刁标，它將阻止進(jìn)程社痛，直到消息框被關(guān)閉。返回值為點(diǎn)擊的按鈕的索引命雀。
參數(shù)：
-
browserWindow
可以指定一個(gè)父窗口，作為模態(tài)窗口附加到該窗口斩箫。 -
options-
type: String (可選) - "none" ｜ "info" ｜ "error" ｜ "question" 不同的type提示的圖標(biāo)不同吏砂； -
title: String (可選) - message box 的標(biāo)題，一些平臺(tái)不顯示乘客，建議使用message和detail； -
message: String - message box 的內(nèi)容. -
detail: String (可選) - 額外信息 -
buttonsString[] - 字符串按鈕數(shù)組，按鈕按索引從右往左排序线婚，如果未指定默認(rèn)有一個(gè)"OK"的按鈕贿衍。 -
defaultId: Integer (可選) - 默認(rèn)高亮的按鈕下標(biāo)，回車的時(shí)候自動(dòng)選中該項(xiàng) -
cancelId: Integer (可選) 按esc默認(rèn)點(diǎn)擊索引按鈕
-
返回值類型：
-
number: 所點(diǎn)擊的按鈕的索引
dialog.showMessageBox(browserWindow, options)
與dialog.showMessageBoxSync類似，不同點(diǎn)在于：
- 這是一個(gè)異步方法缀匕，返回值為Promise類型纳决；
- 對(duì)話框可以指定一個(gè)checkbox(復(fù)選框)，返回值中也增加了對(duì)應(yīng)的字段, 同步方法(showMessageBoxSyc)拿不到這個(gè)字段乡小；
下面是帶復(fù)選框的示例：
const { dialog } = require('electron')
const res = dialog.showMessageBox({
type: 'info',
title: '這里是標(biāo)題',
message: '提示內(nèi)容',
detail: '額外信息',
cancelId: 1, // 按esc默認(rèn)點(diǎn)擊索引按鈕
defaultId: 0, // 默認(rèn)高亮的按鈕下標(biāo)
checkboxLabel: '單選框內(nèi)容',
checkboxChecked: false, // 是否選中單選框
buttons: ['確認(rèn)按鈕', '取消按鈕'], // 按鈕按索引從右往左排序
})
console.log('操作結(jié)果 promise', res) // 返回一個(gè)promise可以通過(guò)它判斷結(jié)果
electron-playgroud運(yùn)行示例:
2. 選擇文件和文件夾
2.1 選擇文件實(shí)例
const { dialog, app } = require('electron')
const res = dialog.showOpenDialogSync({
title: '對(duì)話框窗口的標(biāo)題',
// 默認(rèn)打開(kāi)的路徑阔加，比如這里默認(rèn)打開(kāi)下載文件夾
defaultPath: app.getPath('downloads'),
buttonLabel: '確認(rèn)按鈕文案',
// 限制能夠選擇的文件類型
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)
electron-playgroud運(yùn)行示例:
API說(shuō)明
dialog.showOpenDialogSync(browserWindow,options)
參數(shù)：
options
-
defaultPathString (可選) - 設(shè)置對(duì)話框默認(rèn)打開(kāi)哪個(gè)路徑，需要設(shè)置一個(gè)有效路徑否則將不生效满钟。 -
buttonLabelString (可選) - 確認(rèn)按鈕的文案, 當(dāng)為空時(shí), 將使用默認(rèn)標(biāo)簽 -
filters默認(rèn)所有文件類型都可以選擇胜榔，設(shè)置后,只能選擇允許的文件類型 -
propertiesString[] (可選)-
openFile- 允許選擇文件 -
openDirectory- 允許選擇文件夾 -
multiSelections- 允許多選。 -
showHiddenFiles- 顯示對(duì)話框中的隱藏文件
-
-
messageString (可選) - mac文件選擇器的title
tips: 嘗試修改options中的參數(shù)來(lái)查看效果湃番；
返回值類型：
String[] | undefined - 用戶選擇的文件或文件夾路徑;如果取消對(duì)話框夭织，則返回undefined
3. 保存文件
3.1 實(shí)例
const { dialog } = require('electron')
const res = dialog.showSaveDialogSync({
title: '對(duì)話框窗口的標(biāo)題',
defaultPath: '', // 打開(kāi)文件選擇器的哪個(gè)路徑 需要輸入一個(gè)有效路徑
buttonLabel: '確認(rèn)按鈕文案',
// 限制能夠選擇的文件為某些類型
filters: [
// { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
// { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
// { name: 'Custom File Type', extensions: ['as'] },
// { name: 'All Files', extensions: ['*'] },
],
nameFieldLabel: '替換文件', // “文件名”文本字段前面顯示的文本自定義標(biāo)簽
showsTagField: true, // 顯示標(biāo)簽輸入框，默認(rèn)值為true
properties: [ 'showHiddenFiles' ],
message: 'mac文件選擇器title'
})
console.log('res', res)
electron-playgroud運(yùn)行示例:
3.2 API說(shuō)明
dialog.showSaveDialogSync(browserWindow,options)
參數(shù)：
options
-
defaultPathString (可選) - 設(shè)置對(duì)話框默認(rèn)打開(kāi)哪個(gè)路徑吠撮，需要設(shè)置一個(gè)有效路徑否則將不生效尊惰。 -
buttonLabelString (可選) - 確認(rèn)按鈕的文案, 當(dāng)為空時(shí), 將使用默認(rèn)標(biāo)簽 -
filters默認(rèn)所有文件類型都可以選擇，設(shè)置后,只能選擇允許的文件類型 -
propertiesString[] (可選)-
openFile- 允許選擇文件 -
openDirectory- 允許選擇文件夾 -
multiSelections- 允許多選纬向。 -
showHiddenFiles- 顯示對(duì)話框中的隱藏文件
-
-
messageString (可選) - mac文件選擇器的title
返回值類型：
String[] | undefined - 用戶選擇的文件或文件夾路徑;如果取消對(duì)話框择浊，則返回undefined；
完整API解釋參考文檔
3.3 不同場(chǎng)景表現(xiàn)
- 選擇了一個(gè)存在的文件
提示"文件夾中已有相同名稱的文件或文件夾逾条。替換它將覆蓋其當(dāng)前內(nèi)容琢岩。"，點(diǎn)擊確認(rèn)后返回該文件地址 - 選擇了一個(gè)不存在的文件
返回該不存在的文件地址
4. 錯(cuò)誤信息彈窗
dialog.showErrorBox
這個(gè)API可以在app模塊觸發(fā)ready事件之前被安全地調(diào)用师脂，它通常用在啟動(dòng)時(shí)報(bào)告錯(cuò)誤担孔。 在Linux上, ready事件之前調(diào)用這個(gè)API, 消息將被發(fā)送到stderr, 并且不會(huì)出現(xiàn)GUI對(duì)話框。
const { dialog } = require('electron')
dialog.showErrorBox('報(bào)錯(cuò)標(biāo)題', '報(bào)錯(cuò)內(nèi)容')
console.log('API非常簡(jiǎn)單用于報(bào)錯(cuò)很方便')
小結(jié)
以上就是本文的內(nèi)容了吃警，更多關(guān)于electron的知識(shí)點(diǎn)擊進(jìn)入electron-playground倉(cāng)庫(kù)來(lái)了解吧糕篇，希望通過(guò)這個(gè)項(xiàng)目大家能夠更好的學(xué)習(xí)和理解electron,少走彎路。
- electron-playground是一個(gè)通過(guò)嘗試electron各種特性酌心，使electron的各項(xiàng)特性所見(jiàn)即所得, 來(lái)達(dá)到我們快速上手和學(xué)習(xí)electron的目的拌消。
- electron-playground 系統(tǒng)性的整理了electron相關(guān)的api，方便你在實(shí)際業(yè)務(wù)中選擇相應(yīng)的app安券。
- 在electron-playground中所有代碼都可以即時(shí)運(yùn)行墩崩，即時(shí)反饋，可以下載一下我們項(xiàng)目來(lái)嘗試一下侯勉，相信你不會(huì)失望的鹦筹。
對(duì) Electron 感興趣？請(qǐng)關(guān)注我們的開(kāi)源項(xiàng)目 Electron Playground址貌，帶你極速上手 Electron铐拐。
我們每周五會(huì)精選一些有意思的文章和消息和大家分享徘键，來(lái)掘金關(guān)注我們的 曉前端周刊。
我們是好未來(lái) · 曉黑板前端技術(shù)團(tuán)隊(duì)遍蟋。
我們會(huì)經(jīng)常與大家分享最新最酷的行業(yè)技術(shù)知識(shí)吹害。
歡迎來(lái) 知乎、掘金匿值、Segmentfault赠制、CSDN、簡(jiǎn)書(shū)挟憔、開(kāi)源中國(guó)钟些、博客園 關(guān)注我們。
