Neutralinojs文档

Appearance

On this page

你的第一个Neutralinojs应用 ​

介绍 ​

我们将使用Neutralinojs创建一个简单的应用程序。此示例应用程序将显示Hello和您的操作系统的当前用户名。例如，如果当前用户名为John，则会显示Hello John。

小贴士 本教程使用普通JavaScript构建应用程序。如果你想使用前端库，请查看此指南。

Step 0: 安装neu CLI ​

您需要安装neu CLI来创建Neutralinojs应用程序。您也可以在没有CLI的情况下开发应用程序。但是，CLI会使一些困难的事情变得容易。在终端上运行以下命令，全局安装neu CLI。

shell
npm install -g @neutralinojs/neu

如果你不想全局安装，可以通过npx使用neu CLI

shell
npx @neutralinojs/neu <command>

Step 1: 创建一个新的app ​

输入以下命令创建一个新的应用程序。

shell
neu create myapp

上面的命令将在myapp目录中创建一个新的应用程序。确保一切正常后，请运行您的应用程序。

shell
cd myapp
neu run

小贴士

如果你在Windows上，你可能会看到一个空白的白色屏幕。原因是，默认情况下，从UWP上下文访问localhost是禁用的。 使用管理员权限运行以下命令以解决此问题。

shell
CheckNetIsolation.exe LoopbackExempt -a -n="Microsoft.Win32WebViewHost_cw5n1h2txyewy"

您可以将其包含在Windows安装文件中（征得用户同意），因为用户在Windows上可能会得到一个空白屏幕。 为了获得更好的开发人员体验，我们建议您在Windows上安装WebView2运行时。

Step 2: 编写JavaScript、HTML和CSS ​

在你的项目源文件中插入下面的代码

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>NeutralinoJs</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="neutralinoapp">
      <h1 id="name"></h1>
    </div>
    <script src="js/neutralino.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
css
html, body{
    margin: 0px;
    padding: 0px;
}

#neutralinoapp {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFD700;
}

#neutralinoapp h1 {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial;
    font-size: 48px;
    padding: 0px;
    margin: 0px;
}
js
let getUsername = async () => {
  const key = NL_OS == 'Windows' ? 'USERNAME' : 'USER';
  let value = '';
  try {
    value = await Neutralino.os.getEnv(key);
  }
  catch(err) {
    console.error(err);
  }
  document.getElementById('name').innerText = `Hello ${value}`;
}

Neutralino.init();
getUsername();

与Node.js环境不同，Neutralenojs阻止任意的本机API函数执行。 在这里，我们使用了os.getEnv本机函数，因此请检查您的应用程序配置是否允许应用程序前端执行它。 默认配置已经允许整个os命名空间，如下nativeAllowList权限设置：

text
"nativeAllowList": [
    "app.*",
    "os.*",
    "debug.log"
],

我们不需要更新权限设置中的任何内容，因为它已经允许os.getEnv本机函数调用。

Step 3: 运行你的应用 ​

如上所述，您可以使用run命令启动应用程序。

shell
neu run

恭喜！您的应用程序工作了。 myapp-running-linux.png

当应用程序资源发生更改时，neu run命令将重新加载应用程序。在应用程序运行时更改index.html试一试。

Step 4: 构建你的应用 ​

要为应用程序制作可移植的二进制文件，我们可以使用build命令。在您的终端上输入以下命令，为所有支持的平台制作最终的二进制文件。

shell
neu build --release

上面的命令将在dist目录中生成所有平台的二进制文件，并且--release标志还将把二进制文件打包到.zip文件中。这个命令将很快完成，因为不需要编译。

下一步 ​

现在您知道如何创建Neutranojs应用程序了。我们建议您接下来研究以下内容。

我们已经用普通JavaScript构建了上面的示例应用程序。您也可以使用您最喜欢的前端框架来构建Neutranojs应用程序。

有关前端框架支持的更多详细信息在此处查看