建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+ 谷歌浏览器 Firefox 30+ 火狐浏览器
请选择 进入手机版 | 继续访问电脑版
设置昵称

在此一键设置昵称,即可参与社区互动!

确定
我再想想
选择版块
直达楼层
标签
您还可以添加5个标签
  • 没有搜索到和“关键字”相关的标签
  • 云产品
  • 解决方案
  • 技术领域
  • 通用技术
  • 平台功能
取消

采纳成功

您已采纳当前回复为最佳回复

Linton林小顿

发帖: 152粉丝: 6

发消息 + 关注

发表于2020年10月22日 10:50:33 573 2
直达本楼层的链接
楼主
显示全部楼层
[新手课堂] electron api介绍

electron提供了一系列原生的系统api,借助它们可以方便地构建桌面应用 ## 创建窗口 ``` const {BrowserWindow} = require('electron') let win = new BrowserWindow({ width: 400, height: 320 }) win.on('close', () => { win = null }) win.loadURL("index.html") win.show() }) ``` 通过BrowserWindow创建窗口,参数包括width,height,frame(窗口的header和菜单是否可见)等等 ``` win.on('resize', func) win.on('move', func) win.on('close', func) win.on('focus', func) //鼠标的在窗口区域内 win.on('blur', func) //鼠标的在窗口区域外 ``` 可以监控窗口的状态,触发相应的回调函数 ``` win.getSize() win.getPosition() ``` 获得窗口的属性 ## 创建对话框 ``` win.webContents.on('crashed', () => { const options = { type: 'info', title: 'Renderer Process Crashed', message: 'This process has crashed.', buttons: ['Reload', 'Close'] } dialog.showMessageBox(options, (index) => { //index表示buttons数组的序号 if (index === 0) win.reload() else win.close() }) }) ``` 弹出操作系统的原生对话框,并可以自定义选项和对应的回调函数 ## 自定义菜单 ``` let template = [ { label: 'Colorpicker', submenu: [ { label: 'About Colorpicker', 'accelerator': 'Shift+CmdOrCtrl+A', click: () => settings.init() }, { label: `Version ${app.getVersion()}`, enabled: false }, { type: 'separator' }, { label: 'Preferences', accelerator: 'CmdOrCtrl+,', click: () => settings.init() }, { type: 'separator' }, { label: 'Hide Colorpicker', accelerator: 'CmdOrCtrl+H', role: 'minimize' }, { label: 'Developer', submenu: [ { label: 'Toggle Devtools', accelerator: 'CmdOrCtrl+Alt+I', role: 'toggledevtools' }, { label: 'Reload Window', accelerator: 'CmdOrCtrl+R', role: 'reload' } ] }, { type: 'separator' }, { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => app.quit() } ] }, { label: 'Edit', role: 'editMenu' }, { label: 'View', submenu: [ { label: 'Show Colorpicker', accelerator: 'Shift+CmdOrCtrl+C', click: () => colorpicker.init() }, { label: 'Show ColorsBook', accelerator: 'Shift+CmdOrCtrl+B', click: () => colorsbook.init() }, { type: 'separator' }, { label: 'Save Color', accelerator: 'CmdOrCtrl+S', click: () => colorpicker.getWindow().webContents.send('shortSave') }, { type: 'separator' }, { label: 'Copy Hex Color', accelerator: 'CmdOrCtrl+W', click: () => colorpicker.getWindow().webContents.send('shortCopyHex') }, { label: 'Copy RGB(a) Color', accelerator: 'Shift+CmdOrCtrl+W', click: () => colorpicker.getWindow().webContents.send('shortCopyRGB') }, { type: 'separator' }, { label: 'set Negative Color', accelerator: 'CmdOrCtrl+N', click: () => colorpicker.getWindow().webContents.send('shortNegative') } ] }, { label: 'Tools', submenu: [ { label: 'Pin to Foreground', accelerator: 'CmdOrCtrl+F', click: () => colorpicker.getWindow().webContents.send('shortPin') }, { type: 'separator' }, { label: 'Pick Color', accelerator: 'CmdOrCtrl+P', click: () => picker.init() }, { label: 'Get Clipboard\'s Colors', accelerator: 'Shift+CmdOrCtrl+V', click: () => colorpicker.getWindow().webContents.send('shortApply') }, { label: 'Toggle Shading', accelerator: 'CmdOrCtrl+T', click: () => colorpicker.getWindow().webContents.send('shortShading') }, { label: 'Toggle Opacity', accelerator: 'CmdOrCtrl+O', click: () => colorpicker.getWindow().webContents.send('shortOpacity') }, { label: 'Set Random Color', accelerator: 'CmdOrCtrl+M', click: () => colorpicker.getWindow().webContents.send('shortRandom') } ] } ] Menu.setApplicationMenu(Menu.buildFromTemplate(template)) ``` 自定义菜单、子菜单,每个选项的快捷键和回调函数 ## 定义快捷键 ``` globalShortcut.register('CommandOrControl+Alt+K', () => { //注册快捷键 dialog.showMessageBox({ type: 'info', message: 'Success!', detail: 'You pressed the registered global shortcut keybinding.', buttons: ['OK'] }) }) globalShortcut.unregisterAll() //销毁快捷键 ``` ## 复制粘贴板 ``` const {clipboard} = require('electron') clipboard.writeText('Electron Demo!') //写 clipboard.readText() //读 ``` ## 获取系统信息 ``` app.getAppPath() //获得app的路径 process.versions.electron //获得electron版本 os.homedir() //获得系统的home路径 ``` ## 系统提醒 ``` const notification = { title: 'Basic Notification', body: 'Short message part' } const myNotification = new window.Notification(notification.title, notification) }) ``` ## 选择文件 ``` dialog.showOpenDialog({ properties: ['openFile', 'openDirectory'] }, (files) => { if (files) { Yourcallback() } }) ```
举报
分享

分享文章到朋友圈

分享文章到微博

采纳成功

您已采纳当前回复为最佳回复

发帖: 148粉丝: 15

发消息 + 关注

发表于2020年10月22日 15:10:21
直达本楼层的链接
沙发
显示全部楼层

点赞 评论 引用 举报

采纳成功

您已采纳当前回复为最佳回复

火灵

发帖: 172粉丝: 11

发消息 + 关注

发表于2020年10月27日 21:24:03
直达本楼层的链接
板凳
显示全部楼层

谢谢分享!

点赞 评论 引用 举报

游客

富文本
Markdown
您需要登录后才可以回帖 登录 | 立即注册

结贴

您对问题的回复是否满意?
满意度
非常满意 满意 一般 不满意
我要反馈
0/200