## 使用 Electron 打開外部鏈接或文件管理器 Electron 中的 shell 模塊允許您訪問某些本地元素, 如文件管理器和默認 Web 瀏覽器. 此模塊在主進程和渲染器進程中都可以工作. 在瀏覽器中查看 完整 [API 文檔](http://electron.atom.io/docs/api/shell) ### 在文件管理器中打開路徑 `支持: Win, macOS, Linux | 進程: Both` 當前示例使用 shell 模塊在特定位置打開系統文件管理器. 單擊示例按鈕將在根目錄中打開文件管理器.  渲染器進程 ``` openFileManager () { const {shell} = require('electron') const os = require('os') shell.showItemInFolder(os.homedir()) }, ``` ### 打開外部鏈接 `支持: Win, macOS, Linux | 進程: Both` 如果您不希望在當前應用程序中打開網站鏈接, 可以使用 shell 模塊在外部打開. 當點擊鏈接之后將在用戶的默認瀏覽器中打開. 當點擊示例按鈕時, 將在您的瀏覽器中打開 Electron 的網站.  渲染器進程 ``` openExLink () { const {shell} = require('electron') shell.openExternal('http://electron.atom.io') } ``` ## 使用 Electron 調用系統對話框 Electron 中的 dialog 模塊允許您使用本地系統對話框打開文件或目錄, 保存文件或顯示信息性消息. 這是一個主進程模塊, 因為這個進程對于本地實用程序更有效, 它允許調用的同時而不會中斷頁面渲染器進程中的可見元素. 在瀏覽器中查看 完整 [API 文檔](http://electron.atom.io/docs/api/dialog/) ### 打開文件或目錄 `支持: Win, macOS, Linux | 進程: Main` 在本示例中, ipc 模塊用于從渲染器進程發送一條消息, 指示主進程啟動打開的文件（或目錄）對話框. 如果選擇了文件, 主進程可以將該信息發送回渲染器進程.   渲染器進程 ``` openFileDir () { const {ipcRenderer} = require('electron') ipcRenderer.send('open-file-dialog') ipcRenderer.on('selected-directory', (event, path) => { this.checkedPath = `你已選擇: ${path}` }) }, ``` 主進程 ``` const {ipcMain, dialog} = require('electron') ipcMain.on('open-file-dialog', (event) => { dialog.showOpenDialog({ properties: ['openFile', 'openDirectory'] }, (files) => { if (files) { event.sender.send('selected-directory', files) } }) }) ``` ### 錯誤對話框 `支持: Win, macOS, Linux | 進程: Main` 在本示例中, ipc 模塊用于從渲染器進程發送一條消息, 指示主進程啟動錯誤對話框. 您可以在應用程序的 ready 事件之前使用錯誤對話框, 這對于在啟動時顯示錯誤很有用.  渲染器進程 ``` errorDialog () { const {ipcRenderer} = require('electron') ipcRenderer.send('open-error-dialog') }, ``` 主進程 ``` const {ipcMain, dialog} = require('electron') ipcMain.on('open-error-dialog', (event) => { dialog.showErrorBox('一條錯誤信息', '錯誤消息演示.') }) ``` ### 信息對話框 `支持: Win, macOS, Linux | 進程: Main` 在本示例中, ipc 模塊用于從渲染器進程發送一條消息, 指示主進程啟動信息對話框. 可以提供用于響應的選項, 響應會被返回到渲染器進程中. 一個信息對話框可以包含圖標, 選擇的按鈕, 標題和消息.   渲染器進程 ``` infoDialog () { const {ipcRenderer} = require('electron') ipcRenderer.send('open-information-dialog') ipcRenderer.on('information-dialog-selection', (event, index) => { this.message = '你已選擇 ' if (index === 0) this.message += '是.' else this.message += '否.' }) }, ``` 主進程 ``` const {ipcMain, dialog} = require('electron') ipcMain.on('open-information-dialog', (event) => { const options = { type: 'info', title: '信息', message: "這是一個信息對話框. 很不錯吧？", buttons: ['是', '否'] } dialog.showMessageBox(options, (index) => { event.sender.send('information-dialog-selection', index) }) }) ``` ### 保存對話框 `支持: Win, macOS, Linux | 進程: Main` 在本示例中, ipc 模塊用于從渲染器進程發送一條消息, 指示主進程啟動保存對話框. 它返回由用戶選擇的路徑, 并可以將其路由回渲染器進程.   渲染器進程 ``` saveDialog () { const {ipcRenderer} = require('electron') ipcRenderer.send('save-dialog') ipcRenderer.on('saved-file', (event, path) => { if (!path) this.savedPath = '無路徑' this.savedPath = `已選擇的路徑: ${path}` }) } ``` 主進程 ``` const {ipcMain, dialog} = require('electron') ipcMain.on('save-dialog', (event) => { const options = { title: '保存圖像', filters: [ { name: 'Images', extensions: ['jpg', 'png', 'gif'] } ] } dialog.showSaveDialog(options, (filename) => { event.sender.send('saved-file', filename) }) }) ``` ## 使用 Electron 將應用程序放入托盤 使用 tray 模塊允許您在操作系統的通知區域中創建圖標. 此圖標還可以附加上下文菜單. 在瀏覽器中查看 完整 [API 文檔](http://electron.atom.io/docs/api/tray). ### 托盤 `支持: Win, macOS, Linux | 進程: Main` 示例按鈕使用 ipc 模塊向主進程發送消息. 在主進程中, 應用程序會被告知在托盤中放置一個帶有上下文菜單的圖標. 在此示例中, 可以通過單擊托盤圖標上下文菜單中的 "移除" 或再次點擊示例按鈕來刪除托盤圖標.   渲染器進程 ``` putInTray () { const {ipcRenderer} = require('electron') if (this.trayOn) { this.trayOn = false this.message = '' ipcRenderer.send('remove-tray') } else { this.trayOn = true this.message = '再次點擊示例按鈕移除托盤.' ipcRenderer.send('put-in-tray') } // 從圖標上下文菜單中刪除托盤 ipcRenderer.on('tray-removed', function () { this.trayOn = false this.message = '' ipcRenderer.send('remove-tray') }) } ``` 主進程 ``` const path = require('path') const {ipcMain, app, Menu, Tray} = require('electron') let appIcon = null ipcMain.on('put-in-tray', (event) => { const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png' const iconPath = `${__static}/` + iconName appIcon = new Tray(iconPath) const contextMenu = Menu.buildFromTemplate([{ label: '移除', click: () => { event.sender.send('tray-removed') } }]) appIcon.setToolTip('在托盤中的 Electron 示例.') appIcon.setContextMenu(contextMenu) }) ipcMain.on('remove-tray', () => { appIcon.destroy() }) app.on('window-all-closed', () => { if (appIcon) appIcon.destroy() }) ``` ## 使用 Electron 調用基本或附帶圖像的通知 使用 Electron 中的 notification 模塊可以允許你增加基本的桌面通知. Electron 允許開發者使用 HTML5 Notification API 發送通知, 并使用當前操作系統的原生通知 API 來顯示. 注意: 由于這是一個 HTML5 API, 它只能在渲染器進程中使用. 在瀏覽器中查看 完整 ?[API 文檔](https://electron.atom.io/docs/all/#notifications-windows-linux-macos) ### 基本通知 `支持: Win 7+, macOS, Linux (支持 libnotify) | 進程: 渲染器` 此示例演示了一個基本的通知. 只含有文字.  渲染器進程 ``` notification () { const myNotification = new Notification('標題', { body: '通知正文內容' }) myNotification.onclick = () => { console.log('通知被點擊') } }, ``` ### 附帶圖像的通知 `支持: Win 7+, macOS, Linux (支持 libnotify) | 進程: 渲染器` 此示例演示了一個基本的通知. 同時含有文字和圖像.  渲染器進程 ``` noticeWithImage () { const myNotification = new Notification('附帶圖像的通知', { body: '短消息附帶自定義圖片', icon: require('../../assets/programming.png') }) myNotification.onclick = () => { console.log('通知被點擊') } } ``` ## 拖放文件 Electron 支持將文件和內容從 Web拖放到操作系統中. 在瀏覽器中查看完整 [API 文檔](https://www.electronjs.org/docs/tutorial/native-file-drag-drop) ### 拖動文件 `支持: Win, macOS, Linux | 進程: Both` 在這個示例中，webContents.startDrag() API 被調用以響應 ondragstart 事件.  渲染器進程 ``` processDrag (event) { const {ipcRenderer} = require('electron') event.preventDefault() ipcRenderer.send('ondragstart', 'programming.png') } ``` 主進程 ``` const {ipcMain} = require('electron') const path = require('path') ipcMain.on('ondragstart', (event, filepath) => { const iconName = 'codeIcon.png' const iconPath = `${__static}/` + iconName event.sender.startDrag({ file: `${__static}/` + filepath, icon: iconPath }) }) ```