1. 程序已经启动,通过点击打开文件,进行打开
this.$dialog
.showOpenDialog({
title: "打开文件",
defaultPath: "",
properties: ["openFile"],
// properties: ['openFile', 'multiSelections'],
filters: [
{ name: "Text", extensions: ["icode"] },
{ name: "Custom File Type", extensions: ["as"] },
{ name: "All Files", extensions: ["*"] }
]
})
.then(result => {
if (!result.canceled && result.filePaths.length > 0) {
this.$emitNode("tradeMenu", "open", result.filePaths[0]);
// 监听主进程读完文件数据
this.$onNodeOnce("tradeMenuOpen", (event, arg) => {
let trade = openFormat(result.filePaths[0], arg);
this.newEditTrade(trade);
});
}
})
.catch(err => {
console.log(err);
});
其中的$dialog,emitNode,onNodeOnce等待都是利用electron的,利用Vue进行封装的,result是选中文件的一系列数据
Vue.prototype.$onNodeOnce=function(channel, listener){
ipcRenderer.once(channel, listener)
};
// 监听主线程消息
Vue.prototype.$onNode = function(channel,listener){
ipcRenderer.on(channel, listener)
}
// 文件弹框全局使用
Vue.prototype.$dialog = dialog
2. 在桌面直接打开文件(.html),会自动打开软件,并读取文件, 或者将(.html)文件移动到程序图标上进行打开。
这个分两步,1.让程序能够代开文件,2.程序读取文件路径
"mac": {
"icon": "./logo.icns",
"fileAssociations": [
{
"ext": [
"icode"
]
}
],
"target": [
{
"target": "dmg"
}
]
},
"dmg": {
"title": "ICODE",
"icon": "./logo.icns",
"backgroundColor": "#ffffff",
"contents": [
{
"x": 192,
"y": 344
},
{
"x": 448,
"y": 344,
"type": "link",
"path": "/Applications"
}
]
},
主要利用fileAssociations来注册程序打开后缀名。
//主线程代码
global.fileToOpen = "";
app.on('open-file', (event, path) => {
// 当用户想要在应用中打开一个文件时发出。
// 事件通常在应用已经打开,并且系统要再次使用该应用打开文件时发出。
// 也会在一个文件被拖到 dock 并且还没有运行的时候发出。
event.preventDefault()
fileToOpen = path;
//win是打开的窗口,如果程序未启动则不会触发
//窗口打开后可通过渲染进程代码global来获取路径
if(win){
win.webContents.send("activateThenOpenFile",fileToOpen)
}
});
//渲染进程代码(路径得到就ok了)
let currentFile = this.$electronRemote.getGlobal('fileToOpen') || null;
3. 程序已经启动,通过点击打开文件,进行打开
//参考2程序以及启动。主进程
if(win){
win.webContents.send("activateThenOpenFile",fileToOpen)
}
// 渲染进程
// 程序启动后双击-----打开文件
this.$onNode("activateThenOpenFile",(event,path)=>{
if (__.isString(path) && /\.icode$/.test(path)) {
this.$emitNode("tradeMenu", "open", path);
// 监听主进程读完文件数据
this.$onNodeOnce("tradeMenuOpen", (event, arg) => {
let trade = openFormat(path, arg);
this.newEditTrade(trade);
});
}
})
4. 程序已经启动,通过移动文件到程序打开的页面,进行打开
这主要就要依赖原生拖拽
// 拖拽进程序打开文件
let drag = document.getElementById("drag")
//此方法删除不行
drag.addEventListener("dragover", (e)=>{
// 用来hack某些兼容性问题
e.dataTransfer.dropEffect = "copy";
e.stopPropagation();
e.preventDefault();
}, false);
drag.addEventListener("drop", (e)=>{
e.preventDefault();
e.stopPropagation();
if(e.dataTransfer.files[0].path){
let path = e.dataTransfer.files[0].path
this.$emitNode("tradeMenu", "open", path);
// 监听主进程读完文件数据
this.$onNodeOnce("tradeMenuOpen", (event, arg) => {
let trade = openFormat(path, arg);
this.newEditTrade(trade);
});
}
}, false);
以上代码无法粘贴复制直接使用,但是能够提供方向,以及一些重要API方法。