文章目錄
- 使用系統檔案對話框：showOpenDialog
- 儲存檔案對話框：showSaveDialog
- 提示對話框：showMessageBox
- 關于對話框
一個桌面應用中，會有很多的互動涉及到系統API，比如顯示系統通知、在系統托盤區域顯示一個圖示、通過“打開檔案對話框”打開系統内的檔案或者是儲存資料到系統磁盤上。
使用系統檔案對話框：showOpenDialog
當使用者手動打開系統上某個檔案，這就需要通過系統對話框實作了。除此之外，很多的互動場景都是需要調用系統對話框的，比如儲存檔案、選擇路徑、消息提示、錯誤提示等等。
首先在需要打開檔案的元件中【這個元件就是在渲染程序中】，向主程序中發送打開檔案的消息，因為這裡定義的是一個基礎元件，是以把一些參數全部暴露出去：
這是一個打開檔案的按鈕，如下圖所示
import { Button } from "antd";
interface PropsType {
text: string;
onClick?: () => void;
}
function OpenFileButton({ text, onClick }: PropsType) {
return <Button type="primary" onClick={onClick}>{text}</Button>
}
export default OpenFileButton; 
在調用這個元件的時候，傳入對應的文本和函數即可。如下：
import { Space } from 'antd';
import "./index.scss";
import OpenFileButton from './OpenFileButton';
const { ipcRenderer } = window.require("electron");
function System() {
const openFile = async () => {
ipcRenderer.send("openFile", "選擇檔案")
}
return <div className="container">
<Space>
<OpenFileButton text="打開檔案" onClick={openFile} />
</Space>
</div>
}
export default System 在這段代碼中，引入electron的ipcRenderer子產品，通過send方法向主程序發送消息。
在主程序中監聽對應的消息通道：
app.whenReady().then(() => {
// 其他邏輯代碼
// 打開一個檔案對話框
ipcMain.on("openFile", async (event, data) => {
let filePath = await dialog.showOpenDialog({
title: data,
buttonLabel: "按此打開檔案",
defaultPath: app.getAppPath("aaa"),
properties: ["multiSelection"],
filters: [
{ name: "圖檔", extensions: ["jpg", "png", "svg"] },
{ name: "視訊", extensions: ["mkv", "avi", "mp4"] }
]
});
console.log("檔案", filePath, data)
})
}); 這裡隻設定可以打開的檔案類型是圖檔和視訊，最後我們可以拿到所打開檔案的路徑，就看看具體的需求是否需要檔案的路徑了。
效果如圖所示：
showOpenDialog方法接受一個配置對象，這個對象影響到對話視窗元素和行為，需要注意的參數配置如下：
- title，對話視窗的标題
- defaultPath，預設檔案路徑
- filters，允許打開的檔案類型，一般是可以打開多種類型的檔案
- buttonLabel，是确認按鈕的顯示文本
- properties，設定是否多選、是否選擇檔案夾
showOpenDialog防範傳回的是一個Promise對象，在使用者選擇完成後，Promise對象執行成功。傳回的結果是一個對象，該對象中含有屬性：
- canceled屬性，表示使用者是否點選了“取消按鈕”
- filePath，是一個數組，裡面的值表示是檔案的路徑，拿到檔案後，就可對檔案進行讀寫了。
還有一個方法showOpenDialogSync，隻是在打開對話框的時候是同步，如果使用者一直沒有選擇檔案，那麼JavaScript執行線程一直處于阻塞狀态，一般情況下是不會推薦使用這個方法的。
儲存檔案對話框：showSaveDialog
在主程序中設定監聽對應的消息通道：
// 保運檔案的對話框
ipcMain.on("saveFile", (event, data) => {
dialog.showSaveDialog({
title: data,
defaultPath: app.getAppPath(),
buttonLabel: "确認",
filters: [
{ name: "自定義檔案", extensions: ["js", "txt", "json"] },
]
}).then(res => {
writeFileSync(res.filePath, "這是一個測試檔案")
}).catch(err => {
console.log("err", err)
})
}) 在渲染程序中，觸發某個事件的時候，就向主程序發送“saveFile”消息，代碼如下：
import { Space,Button } from 'antd';
import "./index.scss";
const { ipcRenderer } = window.require("electron");
function System() {
const openFile = () => {
ipcRenderer.send("openFile", "選擇檔案")
}
const onSaveFile = ()=>{
ipcRenderer.send("saveFile", "儲存檔案")
}
return <div className="container">
<Space>
<Button type="primary" onClick={openFile}>打開檔案</Button>
<Button type="primary" onClick={onSaveFile}>儲存檔案</Button>
</Space>
</div>
}
export default System 這是官網上關于showSaveDialog的屬性參數：
當我們在應用中，将内容剪輯好後，傳到主程序中，再将資料寫入檔案中儲存下來。在寫入檔案的函數中，第一個參數是檔案名稱，後面的就是要寫入的資料：
writeFileSync(res.filePath, "這是一個測試檔案") 提示對話框：showMessageBox
在渲染程序中觸發一個事件，向主程序發送資訊：
const onMessage = ()=>{
ipcRenderer.send("openMessage","這是一個錯誤資訊内容")
} 在主程序中接收對應的消息通道：
const openMessage = () => {
ipcMain.on("openMessage", (event, data) => {
dialog.showMessageBox({
type: 'warning',
title: "您确定麼？",
message: data,
buttons: ["OK", "Cancel"]
}).then(res => {
console.log("選擇", res.response)
})
})
} 效果如下圖：
showMessageBox的配置項屬性，如前面代碼所示，就是常見的屬性配置：
type：消息彈窗的類型，屬性值：“none”, “info”, “error”, “question” 或者 “warning”；
title，彈窗的标題
message：彈窗的内容
buttons：按鈕
根據不同的場景，可能會需要配置其他的屬性，具體的可以查閱官方API。
關于對話框
還有一個是關于應用版本資訊的彈窗，效果如下圖：
當我們需要展示應用版本資訊的時候，是調用app.setAboutPanelOptions，來配置對應的版本資訊，具體的屬性如下：
applicationName string (可選) - 應用程式的名字
applicationVersion string (可選) - 應用程式版本
copyright string (可選) - 版權資訊
version string (可選) macOS - 應用程式版本号
credits string (可選) macOS Windows - 信用資訊。
authors string[] (可選) Linux - 應用程式作者清單。
website string (可選) Linux - 應用程式的網站。
iconPath string (可選) Linux Windows - 以JPEG 或 PNG 檔案格式為應用程式圖示路徑。 在 Linux 上，将顯示為 64x64 像素，同時保留縱橫比。
在渲染程序中觸發事件的時候，主程序需要調用的是：
app.showAboutPanel()
比如：
// 版本資訊配置
app.setAboutPanelOptions({
applicationVersion:app.getVersion(),
applicationName:"Electron應用版本資訊",
copyright:"2022年"
});
ipcMain.on("version",(event,data)=>{
console.log("版本資訊")
app.showAboutPanel();
}) const showVersion = () => {
ipcRenderer.send("version")
}