Electron打开和保存

这个地方就是一个菜单项, 我只截取了相关的菜单内容. 菜单咋弄, 请翻阅之前的blog, talk is cheap, show me the code

//这个地方呼出一个dialog, 用户确认文件名和路径(可以修改), 再保存.
//补一个逻辑, 就是补上默认的保存地址, 应该就是上次这个窗口的保存地址.
{
label: 'save',
accelerator: 'Cmd+S',
click() {					
log('Oh, save save')

//当前焦点窗口要保留下, 因为弹出对话框之后, 窗口会自然失去焦点.
let bwf=BrowserWindow.getFocusedWindow()

//第二步, 对话框的异步回调函数, 参数就是用户在对话框选择的文件名.
function savefile(filename){
    //把文件名作为参数穿过去. 
    bwf.webContents.send('save', filename)
    //实际的保存在bwf中做. 用ipc响应这个消息
    bwf.sname=filename
    //设置窗口标题为文件名: 
    bwf.setTitle(filename)
}

//第一步, 弹出一个对话框, 选文件. win.sname='xx.md'
//如果是默认值, 则应该弹出对话框保存, 这个默认值在之前初始化窗口的时候设置.
if(bwf.sname==blankname){
    dialog.showSaveDialog({title: '保存文件',defaultPath:bwf.sname}, savefile)		
}else{
    //如果不是默认值那么久不必弹出对话框, 直接保存
    savefile(bwf.sname)
}
}
}

那么再看看open

{
label: 'open',
accelerator: 'Cmd+O',
click() {					
log('Oh, open open')
function openfile(filename){
    //filename就是文件的地址, 可以开始处理了.
}
//一个dialog, 选择文件.
let options = {
    title: '选择文件', 
    //defaultPath:'./xxxx.md',
    properties:['openDirectory','openFile','multiSelections','createDirectory'],
}
dialog.showOpenDialog(options, openfile)
}
},

过程中发现了有趣的事

1. js的默认参数太优雅了.
2. js中undefined和null不是一回事.

function test(num = 1) {
  console.log(typeof num);
}

test();          // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)

// test with other falsy values:
test('');        // 'string' (num is set to '')
test(null);      // 'object' (num is set to null)

由此得到一个经验: 如果你要判断某个值是否设置了, 那么还是默认给它个默认值吧, 这样就可以直接判断是否和默认值相同. 否则你都不知道要判断啥, null还是undefined?

参考

• dialog: https://wizardforcel.gitbooks.io/electron-doc/content/api/dialog.html
• https://github.com/electron/electron/blob/master/docs/api/dialog.md
• https://electronjs.org/docs/api/dialog
• menu: https://electronjs.org/docs/api/menu
• url: https://nodejs.org/api/url.html#url_url_format_urlobject

另外的思路

• 用html的file输入, in Electron we can select the directory by specifying simple input element with type=”file” and webkitdirectory attribute’. <input id="myFile" type="file" webkitdirectory /> and we can get the directory full path with the path property of File object document.getElementById("myFile").files[0].path

• <input type="file">,
  document.getElementById("myFile").files[0].path //这个path属性是electron加的, 就是为了大家能够拿到真正的文件地址.
  document.getElementById("myFile").value  //这样的话, 目录会直接显示为fakepath.....
  

需要进一步做的内容

• 拖动文件到应用
• 关联文件到应用
• 制作一个bookmark.