精华内容
下载资源
问答
  • write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies. It was ...
  • nw.js nodejs GUI项目的准系统
  • 在网上找了很多nw.js快速开始的教程,很大一部分都是通过最基本的index.html和package.json来访问“hello world”页面。这里我简单得介绍下在“hello world”基础上...下载完毕后解压,我们就会看到nw.js默认的...

    在网上找了很多nw.js快速开始的教程,很大一部分都是通过最基本的index.html和package.json来访问“hello world”页面。这里我简单得介绍下在“hello world”基础上更进一步的过程。

    (1)下载nw.js

    登陆官网nwjs.io,有normal和SDK两个下载版本。在开发中,我们选择SDK的版本,因为它有开发者调试的功能。

    b9c1b1864e6b

    下载完毕后解压,我们就会看到nw.js默认的目录

    b9c1b1864e6b

    新建app文件夹,我们的代码都会放在这

    (2)简单的hello world

    在app文件夹中新建index.html

    b9c1b1864e6b

    新建package.json,其中“name”和“mian”都是必须的,项目启动时,首先会进入package.json查看配置信息。name表示客户端的名字,必须唯一;mian是初始页面的路径

    b9c1b1864e6b

    拖拽app文件夹到nw.exe运行文件

    b9c1b1864e6b

    b9c1b1864e6b

    打包的过程不再多说,网上有很多教程:压缩成app.nw,然后执行copy /b nw.exe+app.nw nw-demo.exe

    (3)构建node项目

    命令行进入app文件夹,执行 npm install express --save,安装express,生成node的依赖包node-modules,如图

    b9c1b1864e6b

    继续新建app.js(node项目启动文件),public(静态资源)等等,这里只是简单演示。有几个步骤:1. 把index.html移到public文件夹下

    2. 修改package.json中的“mian”为 "public/index.html"

    目录结构如下:

    b9c1b1864e6b

    再次拖拽运行,没有问题

    (4)编写app.js,开启服务器;编写index.html发送请求在package.json中添加  "node-main":"app.js"

    b9c1b1864e6b

    b9c1b1864e6b

    再次拖拽运行,右击开启开发者模式,点击“get”,响应成功

    b9c1b1864e6b

    展开全文
  • nw.js-iframe-浏览器 NW.JS 带有一个工具栏,该工具栏具有一些浏览器功能。 但是,如果您想自定义 UI 并将节点脚本与网站分开怎么办? 我已经将这个项目提炼成一个简单的浏览器,以便尝试解决使用 iframe 制作浏览器...
  • 跟electron一样,nw.js也是一个使用前端技术(html、css、JavaScript)来构建pc端程序的一个框架。不过相比于electron,nw.js热度可能没有这么高涨,社区的维护人员人数上也不及electron(谁让electron是github团队在...

    我是又忙又懒。

    跟electron一样,nw.js也是一个使用前端技术(html、css、JavaScript)来构建pc端程序的一个框架。不过相比于electron,nw.js热度可能没有这么高涨,社区的维护人员人数上也不及electron(谁让electron是github团队在维护呢...)。逼乎上边也有对这两个框架之间的差别有过评价——用Nodejs开发桌面应用。NW.js 和 Electron 各有什么优缺点,你选择哪个?。大家的答案几乎是一边倒的倾向于electron。那么nw.js就没有什么比electron要优越的地方了吗?对于我来说,那就是可以兼容windows xp系统......(痛苦状脸)

    初始化项目

    首先,确保你已经安装好了node.js的环境。

    npm init

    接下来就是常规的一些常规的填写:

    package name: (nw-demo)

    version: (1.0.0) 0.1.0

    description: a nw.js demo

    entry point: (index.js) index.html

    test command:

    git repository:

    keywords: nw.js demo

    author: classLfz

    license: (ISC)

    About to write to C:\classlfz\github\nw-demo\package.json:

    {

    "name": "nw-demo",

    "version": "0.1.0",

    "description": "a nw.js demo",

    "main": "index.html",

    "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

    },

    "keywords": [

    "nw.js",

    "demo"

    ],

    "author": "classLfz",

    "license": "ISC"

    }

    Is this ok? (yes) yes

    这里注意到main的值不是main.js之类的js执行文件,而是index.html这类的html文件。其实,nw.js是支持main.js之类的js执行文件作为入口的,而且还提供了桌面应用启动前需要执行的一些操作的条件。但是,因为我们这里仅仅只是一个demo,所以就不折腾了。详细的内容可以查看nw.js的官方文档的Getting Started章节。

    这时候,我们就得到了一个package.json文件。

    完善package.json

    为了让nw.js能够完整的了解我们需要的桌面应用的一些常规的设置,我们需要对package.json补充一些内容:

    {

    "name": "nw-demo",

    "version": "0.1.0",

    "description": "nw.js demo",

    "main": "index.html",

    "window": {

    "title": "nw-demo", // 应用标题

    "width": 840, // 应用初始化宽度

    "height": 600, // 应用初始化高度

    "toolbar": true, // 是否开启调试工具

    "resizable": false, // 应用是否可以调整高度以及宽度

    "icon": "images/icon.png" // 应用图标路径(相对路径)

    },

    "build": {

    "nwVersion": "0.14.7"

    },

    "directories": {

    "test": "test"

    },

    "devDependencies": {

    "nwjs-builder-phoenix": "^1.14.3"

    },

    "scripts": {

    "start": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",

    "dist": "build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."

    },

    "repository": {

    },

    "keywords": [

    "nw.js",

    "demo"

    ],

    "author": "classLfz",

    "license": "ISC",

    "dependencies": {

    }

    }

    从上边可以看到,我们添加了一个window的字段,这里是告诉nw.js初始化这个桌面应用的一些参数。

    编写index.html

    然后,很简单的我们编写一个index.html作为应用主页。如果你的应用添加了前端路由的话,只要在main字段添加初始化的url路径即可,像这样:index.html/login。

    运行与打包应用

    细心的你或许已经发现了,上边的package.json还添加了几个script脚本,这个依赖于nwjs-builder-phoenix这个node.js模块,我们可以轻松的实现在命令行里运行/打包nw.js的桌面应用。

    # 安装nwjs-builder-phoenix

    npm install --save-dev nwjs-builder-phoenix

    # 运行

    npm run start

    # 打包

    npm run dist

    不过还有一个nw.js的镜像的问题需要注意的,因为墙的原因,我们需要修改一下nw.js的镜像的。就像package.json里边一样,将mirror的值改为https://npm.taobao.org/mirrors/nwjs/就可以了。

    展开全文
  • PG.js 是 Node.js 项目 NW.js 的 package.json 生成器。 因自己喜欢上了 Node.js 后,尝试用 NW.js 制作桌面程序时,面对 NW.js 的众多参数....那个记不住啊。
  • nw.js 中 Blink1Control 的演示 这只是一个blink1control 应用程序的简单演示,它不能完全按预期工作。 截屏: 它现在可以: 管理眨眼事件(您可以选择颜色和事件名称) 从 ifttt 获取数据(它会自动运行与 iftt...
  • 我用了很多方法去调用自己的写好的代码,都没有成功,求使用 nw.js 的正确姿势。我的是 windows10 系统,用的是 nw.js 0.14.7 版本,就是那个可以支持 xp 的版本,我在 nwjs-sdk 里面创建了一个文件夹 demo,里面...

    我用了很多方法去调用自己的写好的代码,都没有成功,求使用 nw.js 的正确姿势。

    我的是 windows10 系统,用的是 nw.js 0.14.7 版本,就是那个可以支持 xp 的版本,我在 nwjs-sdk 里面创建了一个文件夹 demo,里面只有 package.json 和 index.html,代码如下:

    package.json{

    "main": "index.html",

    "name": "demo",

    "description": "demo app of node-webkit",

    "version": "0.1.0",

    "keywords": ["api", "node-webkit"],

    "window": {

    "title": "demo",

    "icon": "link.png",

    "toolbar": true,

    "frame": true,

    "width": 800,

    "height": 500,

    "position": "center",

    "resizable":true,

    "fullscreen":false,

    "min_width": 400,

    "min_height": 200,

    "max_width": 800,

    "max_height": 600

    },

    "webkit": {

    "plugin": true

    }

    }

    index.html

    hello world!!!

    var nw = require('nw.gui');

    var win = nw.Window.get();

    win.showDevTools()

    目录结构

    bVbLoC1

    我尝试了 n 种方法调用 demo 文件夹里面的东西,几乎都没有成功,没有打开任何东西出来

    1、将 demo 文件夹拖拽到 nw.exe(失败)

    2、将 demo 文件夹的 package.json 和 index.html 放到 nwjs-sdk 根目录(失败)

    3、在 nw-sdk 根目录执行命令 nw demo (失败)

    4、将 demo 文件夹打包成 .zip 压缩文件,再按照官方那样更改压缩文件夹名为 package.zip,将压缩文件放到 nwjs-sdk 根目录上,运行以下命令(copy /b nw.exe+package.nw app.exe),得到 app.exe,运行 app.exe (失败)

    5、猜测可能是本地系统 win10 的问题,在虚拟机 win7 重新执行上述步骤(失败)

    可以成功执行只有下面两种场景,这个可能与我装了全局 nw 有关(cnpm i -g nw)

    1、在 demo 目录执行命令 nw,但是 devtools 不正常,没法访问

    2、在 nwjs-sdk 根目录执行命令 nw ./demo,devtools 正常

    难道 nw.js 0.14.7 这个版本不是这样操作?还是我打代码的姿势不对吗?┭┮﹏┭┮

    我只是想运行和打包而已......我好难......

    求问各位大佬怎么解决?

    还有一个问题,nw.js 包下载好慢......有没有其他地方可以下载?

    展开全文
  • nw.js 调用驱动程序NW.js (formerly known as Node Webkit) is a framework for creating cross-platform desktop applications using HTML, CSS, and JavaScript. In this tutorial, we're going to a desktop ...

    nw.js 调用驱动程序

    NW.js (formerly known as Node Webkit) is a framework for creating cross-platform desktop applications using HTML, CSS, and JavaScript. In this tutorial, we're going to a desktop application using NW.js, and through the tutorial give you a good understanding of how NW.js works under the hood.

    NW.js (以前称为Node Webkit)是用于使用HTML,CSS和JavaScript创建跨平台桌面应用程序的框架。 在本教程中,我们将使用NW.js进入桌面应用程序,并且通过本教程,您可以很好地了解NW.js的工作原理。

    This tutorial is aimed at anyone who knows HTML, CSS, and JavaScript. Experience with Node.js is not required.. We're going to split this tutorial into 2 parts! Here's part 1.

    本教程面向任何了解HTML,CSS和JavaScript的人。 不需要具有Node.js经验。 。 我们将本教程分为两部分! 这是第1部分。

    我们将要建立的 (What we're going to build)

    Step 15 Window Toolbar

    We're going to make a photo browsing app called Lens. It will allow you to browse photos that exist inside a folder on your computer, take a closer look at one photo at a time, apply colour filters, and save the altered photo to your computer.

    我们将制作一个名为Lens的照片浏览应用程序。 它将允许您浏览计算机文件夹中存在的照片,一次仔细查看一张照片,应用滤色器,然后将更改后的照片保存到计算机中。

    先决条件 (Prerequisites)

    If you want to follow the tutorial and build the desktop app, you'll need the following:

    如果要遵循本教程并构建桌面应用程序,则需要满足以下条件:

    • Any computer running either Mac OS X, Windows, or Linux

      任何运行Mac OS X,Windows或Linux的计算机
    • Node.js (see installing Node.js)

      Node.js(请参阅安装Node.js)

    安装Node.js (Installing Node.js)

    在Mac OS X或Linux上 (On Mac OS X or Linux)

    I would recommend installing Node.js via a tool called NVM (Node.js version manager). It allows you to install different versions of Node.js, and switch between them easily. You can find the installation instructions at https://github.com/creationix/nvm.

    我建议通过称为NVM (Node.js版本管理器)的工具安装Node.js。 它允许您安装不同版本的Node.js ,并在它们之间轻松切换。 您可以在https://github.com/creationix/nvm上找到安装说明。

    在Windows上 (On Windows)

    The setup.exe file from the Node.js website is fine. There is a version of NVM for Windows, but I haven't been successful in getting that to work off the bat.

    来自Node.js网站的setup.exe文件很好。 有适用于Windows的NVM版本,但我无法成功地将其付诸实践。

    入门 (Getting started)

    Assuming that you have Node.js installed, we can start by installing the NW.js module. Type the following command into your command line terminal:

    假设您已安装Node.js,我们可以从安装NW.js模块开始。 在命令行终端中键入以下命令:

    npm install -g nw

    For those new to Node.js, npm is Node's package manager, and allows you to install modules to use in your projects. The -g flag tells NPM to install nw.js as a global module, meaning that it will be available to all of the Node.js projects on your computer, and allow you to use the "nw" command on the terminal to execute loading a project as a desktop app.

    对于Node.js的新用户来说,npm是Node的软件包管理器,它允许您安装要在项目中使用的模块。 -g标志告诉NPM将nw.js作为全局模块安装,这意味着它将对您计算机上的所有Node.js项目可用,并允许您在终端上使用“ nw”命令执行加载作为桌面应用程序的项目。

    You'll see logging information output to the terminal showing the process of installing the module. If it was successful, you should see something like this

    您将看到输出到终端的日志信息,显示安装模块的过程。 如果成功,您应该会看到类似这样的信息

    Pre Install NW.js

    If however there is an error, please let me know in the comments, or alternatively search for the error message on Google to see related Stack Overflow posts or Github issues that might offer a way to resolve the issue.

    但是,如果有错误,请在评论中让我知道,或者在Google上搜索错误消息,以查看相关的Stack Overflow帖子或Github问题,这些问题可能会提供解决问题的方法。

    Once we have NW.js installed on our computer, the next thing we want to do is to create the initial skeleton for our application. Using the terminal command prompt, let's create a folder for our application's files called "lens", and change the current working directory to that folder:

    一旦我们在计算机上安装了NW.js,接下来要做的就是为我们的应用程序创建初始框架。 使用终端命令提示符,让我们为应用程序的文件创建一个名为“ lens”的文件夹,并将当前工作目录更改为该文件夹:

    mkdir lens
    cd lens

    Inside of the folder, we need just 2 files to create a bare skeleton NW.js app; an index.html file, and a package.json file. The package.json file is a manifest file that contains configuration information about the app, such as its name, version, and what file it loads when starting the application. It looks something like this:

    在该文件夹内,我们只需要2个文件即可创建一个裸露的骨架NW.js应用程序; 一个index.html文件和一个package.json文件。 package.json文件是一个清单文件,其中包含有关应用程序的配置信息,例如其名称,版本以及启动应用程序时加载的文件。 看起来像这样:

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

    Save this file inside of the lens folder, under the filename package.json. Next, we will create the index.html file that will be displayed then the app runs. Create a file called index.html in the lens folder, and type in the following HTML:

    将此文件保存在lens文件夹内,文件名package.json 。 接下来,我们将创建index.html文件,该文件将在应用程序运行时显示。 在lens文件夹中创建一个名为index.html的文件,然后键入以下HTML:

    <html>
        <head>
            <title>Lens</title>
        </head>
        <body>
            <h1>Lens, the photo app</h1>
        </body>
    </html>

    Once you have saved this file to the computer, we can now run this code as a desktop application.

    将文件保存到计算机后,我们现在可以将此代码作为桌面应用程序运行。

    Going back to the command line terminal, make sure that you are in the lens folder, and run the following command:

    返回命令行终端,确保您位于lens文件夹中,然后运行以下命令:

    nw

    When you do this, you should expect to see an application boot, and the screen should look something like this:

    执行此操作时,您应该期望看到应用程序启动,并且屏幕应该看起来像这样:

    Step 1 Screenshot

    Some of you may be looking at this and thinking "this looks like a web page in a browser, embedded in a desktop app", and to some extent that is correct - NW.js is a combination of Google Chrome's Blink web browser rendering engine and IO.js*, along with some Operating System bindings. The combination of these technologies is very powerful, which we will explore later on in the tutorial.

    你们中的某些人可能正在考虑这个问题,并认为“ 这看起来像是浏览器中的网页,已嵌入桌面应用程序中 ”,并且在某种程度上是正确的-NW.js是Google Chrome浏览器的Blink网络浏览器呈现引擎的组合和IO.js *,以及一些操作系统绑定。 这些技术的组合非常强大,我们将在本教程的后面部分中进行探讨。

    充实用户旅程 (Fleshing out the user journey)

    Now is a good time to look at the user journey of the desktop application:

    现在是查看桌面应用程序的用户历程的好时机:

    NW.js wireframes

    We start by asking the user to select a folder containing their photos. This is because even though we could detect their OS and infer what the path to their photos folder is, we can't guarantee that it is where they keep their photos. When the user clicks on the button and selects a folder, the app will display the photos inside of that folder in a grid fashion.

    我们首先要求用户选择一个包含他们照片的文件夹。 这是因为即使我们可以检测到他们的操作系统并推断出他们的照片文件夹的路径是什么,我们也不能保证它是存放照片的位置。 当用户单击按钮并选择一个文件夹时,该应用程序将以网格方式显示该文件夹内的照片。

    Let's start by fleshing out the initial app screen's user interface first. We will want to add some HTML for the button and label, some CSS to adjust the layout and style of the screen, and some JavaScript to handle events like clicking on a button and loading a folder's photos.

    首先让我们充实初始应用程序屏幕的用户界面。 我们将要为按钮和标签添加一些HTML,为调整屏幕的布局和样式添加一些CSS,并为处理诸如单击按钮和加载文件夹的照片之类的事件添加一些JavaScript。

    We'll start by adding some HTML for the "select Folder" button in the middle of the 1st app screen. Inside of the body tag, remove the h1 tag, and replace it with the following HTML:

    我们将在第一个应用程序屏幕的中间,为“选择文件夹”按钮添加一些HTML。 在body标签内部,删除h1标签,然后将其替换为以下HTML:

    <div id="select_folder">
        <span>Select a folder containing photos</span>
    </div>

    With this in place, we now need to modify the layout and styling the HTML with CSS. To do this, add the following link tag inside of the head section of the index.html file, after the title tag:

    完成此操作后,我们现在需要修改布局并使用CSS设置HTML样式。 为此,请在title标签之后的index.html文件的头部内添加以下链接标签:

    <link rel="stylesheet" href="app.css" />

    We can now add some CSS to the app.css, and review the results. In the app.css file, add the following code:

    现在,我们可以将一些CSS添加到app.css ,并查看结果。 在app.css文件中,添加以下代码:

    body {
        background-color: #222;
        font-family: Arial, "Helvetica Neue"
    }
    
    /* 1st screen */
    
    #select_folder {
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
        text-align: center;
        margin: 0 auto;
        position: relative;
        width: 16em;
        top: 40%;
        padding: 1em;
        background: #FF582E;
        border-radius: 2em;
        border: solid 1px #FF582E;
        color: white;
    }
    
    #select_folder:hover {
        box-shadow: 0px 0px 20px #FF582E;
        cursor: pointer;
    }

    The app is now beginning to look a bit nicer:

    该应用程序现在开始看起来更好一些:

    Lens Screen 1 with Styling

    The next step is to make clicking the button bring up a dialog box to select a folder. For this, we're going to add a bit of HTML, and some JavaScript to achieve the right behaviour. Below the body tag, add the following snippet of HTML:

    下一步是单击按钮,弹出对话框选择文件夹。 为此,我们将添加一些HTML和一些JavaScript以实现正确的行为。 在body标签下面,添加以下HTML代码段:

    <input type="file" nwdirectory id="folderSelector"/>

    The input tag is one that you use for selecting files, with the exception that the 'nwdirectory' attribute tells the input file dialog to accept folders instead of files. We insert this into the HTML so that we can programmatically trigger it when the button is clicked, and bring up the folder select dialog. Next, we'll want to add some CSS to hide the input field out of sight:

    输入标签是用于选择文件的标签,但'nwdirectory'属性告诉输入文件对话框接受文件夹而不是文件。 我们将其插入HTML,以便我们可以在单击按钮时以编程方式触发它,并弹出文件夹选择对话框。 接下来,我们要添加一些CSS以隐藏输入字段:

    #folderSelector {
        display: none;
    }

    Now, we'll want to add some JavaScript to the app. We'll want to add a script tag to the HTML. Under the link tag in the head section of the index.html file, add the following HTML:

    现在,我们要向该应用程序添加一些JavaScript。 我们将要向HTML添加脚本标签。 在index.html文件的头部的链接标签下,添加以下HTML:

    <script src="app.js"></script>

    Next, let's create an empty app.js file inside of the lens folder. In here, we will add some JavaScript that does the following:

    接下来,让我们在lens文件夹中创建一个空的app.js文件。 在这里,我们将添加一些执行以下操作JavaScript:

    1. Intercepts any clicks on the div element with the id of "select_folder".

      拦截ID为“ select_folder”的div元素上的所有单击。
    2. When a click occurs, it will programmatically trigger the click event on the input tag, which will load the open folder dialog.

      发生单击时,它将以编程方式触发输入标签上的click事件,这将加载打开的文件夹对话框。
    3. If the user cancels selecting a folder, we take no further action.

      如果用户取消选择文件夹,我们将不采取进一步行动。
    4. If the user selects a folder, we pass the folder path onto a function that will later on load all of the photos in that folder, and display them in the grid view.

      如果用户选择一个文件夹,我们会将文件夹路径传递到一个函数上,该函数稍后将在该文件夹中加载所有照片,并在网格视图中显示它们。

    Let's start by writing some code to ask the user for the folder containing their photos. In the lens folder, create an empty file called app.js, and insert the following script tag in the index.html file, in the head section of the html:

    让我们从编写一些代码开始,向用户询问包含其照片的文件夹。 在lens文件夹中,创建一个名为app.js的空文件,并将以下脚本标记插入html头部的index.html文件中:

    <script src="app.js"></script>

    This will load the app.js file when the application loads. Next, we want to add some code in the app.js file that handles asking the user for the folder containing their photos. In the app.js file, add the following code:

    当应用程序加载时,这将加载app.js文件。 接下来,我们要在app.js文件中添加一些代码,以处理向用户询问包含其照片的文件夹的问题。 在app.js文件中,添加以下代码:

    'use strict';
    
    function bindSelectFolderClick () {
        var button = document.querySelector('#select_folder');
        button.addEventListener('click', function () {
            alert('clicked on the button');
        });
    }
    
    // Runs when the browser has loaded the page
    window.onload = function () {
        bindSelectFolderClick();
    };

    This initial JavaScript takes care of listening for clicks on the "select folder" button, and for now emits an alert with a message when the button is clicked. Save the file, give it a quick try to check that it works, and now we can bind on opening the folder dialog.

    此初始JavaScript负责侦听“选择文件夹”按钮上的单击,现在单击该按钮时会发出带有消息的警报。 保存文件,尝试快速检查它是否可以正常工作,现在我们可以在打开文件夹对话框时进行绑定了。

    Add this JavaScript above the bindSelectFolderClick function:

    将此JavaScript添加到bindSelectFolderClick函数上方:

    function openFolderDialog () {
        var inputField = document.querySelector('#folderSelector');
        inputField.addEventListener('change', function () {
            var folderPath = this.value;
            alert('Folder path is ' + folderPath);
        }, false);
        inputField.click();
    }

    And in the bindSelectFolderClick function, replace this line:

    然后在bindSelectFolderClick函数中,替换以下行:

    alert('clicked on the button');

    With this:

    有了这个:

    openFolderDialog();

    Save the file, reload the app, and you'll see that when you click on the button, the select folder dialog will appear. Once you've selected a folder, it will display the folder path in an alert dialog. Getting to this stage means that we are in a position to start finding out what photos exist in that folder, and start to display the photos.

    保存文件,重新加载应用程序,然后单击按钮,将显示“选择文件夹”对话框。 选择文件夹后,它将在警报对话框中显示文件夹路径。 进入此阶段意味着我们可以开始查找该文件夹中存在的照片,并开始显示照片。

    查找照片 (Finding the photos)

    Now that we have a folder path, we can begin the process of finding all of the photos inside of that folder, and displaying them in the application. Taking a quick look bak at the user journey, we see that the select folder disappears when we select a folder, and a grid view of the photos in the folder appears in the app. We'll need to do the following:

    现在我们有了文件夹路径,我们可以开始查找该文件夹内的所有照片并将其显示在应用程序中的过程。 快速浏览一下用户旅程,我们发现选择文件夹时选择文件夹消失了,并且文件夹中照片的网格视图出现在应用程序中。 我们需要执行以下操作:

    1. Hide the select folder button

      隐藏选择文件夹按钮
    2. Get a list of all the files that are in the folder.

      获取该文件夹中所有文件的列表。
    3. Filter out non-images files and directories from the list

      从列表中过滤掉非图像文件和目录
    4. Show the photo grid view, with each grid item displaying a photo

      显示照片网格视图,每个网格项目都显示一张照片

    Before we focus on hiding the select folder button, we'll adjust the existing functions first. Now that we have a folder path, we're going to want to pass that variable onto another function that will handle finding all of the files that exist in that folder. Ideally we want to pass this value to a function that isn't necessarily defined inside of that function, but can be passed to the function when it is called. Let's modify the openFolderDialog function's code to look like this:

    在专注于隐藏选择文件夹按钮之前,我们将首先调整现有功能。 现在我们有了文件夹路径,我们将要将该变量传递到另一个函数,该函数将处理查找该文件夹中存在的所有文件。 理想情况下,我们希望将此值传递给不一定在该函数内部定义的函数,但可以在调用该函数时传递给该函数。 让我们将openFolderDialog函数的代码修改为如下所示:

    function openFolderDialog (cb) {
        var inputField = document.querySelector('#folderSelector');
        inputField.addEventListener('change', function () {
            var folderPath = this.value;
            cb(folderPath);
        });
        inputField.click();
    }

    The function now receives a variable called cb, which is a common abbreviation for callback. The "cb" variable is a function that will receive the folderPath variable. This is a good way to be able to have functions pass data onto other functions without having to hard-code function references inside a function, helping to keep function coupling low.

    该函数现在接收一个名为cb的变量,这是callback的常见缩写。 “ cb”变量是将接收folderPath变量的函数。 这是使函数能够将数据传递到其他函数的一种好方法,而不必在函数内部对函数引用进行硬编码,从而有助于将函数耦合保持在较低水平。

    We now need to find places in our code where the openFolderDialog function is called, and change them to receive a callback function. Inside of the bindSelectFolderClick function there is the only call to that function, so we'll need to adjust that code to look like this:

    现在,我们需要在代码中找到调用openFolderDialog函数的位置,并对其进行更改以接收回调函数。 在bindSelectFolderClick函数内部,只有对该函数的调用,因此我们需要调整该代码以使其看起来像这样:

    function bindSelectFolderClick (cb) {
        var button = document.querySelector('#select_folder');
        button.addEventListener('click', function () {
            openFolderDialog(cb);
        });
    }

    The bindSelectFolderClick function knows explicitly about the openFolderDialog function, and will pass on the callback function to it that it receives when it is called. This means that we also need to look at the code inside of the window.onload function, and get that to provide a callback function to the bindSelectFolderClick function. We adjust the window.onload function to look like this:

    bindSelectFolderClick函数明确了解openFolderDialog函数,并将回调函数传递给调用它时收到的回调函数。 这意味着我们还需要查看window.onload函数内部的代码,并获取该代码以为bindSelectFolderClick函数提供回调函数。 我们将window.onload函数调整为如下所示:

    // Runs when the browser has loaded the page
    window.onload = function () {
        bindSelectFolderClick(function (folderPath) {
            console.log(folderPath);
        });
    };

    For now we simply log the folder path in the console, but we will later pass a new function that will find all of the files and identify just the ones that are images. Now, we can add a function that will hide the "select folder" button once we've selected a folder. Add the following function before the window.onload function:

    现在,我们仅在控制台中记录文件夹路径,但是稍后我们将传递一个新功能,该功能将查找所有文件并仅识别图像文件。 现在,我们可以添加一个函数,一旦选择了文件夹,该函数将隐藏“选择文件夹”按钮。 在window.onload函数之前添加以下函数:

    function hideSelectFolderButton () {
        var button = document.querySelector('#select_folder');
        button.style.display = 'none';
    }

    This function will find the div element for the "select folder" button, and hide it via modifying the element's display property. Let's modify the window.onload function so that it calls this function when a folder is selected:

    此函数将为“选择文件夹”按钮找到div元素,并通过修改元素的display属性将其隐藏。 让我们修改window.onload函数,以便在选择文件夹时调用此函数:

    // Runs when the browser has loaded the page
    window.onload = function () {
        bindSelectFolderClick(function (folderPath) {
            hideSelectFolderButton();
            console.log(folderPath);
        });
    };

    If we save the file, and test it out, we can see that the "select folder" button is hidden when a folder is selected, and that we will see the folder path logged in the developer tools of the app. Here, we can now focus on getting the files for that folder path, and start to see the power of NW.js - its ability to load Node.js modules directly in the same place as our JavaScript.

    如果我们保存文件并对其进行测试,则可以看到选择文件夹后“选择文件夹”按钮处于隐藏状态,并且该文件夹的路径将记录在应用程序的开发人员工具中。 在这里,我们现在可以集中精力获取该文件夹路径的文件,并开始看到NW.js的强大功能-NW.js能够将Node.js模块直接加载到与JavaScript相同的位置。

    获取文件列表 (Getting a list of files)

    We want to create a function that will receive a folder path, and return a list of files. We can do this using Node.js using the File System module that is part of the Node.js' core API. We need to load the module first, and then call a public function on it called "readdir". At the top of the app.js file, add the following code after the "use strict" linting declaration:

    我们想要创建一个函数,该函数将接收文件夹路径并返回文件列表。 我们可以使用Node.js核心API一部分中的文件系统模块,通过Node.js做到这一点。 我们需要先加载模块,然后在其上调用一个名为“ readdir”的公共函数。 在app.js文件的顶部,在“使用严格”的插入声明之后添加以下代码:

    // Dependencies
    var fs = require('fs');

    This snippet of code tells the app to load Node.js' File System module. We can then use this module in a function that will find all of the image files in a given folder. In the same file but just before the window.onload function, add the following code:

    此代码段告诉应用程序加载Node.js的文件系统模块。 然后,我们可以在可以在给定文件夹中找到所有图像文件的函数中使用此模块。 在同一文件中,但在window.onload函数之前,添加以下代码:

    function findAllImageFiles (folderPath, cb) {
        fs.readdir(folderPath, function (err, files) {
            if (err) { return cb(err, null); }
            cb(null, files);
        });
    }

    The findAllImageFiles function receives a folder path, and currently finds all of the files in that folder and passes them onto the callback function, along with an error in case an error occurs finding files in that folder. If we then modify the window.onload function to pass the folder path onto the findAllImageFiles function, we can begin to see what kind of data we are dealing with. Alter the window.onload function to look like this:

    findAllImageFiles函数接收一个文件夹路径,当前会找到该文件夹​​中的所有文件,并将它们连同错误一起传送到回调函数中,以防在该文件夹中找到文件时发生错误。 如果然后修改window.onload函数以将文件夹路径传递到findAllImageFiles函数,我们可以开始查看正在处理的数据类型。 更改window.onload函数,使其看起来像这样:

    // Runs when the browser has loaded the page
    window.onload = function () {
        bindSelectFolderClick(function (folderPath) {
            hideSelectFolderButton();
            findAllImageFiles(folderPath, function (err, files) {
                console.log(err);
                console.log(files);
            });
        });
    };

    With the changes saved, we can take a look at what the files list looks like. Run the app using nw on the command line, select a folder containing pictures, and if you open the console in the app's developer tools, you should expect to see something like this:

    保存更改后,我们可以查看文件列表的外观。 在命令行上使用nw运行该应用程序,选择一个包含图片的文件夹,如果您在应用程序的开发人员工具中打开控制台,则应该会看到以下内容:

    Step 6 List of Files

    You can see here that the files in the pictures folder contains only the names of the files, and not the full path to them, nor what kind of file/folder they are. We therefore need a way to do 3 things:

    您可以在此处看到图片文件夹中的文件仅包含文件名,而不包含文件的完整路径,也不包含它们是哪种文件/文件夹。 因此,我们需要一种方法来做三件事:

    1. Identify their full path

      确定他们的完整路径
    2. Determine if they are an image file or not

      确定它们是否是图像文件
    3. If the file is an image, add it to a list of files that we'll want to display

      如果文件是图像,请将其添加到我们要显示的文件列表中

    We'll need to make the findAllImageFiles function a bit smarter. Thankfully there are some tools that we can bring in to assist us with this. For the 1st requirement, we're going to use another one of Node.js' core API modules to handle generating the full file path, as well as identifying image files.

    我们需要使findAllImageFiles函数更加智能。 值得庆幸的是,我们可以引入一些工具来协助我们。 对于第一个要求,我们将使用Node.js的另一个核心API模块来处理生成完整的文件路径以及识别图像文件。

    First off, because we're going to rename the findAllImageFiles function to just findAllFiles, as we're going to split out the filtering of the image files into a separate function, so that we can maintain code readability. Simply do a quick find and replace, and then we can move onto implementing the image filtering function. Once that's done, we want to install a node module via NPM called mime. It is a 3rd-party library that will help us to determine the mime type of the files. Run this command on your terminal:

    首先,因为我们要重命名findAllImageFiles功能仅限于findAllFiles ,因为我们要的图像文件的过滤拆分为三个独立的功能,让我们可以保持代码的可读性。 只需快速查找并替换,然后我们便可以继续实现图像过滤功能。 完成后,我们想通过NPM安装一个名为mime的节点模块。 这是一个第三方库,可帮助我们确定文件的mime类型。 在终端上运行以下命令:

    npm install mime --save

    This will install the mime module, and save it as a dependency in the package.json manifest file. Once that is done, we want to require it along with Node.js' path module in the dependencies section of the app.js file. Alter the top section so that it looks like this:

    这将安装mime模块,并将其作为依赖项保存在package.json清单文件中。 完成后,我们希望在app.js文件的dependencies部分中将其与Node.js的路径模块一起使用。 更改顶部,使其如下所示:

    // Dependencies
    var fs      = require('fs');
    var mime    = require('mime');    
    var path    = require('path');

    With those modules now available in our code, we can turn to implementing the findImageFiles function. This function will take a list of files, construct the full file path to them, use the mime library to find out their mime type, and if they're an image, we can add them to a new list, which will then be passed to a callback function. Add a few blank lines after the findAllFiles function, and insert the following Array:

    有了代码中现在可用的那些模块,我们可以转向实现findImageFiles函数。 此函数将获取文件列表,构建文件的完整文件路径,使用mime库查找其mime类型,如果它们是图像,我们可以将其添加到新列表中,然后将其传递回调函数。 在findAllFiles函数之后添加一些空行,并插入以下Array:

    var imageMimeTypes = [
        'image/bmp',
        'image/gif',
        'image/jpeg',
        'image/png',
        'image/pjpeg',
        'image/tiff',
        'image/webp',
        'image/x-tiff',
        'image/x-windows-bmp'
    ];

    This variable contains a list of image mime types that we can display in the app, and will be used to filter files by their mime type. After this, let's insert the following function:

    此变量包含我们可以在应用程序中显示的图像mime类型的列表,并将用于按文件的mime类型过滤文件。 之后,让我们插入以下函数:

    function findImageFiles (files, folderPath, cb) {
        var imageFiles = [];
        files.forEach(function (file) {
            var fullFilePath = path.resolve(folderPath,file);
            var extension = mime.lookup(fullFilePath);
            if (imageMimeTypes.indexOf(extension) !== -1) {
                imageFiles.push({name: file, path: fullFilePath});
            }
            if (files.indexOf(file) === files.length-1) {
                cb(imageFiles);
            }
        });
    }

    The findImageFiles function handles looking through all of the files, constructing their full path, checking if they are an image, and then collecting the ones that are. We then alter the window.onload function to use it like so:

    findImageFiles函数用于浏览所有文件,构造它们的完整路径,检查它们是否为图像,然后收集它们。 然后,我们更改window.onload函数以如下方式使用它:

    // Runs when the browser has loaded the page
    window.onload = function () {
        bindSelectFolderClick(function (folderPath) {
            hideSelectFolderButton();
            findAllFiles(folderPath, function (err, files) {
                if (!err) {
                    findImageFiles(files, folderPath, function (imageFiles) {
                        console.log(imageFiles);
                    });
                }
            });
        });
    };

    With these changes saved, we can reload the app from the command line, and see that in the console of the developer tools, we are now returning only the image files, as opposed to all of the files in the folder:

    保存这些更改后,我们可以从命令行重新加载应用程序,并看到在开发人员工具的控制台中,我们现在仅返回图像文件,而不是文件夹中的所有文件:

    Step 7 Full Size Render

    We're now in a position to have these files passed to a function that will display them in a grid.

    现在,我们可以将这些文件传递给将在网格中显示的函数。

    显示照片 (Displaying the photos)

    Displaying the photos in a grid involves adding some HTML to the page for the photo template and display area, a bit of JavaScript to insert the photos into the app screen, and some CSS to apply the layout and styling of the photo items. We'll start with the HTML.

    在网格中显示照片需要在页面上添加一些HTML,以用于照片模板和显示区域,一些JavaScript将照片插入应用程序屏幕,以及一些CSS以应用照片项目的布局和样式。 我们将从HTML开始。

    Luckily for us, we're able to use a lot of modern HTML5 and CSS3 APIs to build the app, and so we can make use of the HTML5 template tag to contain the snippet of html that we want to use for each photo. In the index.html, add the following bit of HTML just after the opening body tag:

    对我们来说幸运的是,我们能够使用许多现代HTML5和CSS3 API来构建应用程序,因此我们可以利用HTML5模板标记来包含要用于每张照片的html代码段。 在index.html中,在body标签之后添加以下HTML代码:

    <template id="photo-template">
        <div class="photo">
            <img />
        </div>
    </template>

    The div element with a class of photo contains an image tag, and we'll set the src attribute of that image tag to the photo's file path. The div element surrounding the image tag is there to support rendering the photos in a grid view with set dimensions, and have the photos be displayed in a fashion that respects the aspect ratio of the image.

    带有一类照片的div元素包含一个图像标签,我们将将该图像标签的src属性设置为照片的文件路径。 图像标签周围的div元素在那里支持以设定的尺寸在网格视图中渲染照片,并以尊重图像纵横比的方式显示照片。

    We'll also need to have a place to store the list of photos in the app screen. Before the closing body tag, add the following bit of HTML:

    我们还需要有一个位置来在应用程序屏幕中存储照片列表。 在结束body标签之前,添加以下HTML:

    <div id="photos"></div>

    With the HTML in place, we can now add some JavaScript to append the photos to the page with the template. In the app.js file, we're going to add a function that handles adding an image to the photos area. Before the "window.onload" function, add the following function:

    有了HTML之后,我们现在可以添加一些JavaScript以将照片附加到带有模板的页面上。 在app.js文件中,我们将添加一个用于将图像添加到照片区域的函数。 在“ window.onload”功能之前,添加以下功能:

    function addImageToPhotosArea (file) {
        var photosArea = document.getElementById('photos');
            var template = document.querySelector('#photo-template');
            template.content.querySelector('img').src = file.path;
            template.content.querySelector('img').setAttribute('data-name',file.name);
        var clone = window.document.importNode(template.content, true);
          photosArea.appendChild(clone);
    }

    The addImageToPhotosArea function uses JavaScript to select the photos area and the photo template, sets the src attribute of the image tag in the template to photo's file path and the name of the file as a data attribute, and appends the template item to the photos area.

    addImageToPhotosArea函数使用JavaScript选择照片区域和照片模板,将模板中图像标签的src属性设置为照片的文件路径,并将文件名设置为数据属性,并将模板项附加到照片区域。

    Next, we alter the window.onload function and replace the console.log function with a call to loop through the imageFiles array, and pass each file to the addImageToPhotosArea function, like so:

    接下来,我们更改window.onload函数,并用一个调用来替换console.log函数以遍历imageFiles数组,然后将每个文件传递给addImageToPhotosArea函数,如下所示:

    // Runs when the browser has loaded the page
    window.onload = function () {
        bindSelectFolderClick(function (folderPath) {
            hideSelectFolderButton();
            findAllFiles(folderPath, function (err, files) {
                if (!err) {
                    findImageFiles(files, folderPath, function (imageFiles) {
                            imageFiles.forEach(addImageToPhotosArea);
                    });
                }
            });
        });
    };

    Finally, we can apply some layout and styling to the photos area and the photo item. In the app.css file, add the following CSS to the end of the file:

    最后,我们可以对照片区域和照片项目应用一些布局和样式。 在app.css文件中,将以下CSS添加到文件末尾:

    #photos {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    
        .photo {
            text-align: center;
            float: left;
            margin: 2%;
            padding: 1% 0.5%;
            background-color: white;
            width: 20%;
            height: 18%;
            margin-bottom: 1%;
        }
    
        .photo img {
            max-width: 100%;
            max-height: 100%;
        }

    Also, we want to nullify any of the default margin and padding applied to the body tag by the Chromium browser, so we'll add these 2 rules to the body element:

    另外,我们想使Chromium浏览器应用于body标签的任何默认边距和填充无效,因此我们将这2条规则添加到body元素:

    margin: 0;
        padding: 0;

    With this layout and styling in place, if we save the changes, reload the app and select a folder to display photos for, we should see something that resembles this (albeit with different photos):

    有了这种布局和样式后,如果我们保存更改,重新加载应用程序并选择一个文件夹来显示照片,我们应该会看到类似的东西(尽管有不同的照片):

    Step 8 Photo Grid

    Now the app is beginning to look a bit more than just a barebones skeleton, and we've been able to use Node.js and leverage the NPM ecosystem to install modules that assist with building the application.

    现在,该应用程序的外观已不仅仅只是一个准系统骨架,而且我们已经能够使用Node.js并利用NPM生态系统安装有助于构建应用程序的模块。

    From here, we can start to look at being able to click on a photo, and enter full view mode on it.

    从这里开始,我们可以开始查看能够单击照片并在其上进入全视图模式。

    结论 (Conclusion)

    This concludes part 1. Hopefully by now you'll have a strong understanding of getting started with NW.js. In the next tutorial, we'll improve this app and cover the best things to come:

    到此为止第1部分结束。希望到现在为止,您将对NW.js入门有了深刻的了解。 在下一个教程中,我们将改进此应用程序,并介绍以后最好的东西:

    • Displaying a photo in full-view

      全屏显示照片
    • Applying visual filters to photos

      将视觉滤镜应用于照片
    • Saving altered photos

      保存修改过的照片
    • Packaging the application into a native application that can run on Windows, Mac, and Linux

      将应用程序打包为可在Windows,Mac和Linux上运行的本机应用程序

    If you really like NW.js and this tutorial so far, feel free to check-out my book where I cover many of these topics in depth. Scotch.io readers can get 40% off of the book with discount code: scotch

    到目前为止,如果您真的很喜欢NW.js和本教程,请随时阅读我的​​书,我在其中详细介绍了许多这些主题。 Scotch.io读者可以使用折扣码scotch享受40%的折扣。

    NW.JS In Action

    翻译自: https://scotch.io/tutorials/creating-a-photo-discovery-app-with-nw-js-part-1

    nw.js 调用驱动程序

    展开全文
  • nw.js 调用驱动程序NW.js (formerly known as Node Webkit) is a framework for creating cross-platform desktop applications using HTML, CSS, and JavaScript. This is part 2 of our tutorial on building a ...
  • 节点5,ECMA 6,NW.js,Angular.js。 最初,我构建此代码的目的是使我将CV / port作品集转换为JSON变得非常容易,这对我很有用,因为随后我可以将JSON通过我编写的其他应用/脚本放入该JSON中,以生成我的CV和技能...
  • PG.js 是 Node.js 项目 NW.js 的 package.json 生成器。 因自己喜欢上了 Node.js 后,尝试用 NW.js 制作桌面程序时,面对 NW.js 的众多参数....那个记不住啊。 所以写了个工具来自动生成 标签:PGjs
  • nw.js应用模板 不能当前维护,并且不能与NW.JS的最新版本一起使用。 带有所有所需样板的示例应用程序,只需使用适用于Linux,Mac和视窗。 目前仅完全支持Mac。 Linux部分受支持(),并且Windows。 开始吧 首先,...
  • NW.js是使用HTML,JavaScript和CSS等网络技术创建本机应用程序的框架。 在最简单的情况下,您将使用常规工作流程来开发Web应用程序。 在此过程的最后,您将运行一个生成器,将所有内容编译为一个本机应用程序,然.....
  • vue+webpack+nw.js可以开发桌面应用,什么是桌面应用呢?就是客户端软件,就是一个软件包或安装包,发给别人,别人双击打开或者安装就可以使用你的软件了。就像电脑上的QQ,百度网盘客户端一样。感觉挺酷的。 现在...
  • 节点级 基于Node.js / nw.js的街机游戏选择器 设置 npm install -g bower nw npm install bower install 配置(TODO) 跑步(待办事项:建筑物) cd nodecade nw .
  • NW.JS入门学习

    2018-10-30 11:10:19
    nw.js 入门学习文档
  • nw.js 打包换桌面图标This is not your typical "paste this here" and "paste that there"-type tutorial (you can find plenty of those here on cometchat.com/tutorials). While those tutorials certainly have...
  • 基于three.jsnw.js制作的雪花世界,内有演示视频和项目说明文档,值得一看
  • 采用HTML和JavaScript技术编写桌面应用,NW.js是一个应用程序运行时基于Chromium和node.js
  • NW.js 简介与使用方法

    2020-10-18 18:52:01
    使用nw.js封装的一个微信公众号菜单编辑器App
  • 点击启动台的这个图标就能打开,看到nw的窗口 给它设置个简单的别名,就可以在命令行启动它了 (参考这个:https://www.jianshu.com/p/5d2adad04b44 ) 我使用的是zsh,所以操作如下: 输入 vim ~/.zshrc ,...
  • nwis 是一个旨在为 nw.js GUI API (nw.gui) 提供 IntelliSense 支持的项目,尤其是在 Microsoft Visual Studio 或 JetBrains WebStorm 下。 是一个了不起的工具。 但是,由于开发中只有二进制形式,因此在 IDE 中记...
  • NW.JS的安装与打包

    万次阅读 多人点赞 2018-10-25 19:50:59
    NW.JS的安装与调试NW.JS的安装,打包与调试,个人总结NW.JS的安装与打包生成可执行的.exeNW.JS的开发工具与调试如何改变文本的样式导出与导入导出导入 NW.JS的安装,打包与调试,个人总结 为了防止自己忘记,经过...
  • 占领-西北 NW.js 测试 oculus-head
  • nw.js

    2016-11-15 14:01:23
    生成exe文件 copy /b nw.exe+index.nw index.exe
  • NW.js Essentials mobi

    2018-05-03 17:35:31
    NW.js Essentials 英文mobi 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
  • NW.js Essentials epub

    2018-05-03 17:33:44
    NW.js Essentials 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
  • NW.js的helloworld

    2019-04-16 11:26:10
    NW.js是什么?能干什么? Helloworld1 1. 下载 2. 创建package.json 3. 创建index.html文件 4. 运行应用 Helloworld2-是用NW.js APIs Helloworld3-使用Node.js API NW.js是什么?能干什么? 从官网...
  • NW.js Essentials(PACKT,2015)

    2015-08-13 23:22:26
    In this book, you'll discover how to leverage well-known programming languages, such as JavaScript, HTML, and CSS in order to create NW.js desktop applications. You will implement your first simple ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,043
精华内容 5,217
关键字:

NW.js