技术思绪摘录旅行
Electron一个使用HTML、CSS和JavaScript开发桌面应用程序的框架。Electron可以生成在Windows、macOS和Linux上运行的应用程序,借助Electron可以把我们的web端应用直接移植到桌面端而无需再次开发,这样我们可以使用同一套代码在不同平台上运行应用,极大的缩短了开发时间。

主进程:main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,  //开启渲染进程中使用nodejs
            contextIsolation: false //开启渲染进程中使用nodejs    In Electron 12, the default will bechanged to `true      
        }
    });

    //在渲染进程中开启调试模式
    mainWindow.webContents.openDevTools()

    mainWindow.loadFile(path.join(__dirname, "index.html"));
}

//监听应用的启动事件
app.on("ready", createWindow)

//监听窗口关闭的事件,关闭的时候退出应用,macOs 需要排除 
app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') {
        app.quit();
    }
});

//Macos 中点击 dock 中的应用图标的时候重新创建窗口 
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

加载了文件index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
   <div id="content">
   </div>
    <script src="./renderer/index.js"></script>
</body>
</html>

渲染进程index.js

/*
https://www.w3cschool.cn/jsref/event-ondragover.html
    ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
*/
const fs = require("fs");
window.onload = () => {
    var contentDom = document.querySelector("#content");
    //阻止默认行为
    contentDom.ondragenter = contentDom.ondragover = contentDom.ondragleave = () => {
        return false;
    }
    contentDom.ondrop = (e) => {
        // console.log(e)
        console.log(e.dataTransfer.files[0].path);
        var path = e.dataTransfer.files[0].path;
        fs.readFile(path, (err, data) => {
            if (err) {
                console.log(err);
                return false;
            }
            contentDom.innerHTML = data
        })
    }
}


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