• 十分钟轻松入门 nw.js 实现桌面应用程序

    最近别的组有项目里面使用了 nw.js 去实现了桌面应用程序，出于好奇，我查找了一些资料，准备了解一下入个门。

    什么是 nw.js

    https://github.com/nwjs/nw.js

    node-webkit 更名为 NW.js。

    NW.js 是一个基于 Chromium 和 node.js 的应用运行时。 可以使用 NW.js 以 HTML 和 JavaScript 编写本机应用程序。 它还允许您直接从 DOM 调用 Node.js 模块，并启用一种使用所有 Web 技术编写本机应用程序的新方法。

    它是在英特尔开源技术中心创建的。

    下载 nwjs-sdk

    https://nwjs.io/downloads/

    在这里插入图片描述

    下载完成后，解压一下

    在这里插入图片描述

    运行一下 nw.exe ，就会弹出 nw.js 的窗口了。

    在这里插入图片描述

    demo1：输出 hello world 窗口

    在上面解压目录的基础上面

    Step 1. 创建一个 package.json 文件，里面添加下面代码

    {
	"name": "helloworld",
	"main": "index.html"
}

    • 1
    • 2
    • 3
    • 4

    Step 2. 创建一个index.html 文件

    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">
    <title>凯小默的博客测试nwjstitle>
head>
<body>
    <h1>hello world nwjsh1>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    Step 3. 启动应用

    添加好上面两个文件之后：

    在这里插入图片描述
    我们运行 nw.exe，我们可以看到弹出了这个桌面应用程序。

    在这里插入图片描述

    demo2：使用 nw.js 创建菜单栏

    https://nwjs.readthedocs.io/en/latest/#references

    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" />
    <title>凯小默的博客测试nwjstitle>
head>

<body>
    <h1>hello nwjs Menuh1>

    <script>
        // Create an empty menubar
        var menu = new nw.Menu({type: 'menubar'});

        // Create a submenu as the 2nd level menu
        var submenu = new nw.Menu();
        submenu.append(new nw.MenuItem({ label: 'kaimo 666' }));
        submenu.append(new nw.MenuItem({ label: 'kaimo 777' }));

        // Create and append the 1st level menu to the menubar
        menu.append(new nw.MenuItem({
            label: 'kaimo',
            submenu: submenu
        }));

        // Assign it to `window.menu` to get the menu displayed
        nw.Window.get().menu = menu;

        console.log("nw--->", nw);
        console.log("window.menu--->", window.menu);
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    点击 kaimo 就可以出现下来的菜单

    在这里插入图片描述

    打印日志输出如下

    在这里插入图片描述
    在这里插入图片描述

    demo3：使用 node.js 的 api

    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">
    <title>凯小默的博客测试nwjstitle>
head>

<body>
    <script>
        // get the system platform using node.js
        var os = require('os');
        // os.platform() 方法返回一个字符串, 指定Node.js编译时的操作系统平台
        document.write(`kaimo is running on ${os.platform()}、${os.version()}`);
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

    demo4：实现切换主题的功能

    这里可以参考我之前写的，html + css + js 怎么实现主题样式的切换？

    <!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">
    <title>凯小默的博客测试nwjs</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            padding: 50px 100px;
            background-color: var(--background-color);
        }
        .box {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid var(--border-color);
            box-shadow: var(--box-shadow)
        }
        .box:hover {
            box-shadow: var(--box-shadow-hover)
        }
        .box .text {
            color: var(--text-color);
        }
        .box .text-sub {
            margin-top: 10px;
            color: var(--text-color-sub);
        }
    </style>
</head>
<body>
    <div class="btn">
        <button mode="light" class="el-button el-button--primary">明亮模式</button>
        <button mode="read" class="el-button el-button--success">阅读模式</button>
        <button mode="dark" class="el-button el-button--warning">暗黑模式</button>
    </div>
    <div class="box">
        <div class="text">凯小默的博客</div>
        <div class="text-sub">测试切换不同主题模式</div>
        <h3 class="text">当前模式：<span class="cur-mode"></span></h3>
    </div>
    <script>
        // 模式配置
        const modeOptions = {
            light: {
                '--background-color': '#fff',
                '--box-shadow': '0 1px 8px 0 rgba(0, 0, 0, 0.1)',
                '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
                '--text-color': '#242424',
                '--text-color-sub': '#7F7F7F',
                '--border-color': '#eaecef',
            },
            read: {
                '--background-color': '#f5f5d5',
                '--box-shadow': '0 1px 8px 0 rgba(0, 0, 0, 0.1)',
                '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
                '--text-color': '#004050',
                '--text-color-sub': '#7F7F7F',
                '--border-color': 'rgba(0, 0, 0, 0.15)',
            },
            dark: {
                '--background-color': '#181818',
                '--box-shadow': '0 1px 8px 0 rgba(255, 255, 255, .6)',
                '--box-shadow-hover': '0 2px 16px 0 rgba(255, 255, 255, .7)',
                '--text-color': 'rgba(255, 255, 255, .8)',
                '--text-color-sub': '#8B8B8B',
                '--border-color': 'rgba(255, 255, 255, .3)',
            }
        }
        // 设置模式
        function setMode(mode) {
            const rootElement = document.querySelector(':root');
            const options = modeOptions[mode];
            // 遍历设置
            for (const k in options) {
                rootElement.style.setProperty(k, options[k]);
            }
            rootElement.setAttribute("data-theme", mode);
            // 当前模式
            const curMode = document.querySelector('.cur-mode');
            curMode.innerHTML = mode;
        }
        // 初始设置为明亮模式
        setMode("light");

        document.querySelector(".btn").addEventListener("click", (e) => {
            setMode(e.target.getAttribute("mode"));
        })
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    运行之后：

    在这里插入图片描述
    切换 read 模式

    在这里插入图片描述

    切换到 dark 模式

    在这里插入图片描述
    今天就到这里，等我研究研究，到时有时间在写一写博客。

    参考资料

  • 相关阅读:
    2022世界人工智能大会｜弘玑Cyclone吴迪：人机协作，乃通往数字化未来之“道”
    基于springboot实现休闲娱乐代理售票平台系统项目【项目源码+论文说明】计算机毕业设计
    以色列战术耳机公司【Silynxcom】申请1000万美元纳斯达克IPO上市
    43、vue导出pdf文件，并解决滚动条外内容无法获取的问题
    具备自纠正和逐维学习能力的粒子群算法-附代码
    【2021集创赛】Arm杯二等奖-基于Arm核的智慧病房手势识别方案
    正规现货黄金中的MACD技术
    一、 计算机网络概论
    关于redux持久化的配置记录
    分析Jetpack Compose动画内部是如何实现的
  • 原文地址：https://blog.csdn.net/kaimo313/article/details/126405942