使用 Electron 調(diào)用系統(tǒng)對(duì)話框

aristark 發(fā)布于2019-08-20 14:40 / 902人閱讀

摘要：使用調(diào)用系統(tǒng)對(duì)話框此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運(yùn)行查看歡迎中的模塊允許您使用本地系統(tǒng)對(duì)話框打開文件或目錄保存文件或顯示信息性消息這是一個(gè)主進(jìn)程模塊因?yàn)檫@個(gè)進(jìn)程對(duì)于本地實(shí)用程序更有效它允許調(diào)用的同時(shí)而不會(huì)中斷頁面渲染器進(jìn)程中

使用 Electron 調(diào)用系統(tǒng)對(duì)話框

此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運(yùn)行查看. 歡迎 Star .

Electron 中的 dialog 模塊允許您使用本地系統(tǒng)對(duì)話框打開文件或目錄, 保存文件或顯示信息性消息.

這是一個(gè)主進(jìn)程模塊, 因?yàn)檫@個(gè)進(jìn)程對(duì)于本地實(shí)用程序更有效, 它允許調(diào)用的同時(shí)而不會(huì)中斷頁面渲染器進(jìn)程中的可見元素.

在瀏覽器中查看完整 API 文檔 .

打開文件或目錄

支持: Win, macOS, Linux | 進(jìn)程: Main

在本示例中, ipc 模塊用于從渲染器進(jìn)程發(fā)送一條消息, 指示主進(jìn)程啟動(dòng)打開的文件（或目錄）對(duì)話框. 如果選擇了文件, 主進(jìn)程可以將該信息發(fā)送回渲染器進(jìn)程.

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

const selectDirBtn = document.getElementById("select-directory")

selectDirBtn.addEventListener("click", function (event) {
  ipc.send("open-file-dialog")
})

ipc.on("selected-directory", function (event, path) {
  document.getElementById("selected-file").innerHTML = `You selected: ${path}`
})

主進(jìn)程

const ipc = require("electron").ipcMain
const dialog = require("electron").dialog

ipc.on("open-file-dialog", function (event) {
  dialog.showOpenDialog({
    properties: ["openFile", "openDirectory"]
  }, function (files) {
    if (files) event.sender.send("selected-directory", files)
  })
})

高級(jí)技巧

macOS 上的工作表樣式對(duì)話框.

在 macOS 上, 您可以在 "工作表" 對(duì)話框或默認(rèn)對(duì)話框之間進(jìn)行選擇. 工作表版本是從窗口頂部滑落. 要使用工作表版本, 請(qǐng)將 window 作為對(duì)話框方法中的第一個(gè)參數(shù).

const ipc = require("electron").ipcMain
const dialog = require("electron").dialog
const BrowserWindow = require("electron").BrowserWindow


ipc.on("open-file-dialog-sheet", function (event) {
  const window = BrowserWindow.fromWebContents(event.sender)
  const files = dialog.showOpenDialog(window, { properties: [ "openFile" ]})
})

錯(cuò)誤對(duì)話框

支持: Win, macOS, Linux | 進(jìn)程: Main

在本示例中, ipc 模塊用于從渲染器進(jìn)程發(fā)送一條消息, 指示主進(jìn)程啟動(dòng)錯(cuò)誤對(duì)話框.

您可以在應(yīng)用程序的 ready 事件之前使用錯(cuò)誤對(duì)話框, 這對(duì)于在啟動(dòng)時(shí)顯示錯(cuò)誤很有用.

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

const errorBtn = document.getElementById("error-dialog")

errorBtn.addEventListener("click", function (event) {
  ipc.send("open-error-dialog")
})

主進(jìn)程

const ipc = require("electron").ipcMain
const dialog = require("electron").dialog

ipc.on("open-error-dialog", function (event) {
  dialog.showErrorBox("一條錯(cuò)誤信息", "錯(cuò)誤消息演示.")
})

信息對(duì)話框

支持: Win, macOS, Linux | 進(jìn)程: Main

在本示例中, ipc 模塊用于從渲染器進(jìn)程發(fā)送一條消息, 指示主進(jìn)程啟動(dòng)信息對(duì)話框. 可以提供用于響應(yīng)的選項(xiàng), 響應(yīng)會(huì)被返回到渲染器進(jìn)程中.

