济南外贸网站建设,宁波建设教育培训网,wordpress 找不到安装主题,英雄联盟最新赛事使用electron封装了前端界面之后#xff0c;最终打包为一个客户端#xff08;exe#xff09;。但是#xff0c;最近项目组内做CS#xff08;c开发#xff09;的#xff0c;想把所有的配置都放进安装目录的配置文件中#xff08;比如config.json#xff09;。这做法最终打包为一个客户端exe。但是最近项目组内做CSc开发的想把所有的配置都放进安装目录的配置文件中比如config.json。这做法对于纯前端而言有点难以接收。
第一纯前端不允许读取本地文件。就这一条直接封死所有的路。 第二读取配置前端可以通过可视化界面存入本地缓存不必要读取本地文件。
基于以上两点我觉得读取本地文件不可能实现况且时间紧任务重。奈何前端话语权微乎其微。
最后我咬着牙实现了一下读取本地文件的需求。如有更好的方案可以私信评论。 首先纯js肯定干不了读取本地文件的事情。那么只能用nodejs了。况且electron内部已经集成了nodejs所以使用nodejs是必然选择。
读取本地文件
需要分两步走。
第一先获取本系统的安装目录。第二使用fs读取config配置文件。具体代码如下
// 获取 exe 的安装目录
// 使用electron 内部的方法 app.getPath
// 配置文件 background.js 中写入如下代码import {app,protocol,BrowserWindow,Menu,Tray,globalShortcut,ipcMain,dialog
} from electron;// 获取安装目录
// 这里要注意 获取的安装目录是反斜杠 也就是 c:\dev\xxxx
// 这肯定是不行的 nodejs在使用这种地址是读取不了的
// 所以 后边加了一个replace 用于转换反斜杠
let exePath path.dirname(app.getPath(exe)).replace(/\\/g, /);// 拼接好安装目录下的config.json
let configPath ${exePath}/config.json;// 使用fs读取文件内容
const fs require(fs);
fs.readFile(configPath, utf-8, (err, data) {if (data) {// 注意要转换jsonconst config JSON.parse(data)}
})传递数据
现在本地数据是读取到了。如何将数据传递到我们的前端工程中我用的是vue
我想到了两种办法。
第一种通过electron窗口的方法。
// 创建window之后可以使用这个方法传递消息
// win是new BrowserWindow
// 注意消息主题是 async-messagewin.webContents.send(async-message, 消息)// 前端js中可以这么接收
import { ipcRenderer } from electron;// 注意 监听事件要和上边保持一致 async-messageipcRenderer.on(async-message, (e, arg) {console.log(渲染进程我收到啦, arg)
})第二种就是node起一个服务就相当于写了一个接口前端再去调用。
// nodejs 写一个服务// 定义一个暂存数组 用于后边关闭并清除socket服务
var sockets [];// 创建一个httpserver
const http require(http);// 创建服务器对象
const server http.createServer();
const closeServer () { sockets.forEach(function(socket){socket.destroy();});server.close(function(){console.log(close server!);});
}// res.local_port 就是我们上边读取本地配置后的内容server.listen(res.local_port);// 对错误进行捕获server.on(error, (err) {if (err.code EADDRINUSE) {// 如果目标端口被占用将使用// NodeJS 随机分配的端口号server.listen(0);}
});// 在成功监听后向终端输出被监听的端口号
server.on(listening, () {console.log(【HTTP Server is running at http://127.0.0.1: server.address().port 】)
})server.on(connection,function(socket){sockets.push(socket);//console.log(sockets, sockets);socket.once(close,function(){sockets.splice(sockets.indexOf(socket),1);});
});server.on(request, function (req, res) {const url req.url;// 接口地址就是 /getInfoif(url /getInfo) {res.setHeader(content-type, application/json);res.end(ws_path);closeServer();} else {res.writeHeader(404);res.end(404 not found);closeServer();}
})// 前端工程中 请求这个接口 就可以获取配置信息了axios.get(http://127.0.0.1:3000/getInfo).then(res {if (res.code 200) {console.log(这里就是请求本地的配置 -- , res.data);}
})
就这样收工......
