windows浅尝NW.js

我码玄黄

于 2024-04-29 09:48:45 发布

阅读量1k

点赞数 15

文章标签： windows javascript 开发语言

本文链接：https://blog.csdn.net/qq_30333063/article/details/138302239

版权

windows浅尝NW.js

在本指南中，我们将详细介绍如何在windows上部署NW.js,实现应用的构成、启动方式、开发环境

环境部署

首先我们需要从官网下载对应的压缩包 (https://nwjs.io/downloads/)

请添加图片描述

下载完成后解压，可以看到对应的文件目录

请添加图片描述

然后我们运行目录下nw.exe如果出现下面样式，则表示启动成功

在这里插入图片描述

尝试创建一个NW.js应用

步骤 1.

在根目录中创建一个为package.nw的文件夹，然后在文件夹中创建 package.json:

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

package.json是JSON 格式格式的配置文件. main 属性定义了应用首页, 如本例的 “index.html”. name则定义了应用名称. 具体查看配置文件章节.

步骤2.

在app目录中创建 index.html文件:

<html>
<head>
    <meta charSet="UTF-8"/>
    <title>Hello, NW.js</title>
    <style>
        h1 {
            text-align: center;
        }

        b {
            display: inline-block;
            width: 150px;
            text-align: right;
        }
    </style>
</head>
<body>
<h1>Hello, NW.js</h1>
<div id="about"></div>
<script>
    const os = require("os");
    const about = {
        AppName: nw.App.manifest.name,
        Version: nw.App.manifest.version,
        NW: process.versions.nw,
        Node: process.versions.node,
        Chromium: process.versions.chromium,
        V8: process.versions.v8,
        OS: [os.platform(), os.arch(), os.release()].join(" "),
    };
    document.querySelector("#about").innerHTML = Object.entries(about)
            .map(([key, value]) => `<div><b>${key}：</b>${value}</div>`)
            .join("");
</script>
</body>
</html>