注意：title 屬性不會(huì)顯示在 macOS 中.

一個(gè)信息對(duì)話框可以包含圖標(biāo), 選擇的按鈕, 標(biāo)題和消息.

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

const informationBtn = document.getElementById("information-dialog")

informationBtn.addEventListener("click", function (event) {
  ipc.send("open-information-dialog")
})

ipc.on("information-dialog-selection", function (event, index) {
  let message = "你選擇了 "
  if (index === 0) message += "是."
  else message += "否."
  document.getElementById("info-selection").innerHTML = message
})

主進(jìn)程

const ipc = require("electron").ipcMain
const dialog = require("electron").dialog

ipc.on("open-information-dialog", function (event) {
  const options = {
    type: "info",
    title: "信息",
    message: "這是一個(gè)信息對(duì)話框. 很不錯(cuò)吧？",
    buttons: ["是", "否"]
  }
  dialog.showMessageBox(options, function (index) {
    event.sender.send("information-dialog-selection", index)
  })
})

保存對(duì)話框

支持: Win, macOS, Linux | 進(jìn)程: Main

在本示例中, ipc 模塊用于從渲染器進(jìn)程發(fā)送一條消息, 指示主進(jìn)程啟動(dòng)保存對(duì)話框. 它返回由用戶選擇的路徑, 并可以將其路由回渲染器進(jìn)程.

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

const saveBtn = document.getElementById("save-dialog")

saveBtn.addEventListener("click", function (event) {
  ipc.send("save-dialog")
})

ipc.on("saved-file", function (event, path) {
  if (!path) path = "無路徑"
  document.getElementById("file-saved").innerHTML = `選擇的路徑: ${path}`
})

主進(jìn)程

const ipc = require("electron").ipcMain
const dialog = require("electron").dialog

ipc.on("save-dialog", function (event) {
  const options = {
    title: "保存圖片",
    filters: [
      { name: "Images", extensions: ["jpg", "png", "gif"] }
    ]
  }
  dialog.showSaveDialog(options, function (filename) {
    event.sender.send("saved-file", filename)
  })
})

如果這邊文章對(duì)您有幫助, 感謝 下方點(diǎn)贊 或 Star  GitHub: electron-api-demos-Zh_CN 支持, 謝謝.

云服務(wù)器 GPU云服務(wù)器 electron使用webrtc mfc 跨對(duì)話框控件調(diào)用 electron webrtc electron

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81828.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

aristark

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C語言運(yùn)算符的優(yōu)先級(jí)和結(jié)合性詳細(xì)解說

閱讀 2650·2021-10-12 10:12
CSS中的多種居中方式

閱讀 791·2019-08-29 17:25
從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

閱讀 2794·2019-08-29 17:24
前端常見問題——安卓文本無法垂直居中

閱讀 3228·2019-08-29 17:19
html/css系列-圖片上下居中

閱讀 1810·2019-08-29 15:39
UCloud云主機(jī)鏡像上傳

閱讀 3057·2019-08-26 16:50
深入理解ES6筆記（三）函數(shù)

閱讀 2003·2019-08-26 12:17
js知識(shí)梳理6:關(guān)于函數(shù)的要點(diǎn)梳理(2)(作用域鏈和閉包)

閱讀 2708·2019-08-26 12:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

使用 Electron 調(diào)用系統(tǒng)對(duì)話框

相關(guān)文章

Electron選擇文件、文件夾對(duì)話框(非原創(chuàng)，傳播)

如何使用前端技術(shù)開發(fā)一個(gè)桌面跨端應(yīng)用

electronjs 入門_2019年2月14日

electronjs 入門_2019年2月14日

如何從0開發(fā)一個(gè)Atom組件

發(fā)表評(píng)論

0條評(píng)論

aristark

男|高級(jí)講師

TA的文章

C語言運(yùn)算符的優(yōu)先級(jí)和結(jié)合性詳細(xì)解說

CSS中的多種居中方式

從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

前端常見問題——安卓文本無法垂直居中

html/css系列-圖片上下居中

UCloud云主機(jī)鏡像上傳

深入理解ES6筆記（三）函數(shù)

js知識(shí)梳理6:關(guān)于函數(shù)的要點(diǎn)梳理(2)(作用域鏈和閉包)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

使用 Electron 調(diào)用系統(tǒng)對(duì)話框

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！