首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

NW.js构建跨平台桌面应用(1)-入门案例

NW.js的用途 NW.js 基于 Chromium 和 Node.js,从而可以在桌面app中使用浏览器开发技术并直接调用 Node.js 资源,甚至将一个web应用打包到本地也轻而易举。...安装NW.js 可以从官网下载; 推荐在开发时下载是sdk版,以使用DevTools 非sdk版也应同时下载,在发布时使用 写一个 Hello World!...title> Hello NWJS~ == 右键单击可看到菜单 == //此处演示调用`NW.js.../path/to/nw 是 NW.js 的二进制运行文件; 在Windows上是nw.exe,在Linux上是nw,而在Mac则是nwjs.app/Contents/MacOS/nwjs Linux和Mac...打包和发布 下载 https://github.com/jyapayne/Web2Executable 运行下载的图形界面程序,选定项目目录 程序会根据项目中的 package.json 自行填好 "App

4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端构造桌面级应用(QQ音乐)

    在这里贴一下nw的官网首页和下载截图) image image Github上nw.js有两万多Star和接近3000的Fork,说明它已经相当成熟。...nw.js就是使HTML, CSS, JavaScript写的原本在浏览器上运行的程序,也可以在桌面端运行。...image nw的安装与使用 下载安装包安装(建议大家下载带有开发包的 便于调试) 官网下载nw.app的压缩包 解压以后即可使用 附官网地址: https://github.com.../nwjs/nw.js 效果图: image image 使用命令行安装 (命令行下载比较慢 所以不是特别建议) sudo npm install -g nw nw的打包流程...不得不提nw.js开发出的应用已经涵盖了许多领域: WhatsApp 经典的聊天应用,还有Messenger; Powder Player 种子下载,以及视频播放器; Boson Editor 代码编辑器

    2.7K40

    NW.js构建跨平台桌面应用(2)-原生界面API

    [I] 概述 - NW.js原生界面(Native UI)APIs 要构建一个像样的桌面应用,除了由NodeJS处理底层功能,以及由Webkit来应付窗口GUI外,还需要诸如操作窗口、访问剪贴板或隐藏到系统托盘区等和系统图形界面交互的能力...而前面提到的两者,要么无法访问GUI,要么受限于API边界,均无法提供 NW.js Native UI APIs 则在其他JS层的顶部提供了这些完整的功能 1.1 获取nw实例 旧版本中可以用 var...App API - 应用的核心 2.1 打开关联类型的文件 NW.js应用有多种办法打开文件,此处谈论的是打开关联的文件类型;也就是说如果我们开发一个文本编辑器,那么我们希望在系统中右键单击一个txt文件出现的...Window API - 操作NW.js窗口 在NW.js中,Window API 只不过是对DOM中window对象的一层包装,很多(并非所有)方法和属性继承了后者的用法,同时window对象也是 Node.js...文件对话框 - 打开或保存文件 在浏览器里,文件对话框可以上传下载文件。

    6.6K40

    经常忘记网址?将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼

    ---- 一、使用 NW.js 打包 NW.js基于Chromium和Node.js。它允许您直接从浏览器调用Node.js代码和模块,并在应用程序中使用Web技术。...官网:NW.js 官网 优点:免开发、门槛低、体积小 1.1 下载、解压 NW.js 1.1.1 下载 NW.js 进入 NW.js 官网,点击下载最新版,如下图所示。...下载的是一个普通压缩包,如下图所示。 1.1.2 解压 NW.js 接着我们将压缩包解压到指定目录,解压成功后如下图所示。...2.2.3 Nginx 配置 Nginx 和 Tomcat 一样,是一个轻量级的应用服务器,官网下载页面是:Nginx 下载。 同学们可以下载最新稳定版的 Nginx,如下图所示。...本文还讲解了 Vue 项目从下载依赖、打包和 Nginx 部署的全过程,可以给 Vue 初学者参考学习。

    1.1K40

    第一章 Electron介绍 | Electron in Action(中译)

    桌面应用程序具有更广泛的功能,并且由于用户显式地下载、安装和打开应用程序,所以对它们所能做的限制更少。然而,当你在浏览网页时,您正在执行没有选择安装在计算机上的代码。...用户显式地下载和安装Electron应用程序,就像任何其他本机应用程序一样。您可以像任何本机桌面应用程序或服务器端Node进程那样自由地访问文件系统。...NW.js Electron与另一个名为NW.js(以前称为node-webkit)的项目类似。这两者有很多共同之处。...表1.1 Electron和NW.js之间的主要区别的比较 Electron NW.js 平台 支持官方最新的Chromium版本 Chromium分支版本 进程模型 分离进程模型 共享Node进程...电子还包括自动下载更新和错误崩溃上报,NW.js不支持。 NW.js应用程序从HTML页面启动,每个浏览器窗口共享一个Node 进程。如果打开多个窗口,它们都共享同一个Node进程。

    3.6K30

    打算一个卡片记忆软件,全平台架构如何选型?

    Windows, macOS, Linux 中等 HTML, CSS, JavaScript 社区支持 一般 中等 NW.js社区 中等 较大 较大 高 性能相对其他框架较低,内存占用高 中等 NW.js...nw.js NW.js(以前称为Node-Webkit)是一个基于Chromium和Node.js的框架,用于构建跨平台的桌面应用程序。...NW.js具有以下特点: 跨平台支持:NW.js可以在多个操作系统上运行,使开发者能够使用相同的代码库构建跨平台的桌面应用程序。...社区支持:NW.js拥有一个积极的开发者社区,提供丰富的文档和示例,使开发者能够快速上手并解决问题。...然而,NW.js也存在一些挑战,包括: 性能相对其他框架较低:由于NW.js同时运行Chromium和Node.js,可能导致一些性能方面的挑战,例如初始启动时间较长和内存占用较高。

    37410

    前端之变(四):进击的前端

    桌面开发 -- NW.js与Electron 如我前面所讲,只要在有原生开发的地方,就会有跨平台开发的技术出现。 同样的现象也出现在桌面开发。...因此,跨平台桌面开发技术--NW.js与Electron就出现了。 这一次,前端技术向桌面开发发起了进攻的号角。...React Native的现状用一句话来形容就是:前行艰难,后有追兵 NW.js 与 Electron -- 性价比高的解决方案 NW.js与Electron相对而言,处境就好很多了。...早期钉钉客户端,也是基于这种方案来构建 微信小程序的IDE 迅雷X 还有很多,那些你下载下来发现有几十M到上百M的,又跨平台的,基本你就可以往这方面考虑,它很有可能是基于这种方案做的。 ?

    1.9K11

    IM跨平台技术学习(十三):从理论到实践,详细对比Electron和Tauri的优劣

    比如:1)NW.js;2)Electron;3)Flutter for Desktop;4)Tauri;5)Wails;4.2NW.jsNW.js 官网描述:NW.js概况:1)官网:https://nwjs.io.../;2)GitHub:https://github.com/nwjs/nw.js;3)语言:Nodejs + 前端任意框架;4)代表项目:微信小程序 IDE,京东小程序 IDE。...类似于 NW.js,表面上,它们似乎非常相似,但是这两个项目有本质上的区别,使得 Electron 和 NW.js 成为两个完全独立的产品。...比如:1)应用入口不同:NW.js 主入口是一个 HTML,Electron 中是 JavaScript,可操作性更强;2)Node 集成方式不同:在 NW.js 中网页中的 Node 需要通过给 Chromium...10、本文小结NW.js 的时代已经过去,考虑 NW.js 的可以优先 Electron。Tauri 表现不错,前景较好。

    18910
    领券