来源：未知 时间：2022-11-02 10:49 作者：小飞侠 阅读:次
[导读] electron自定义后缀名，双击打开关联程序 前景：需求是双击后缀名.aul（自定义后缀名）的文件打开我们研发的electronAul.exe程序并展示这个文件里面的内容 我主要讲的是electron-packager方法...
|
electron自定义后缀名，双击打开关联程序 前景：需求是双击后缀名.aul（自定义后缀名）的文件打开我们研发的electronAul.exe程序并展示这个文件里面的内容 我主要讲的是electron-packager方法，electron-builder可以通过fileAssociations来设置关联文件，具体可以看文档 如果只是双击打开程序，不需要做其他操作的话直接在index.html 或者app.js写如下代码即可，我是写在index.html里面的 index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-react-app" />
<script type="text/javascript" src="./registry.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const { remote } = require('electron');
let path = require('path');
let appPath = remote.app.getAppPath(); // 当前应用程序目录
writeRegistry(process.argv0,appPath)
</script>
</body>
</html>registry.js 写入注册表 这里你们需要修改aulfile和.aul，就比如你们的后缀名为.test，那么就把aulfile修改为testfile,把.aul修改为.test const { exec } = require('child_process')
function writeRegedit(cmdstr){
console.log("cmd " + cmdstr)
exec(cmdstr, {encoding: "gbk"},function (err, stdout, stderr) {
if (err) {
console.log("cmd errror" + stderr)
}
console.log("cmd success" )
})
}// path 程序安装路径 // appPath logo路径 function writeRegistry(path,appPath){
try{
let eName = "aulfile";
writeRegedit(`REG ADD HKEY_CURRENT_USER\\SOFTWARE\\Classes\\${eName}\\DefaultIcon /t REG_SZ /d "${appPath}\\favicon.ico" /f`);//logo路径
writeRegedit(`REG ADD HKEY_CURRENT_USER\\SOFTWARE\\Classes\\${eName}\\shell\\open\\command /t REG_SZ /d "${path} \"%1\"" /f`)
writeRegedit('REG ADD HKEY_CURRENT_USER\\Software\\Classes\\.aul /t REG_SZ /d "'+eName +'" /f');
}
catch(e){
console.log("HKEY_CURRENT_USER Applications error")
}
}这个时候就可以打包工程文件啦，记住一定得先运行以下打包的exe文件，然后再双击test.aul就可以打开程序啦，这个代码在开发中是没办法测试的，因为程序路径不对 如果还需要获取激活程序文件路径时就如下操作： app.js 不一定要写在app.js，写在其他可执行的文件都行,react就写在useEffect里面，vue就写在mounted里面 const { ipcRenderer } = require("electron");
useEffect(() => {
ipcRenderer.send("sendMsg", "get process");
//监听主进程的广播
ipcRenderer.on("replayRenderer", (e, data) => {
得到data之后就可以做其他操作啦
console.log('data',JSON.parse(data0)
});
}, [])main.js下面的代码必须写在主进程文件里面，这里main.js就是我的主进程文件，你们可以在package.json查看main 对应的文件就是主进程文件 //接收渲染进程的通知
const { ipcMain} = require('electron')
ipcMain.on("sendMsg", (e, data) => {
// 收到渲染进程消息后给渲染进程回消息
e.sender.send("replayRenderer", JSON.stringify(process.argv));
});注意：这里我是用JSON.stringify包起来传的数据哈，不包可能会报错哈 获取你们会疑惑我为什么要这样写，明明index.html也可以获取process数据，这里主要涉及了主进程和渲染进程，主进程主要指main.js以及main.js引入的所有文件，在主进程中无法操作window，主进程的process.argv第二个字段指的是激活程序文件路径，渲染进程的process.argv第二个字段指的是运行程序的文件路径（index.html），所以就需要主进程把process.argv数据传递给渲染进程，那么怎么确定渲染进程有没有加载了，就需要渲染进程加载完后给主进程发消息，主进程收到后再把需要的数据返回给渲染进程 当然了，这样每次都会新开一个窗口，如果只想在一个窗口打开的话，就在main.js添加如下代码 if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, argv, workingDirectory, additionalData) => {
// 当运行第二个实例时,将会聚焦到mainWindow这个窗口
if (mainWindow) {
if (mainWindow.isMinimized()) mainWindow.restore()
mainWindow.focus()
mainWindow.show()
mainWindow.webContents.send('replayRenderer', JSON.stringify(argv, ))
}
})
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
}最后，再分享一个技能，生产环境没有控制台怎么办：ctrl + shift + i 可以打开/关闭控制台，开发环境：mainWindow.webContents.openDevTools(); 以上就是electron自定义后缀名，双击打开关联程序全部内容,感谢大家支持自学php网。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
