node + node-webkit实现电脑文件信息扫描小插件

Posted 岁月可贵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了node + node-webkit实现电脑文件信息扫描小插件相关的知识,希望对你有一定的参考价值。

效果图

(部分)

配置文件 package.json


    "main": "index.html",
    "name": "tree",
    "window": 
        "title": "tree",
        "icon": "./favicon.ico",
        "toolbar": true,
        "width": 1280,
        "height": 800,
        "min_width": 1000,
        "min_height": 600,
        "position": "center"
    ,
    "webkit": 
        "plugin": true,
        "java": false,
        "page-cache": false
    ,
    "dependencies": 
        "diskinfo": "^0.0.3"
    

具体配置信息可以看我另外一篇博客

静态页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>文件</title>
</head>

<body>
    <div id="app">
        <!-- 选项 -->
        <div class="option">
            <div class="position"></div>
            <div class="path">
                <div class="choose">
                    <span class="back box"></span>
                    <span class="forward box"></span>
                </div>
                <div class="crumbs"></div>
            </div>
        </div>
        <!-- 文件内容 -->
        <div class="content">
            <table cellspacing=0>
                <thead>
                    <tr>
                        <td class="name" onclick="titleSort('name')">
                            <div class="icon ascend" data-flag=1></div>
                            <div class="th-td-container">名称</div>
                        </td>
                        <td class="time" onclick="titleSort('time')">
                            <div class="icon" data-flag=1></div>
                            <div class="th-td-container">修改时间</div>
                        </td>
                        <td class="type" onclick="titleSort('type')" data-flag=0>
                            <div class="th-td-container">类型</div>
                        </td>
                        <td class="size" onclick="titleSort('size')">
                            <div class="icon" data-flag=1></div>
                            <div class="th-td-container">大小</div>
                        </td>
                        <td class="permise">
                            <div class="th-td-container">权限</div>
                        </td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</body>
<script src="./js/util.js"></script>
<script src="./js/render.js"></script>
<script type="text/javascript" src="./js/file.js"></script>

</html>

关键代码

1、读取电脑磁盘空间大小

const  getDrives  = require('diskinfo');
// 读取电脑系统盘数
window.onload = function() 
    getDrives(function(err, aDrives) 
        // 磁盘渲染
        storageRender(aDrives);
        // 地址栏渲染
        pathRender(aDrives[0].mounted);
        // 初始化环境
        init(aDrives[0].mounted);
    )

2、读取文件信息

        const fs = require("fs");
        fs.readdirSync(pathName + "\\\\");
        // 读取目录信息
        let stat = fs.statSync(pathName + "\\\\" + dir[i]);

         if (stat.isDirectory()) 
                folderList.push(
                    name: dir[i],
                    time: stat.mtimeMs,
                    type: "文件夹",
                    size: "",
                    flag: stat.isDirectory(),
                    isAccess: true,
                )
             else 
                fileList.push(
                    name: dir[i],
                    time: stat.mtimeMs,
                    type: "文件",
                    size: stat.size,
                    flag: stat.isDirectory(),
                    isAccess: true,
                )
            

3、前进后退

// 后退
function backEvent() 
    let prev = pathList[currPathIndex - 1];
    currPathIndex -= 1;
    selectDir(prev, false);


// 前进
function forwardEvent() 
    let next = pathList[currPathIndex + 1];
    currPathIndex += 1;
    selectDir(next, false);



// 增加前进或后退事件
function addEvent() 
    let back = document.querySelector(".path .choose .box:first-child");
    let forward = document.querySelector(".path .choose .box:nth-child(2)");
    // 前进事件
    if (currPathIndex != pathList.length - 1) 
        forward.onclick = forwardEvent;
        forward.classList.remove("forward");
        forward.classList.add("forward-active");
     else 
        forward.onclick = null;
        forward.classList.remove("forward-active");
        forward.classList.add("forward");
    
    // 后退事件
    if (currPathIndex != 0) 
        back.onclick = backEvent;
        back.classList.remove("back");
        back.classList.add("back-active");
     else 
        back.onclick = null;
        back.classList.remove("back-active");
        back.classList.add("back");
    

关键工具类

1、时间格式化

/**
 * 时间格式化
 * @param Number time 时间
 * @returns 格式化后的时间
 */
function formatDate(time) 
    let date = new Date(time);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    let h = date.getHours();
    let min = date.getMinutes();
    min = min >= 10 ? min : "0" + min;
    m = m >= 10 ? m : "0" + m;
    d = d >= 10 ? d : "0" + d;
    h = h >= 10 ? h : "0" + h;
    return y + "/" + m + "/" + d + " " + h + ":" + min;

2、文件大小格式化

/**
 * 文件大小格式化
 * @param Number data 
 * @returns 格式化后的文件大小
 */
function formatSize(size) 
    if (("" + size).trim().length != 0) 
        let valArray = ("" + Math.ceil(size / 1024)).split("").reverse();
        let formatArray = [];
        for (let i = 0; i < valArray.length; i++) 
            formatArray.push(valArray[i]);
            if ((i + 1) % 3 == 0) 
                formatArray.push(",");
            
        
        if (formatArray[formatArray.length - 1] == ",") 
            formatArray = formatArray.splice(0, formatArray.length - 1);
        
        return formatArray.reverse().join("") + " " + "KB";
    
    return "";

3、文件名字排序

/**
 * 目录处理 (true: 为升序,false:为降序)
 * @param Array data      排序数据
 * @param String el       排序字段
 * @param Number flag     排序: 1 升序(默认) 0 降序
 * 
 */
function formatData(data, el, flag = 1) 
    if (el == "name") 
        let chinese = [];
        // 过滤掉中文开头名称
        data = data.filter(item => 
            if (/^[\\u4e00-\\u9fa5]+/.test(item.name)) 
                chinese.push(item)
                return false
            
            return true
        )
        if (flag == 1) 
            chinese.sort(commonCompare)
            data.sort(SortLikeWin);
            data = data.concat(chinese);
         else 
            chinese.sort(commonCompare).reverse();
            data.sort(SortLikeWin).reverse();
            data = chinese.concat(data);
        
     else 
        if (flag == 1) 
            data.sort((a, b) => 
                // 升序 1 2 3
                return a[el] - b[el];
            )
         else 
            data.sort((a, b) => 
                // 降序
                return b[el] - a[el];
            )
        
    
    return data;

由于目前自己电脑有些小问题,无法将代码提交到Github仓库上。

后期解决后会将代码提交到GitHub上,并在评论区上会提供下载地址。

下载后具体运行可以看我另外一篇博客

以上是关于node + node-webkit实现电脑文件信息扫描小插件的主要内容,如果未能解决你的问题,请参考以下文章

Node-Webkit 文件下载进度

Node-Webkit 不会打开文件

怎么自定义 node-webkit 通知的 标题 和 图标

在 node-webkit 中使用默认程序打开文件

云笔记开发记录一:node-webkit 项目结构?

node-webkit打包的exe文件的图标怎么更换