nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了。...nw.js会按照chrome浏览器默认处理文件的方式来处理拖放的文件,能显示的会直接显示,不能显示的会变成资源下载。 这肯定不是桌面应用想要的效果,那么Html5是如何处理拖放的呢?
NW.js的用途 NW.js 基于 Chromium 和 Node.js,从而可以在桌面app中使用浏览器开发技术并直接调用 Node.js 资源,甚至将一个web应用打包到本地也轻而易举。...安装NW.js 可以从官网下载; 推荐在开发时下载是sdk版,以使用DevTools 非sdk版也应同时下载,在发布时使用 写一个 Hello World!...title> Hello NWJS~ == 右键单击可看到菜单 == //此处演示调用`NW.js...打包和发布 下载 https://github.com/jyapayne/Web2Executable 运行下载的图形界面程序,选定项目目录 程序会根据项目中的 package.json 自行填好 "App...在 "Export Settings" 中,选择要发布的平台种类,屏蔽一些无用文件等 在 "Compression Settings" 中,选择压缩级别;高压缩级别会带来相应的启动时间变长,并可能造成打包后的程序运行失败
nw.js就是使HTML, CSS, JavaScript写的原本在浏览器上运行的程序,也可以在桌面端运行。...效果图: image image 使用命令行安装 (命令行下载比较慢 所以不是特别建议) sudo npm install -g nw nw的打包流程 打包工具...windows下的打包流程 https://www.cnblogs.com/tinyphp/p/5052327.html mac/osx下的打包流程 https://blog.csdn.net...全局安装electron npm install electron -g 本地安装 npm install electron --save-dev 打包工具 这里的打包工具我选择的是...从license上来看,Electron是Github的,NW.js则是Intel。 nw 在mac上只能构建mac的应用 ,windows下只能构建windows的。
找了一圈发现NW.js挺容易上手,分享给大家。...NW.js 官网https://nwjs.io/ 1.下载适合当前版本的js 【这里下载的SDK版本,方便后续调试】 2.解压到本地 3.构建自己的project index.html...4.把项目放到nw.js解压后的同一目录下 5.命令进入到当前文件夹 输入 nw myapp 也可以直接把项目拖到nw.exe 6.将应用打包成app.nw文件,进入myapp文件夹中...nw.exe+app.nw app.exe,这时是可以直接执行app.exe的,但换到其它目录就不可以执行了,因为换到其它目录找不到nwjs包内的依赖文件 【但只能在当前环境执行,在别处使用时需要打包...Virtual Box打成独立的可执行的exe文件 http://enigmaprotector.com/en/downloads.html 9.(1)导入项目的.exe文件 (2)选择输出路径【打包后的文件存放地址
包大小较大:由于Flutter应用需要打包Dart运行时和Flutter框架,导致应用的安装包大小较大。...打包体积较大:由于需要同时支持多个平台,Uni-app 应用程序的打包体积可能较大。...包体积较大:由于需要打包 Qt 库和应用程序代码,Qt 应用程序的安装包大小可能较大。...nw.js NW.js(以前称为Node-Webkit)是一个基于Chromium和Node.js的框架,用于构建跨平台的桌面应用程序。...NW.js具有以下特点: 跨平台支持:NW.js可以在多个操作系统上运行,使开发者能够使用相同的代码库构建跨平台的桌面应用程序。
比如:1)NW.js;2)Electron;3)Flutter for Desktop;4)Tauri;5)Wails;4.2NW.jsNW.js 官网描述:NW.js概况:1)官网:https://nwjs.io...类似于 NW.js,表面上,它们似乎非常相似,但是这两个项目有本质上的区别,使得 Electron 和 NW.js 成为两个完全独立的产品。...8、Electron和Tauri的应用打包对比Electron 中比较常见的有两种打包:1)electron-packager;2)electron-builder。...Electron 打包:PS:Electron的打包实践可以看看《Electron初体验(快速开始、跨进程通信、打包、踩坑等)》一文中的“7、打包发布”章节。...10、本文小结NW.js 的时代已经过去,考虑 NW.js 的可以优先 Electron。Tauri 表现不错,前景较好。
---- 一、使用 NW.js 打包 NW.js基于Chromium和Node.js。它允许您直接从浏览器调用Node.js代码和模块,并在应用程序中使用Web技术。...此外,您可以轻松地将web应用程序打包为本机应用程序。...官网:NW.js 官网 优点:免开发、门槛低、体积小 1.1 下载、解压 NW.js 1.1.1 下载 NW.js 进入 NW.js 官网,点击下载最新版,如下图所示。...1.1.2 解压 NW.js 接着我们将压缩包解压到指定目录,解压成功后如下图所示。...将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼》。 第一章都在讲将一个网址打包为桌面客户端。 但我们手上的不是网址,是一个 localhost(本地版) 的 Vue 项目!
默认情况下,nw.js发布的nw.exe文件请求的是普通权限,当我们的应用需要访问一些特殊目录或者注册表等,就需要程序启动的时候以管理员权限运行。...首先我们找一款使用nw.js开发的软件,这里我推荐AxeSlide,首先去下载软件,安装。
说到 node.js 的 GUI 开发方案,首先想到的就是 electron 和 nw.js。但除了它们之外,是否存在其它更轻量级的技术方案可供选择呢?...在这个基础上,再加上个方便操作的 GUI 就好了,于是首先想到的方案自然就是 electron 或者 nw.js。...但打包了 Chromium 内核和 node.js 环境后,如今的 electron 和 nw.js 动不动就上百MB的大小,用来开发这样的小工具实在是不划算。...看起来具体实现基本就是把 react-native、electron 等方案整个打包,再增加了对 Win10 的 UWP 支持,是个大而全而非小而轻的方案?
中仅保存极少量信息且会过期),数据持久化(Data Persistence)是本地应用开发中的常见需求,通俗的讲就是将瞬时数据(比如内存中的数据,断电即失效)保存为持久数据(比如写入数据库中长久保存); 由于NW.js...直接存储数据到本地文件 正如之前的文章提到过的,NW.js提供了App.dataPath来访问系统的应用数据目录, 可以利用其方便的存储应用配置文件等 不同平台上的具体指向: Win: $LOCALAPPDATA...) }); db.get('mittens').then(function (doc) { return db.remove(doc); }); https://github.com/nwjs/nw.js
在实际的NW.js程序开发中,我们可能在程序启动时做一些加载前逻辑,比如更新等等,那如何实现等待这些逻辑完成后才开始加载index.html呢?
[I] 概述 - NW.js原生界面(Native UI)APIs 要构建一个像样的桌面应用,除了由NodeJS处理底层功能,以及由Webkit来应付窗口GUI外,还需要诸如操作窗口、访问剪贴板或隐藏到系统托盘区等和系统图形界面交互的能力...而前面提到的两者,要么无法访问GUI,要么受限于API边界,均无法提供 NW.js Native UI APIs 则在其他JS层的顶部提供了这些完整的功能 1.1 获取nw实例 旧版本中可以用 var...也可以同时打开多个文件 nw path/to/app path/to/a.txt path/to/b.txt 为了访问到这些文件路径,需要使用App.argv属性,其返回一个参数数组 //如果要实际运行例子,需要打包...Window API - 操作NW.js窗口 在NW.js中,Window API 只不过是对DOM中window对象的一层包装,很多(并非所有)方法和属性继承了后者的用法,同时window对象也是 Node.js...中的托盘图标没有右键点击的行为,如果在menu上绑定了click行为,将被默认的显示菜单行为覆盖 Mac中的高分屏,可判断 window.devicePixelRatio>1后动态指定,或将2x图标和原始图标文件打包
2 nw.js工具 nwjs官网下载 nw.js的github地址 nw.js的使用流程: 测试可用 解压下载包后,双击nw.exe,可以正常启动,则说明可以使用node-webkit。...当然也可以写简单点,如下: "name": "index-demo", "main": "index.html", //入口 文件准备 把上面的 index.html 和 package.json 放置到 nw.js...我们有个工具 Enigma Virtual Box 可以做打包的工作。...参考文章: 让HTML网页变成一个exe执行程序(node-webkit或HTMLRunExe或hta) NW.js构建桌面应用
Alexey Ivanov:webpack’s bundle inner structure and optimization webpack是目前大型前端项目的事实标准打包工具。...Webpack的打包机制如何工作?不同的配置项如何影响输出结果?如何调试和优化打包过程?让我来为你解惑。...孟红伦(云际):如何用JavaScript做好一个大型应用 钉钉是国内企业级市场的领军应用,是一个业务逻辑复杂,实时性要求极高的应用,是国内用户量最大使用nw.js构建的桌面应用。...我们基于nw.js,使用Web技术,持续高速迭代了三年,帮助产品快速占领了市场,目前超过10W行代码,依然保持高速迭代,快速稳健的演进支持瞬息万变的市场竞争,来看钉钉是如何做的。
Node.js常用来构建高并发的C/S应用,将这种模式移植到NW.js程序中虽然可行且费不了什么功夫,但仅仅这样做并不能发挥出平台所有的潜力;要知道NW.js允许直接在DOM中和Node.js交互,而这将大大加快程序的运行和简化开发...模块 内部模块 var fs = require('fs') 第三方模块 npm install 之后 var _ = require('underscore') C/C++ 模块 global对象 NW.js...process也是一个在窗口中和Node.js上下文中都可以访问到的全局对象 除了可以访问固有的 process.env.HOME 得到主目录等,还添加了如下属性: process.version['NW.js
写在开头 由于最新的Electron已经支持了M1芯片,arm架构下的Mac 在开发桌面软件时候不可避免的需要打包自测,那么在M1芯片上的Mac打包适配自己的软件也是应该的 那么现在制作Electron...明明都是依赖Electron,其实大部分软件升级适配成本不高,桌面软件开发者们赶紧升级吧 背景 Electron不支持xp系统,只要node.js升级后基本上它就会发布升级版本(如果你要兼容xp系统请使用nw.js...electron-builder/issues/5392 修改配置为 "mac": { "target" : { "target": "dir", "arch": "arm64" } }, 同时修改打包构建...arm架构下命令为: electron-builder build --arm64 最终 升级适配成功 image.png 打包的是dmg,实际上可以直接打开 image.png 一个很简短却很实用的教程
这也意味着前端开发人员并不仅仅是写网页,也可以利用前端的技术栈来开发桌面应用, Electron开发的程序只需在打包时选择一定的参数,便可以构建出Windows Linux和MacOS下对应的安装包,很大程度上节省了开发的精力...实际上,Electron并不是唯一一个以Web前端语言开发桌面程序的框架,在此之前就已经有NW.js,它和Electron相似,都是利用web前端语言开发桌面程序,并且具有非常好的跨平台性,但是现在Electron...的使用热度已经远远地超过了NW.js,呈现后来者居上的态势.许多著名的项目都是由Electron开发完成,比如Microsoft官方发布的VSCode以及Github官方推出的Atom编辑器等都是基于Electron...electron-packager工具便可以非常简便地生成Windows (.exe) Linux (.deb or .rpm)以及MacOS (.dmg)三大平台下的安装包, 因为源码中含有JavaScript代码, 所以在打包的时候往往需要进行混淆处理
前言:IDEA导出war包的方式与MyEclipse有一点不同,使笔者在使用的时候有点困惑,在网上查阅相关资料的时候,发现都讲解得都不是非常的清晰,于是有了这篇...
build.png aapt打包过程 ? aapt.jpg 1. 解析AndroidManifest.xml,创建ResourceTable对象 ? uml.png 2....收集资源文件 在编译应用程序资源之前,Android资源打包工具aapt会创建一个AaptAssets对象,用来收集当前需要编译的资源文件。...打包APK文件 assets目录 res目录,但是不包括res/values目录, 这是因为res/values目录下的资源文件的内容经过编译之后,都直接写入到资源项索引表去了 资源项索引文件resources.arsc
在开始之前,你需要准备 从官方文档,了解微信小程序是什么; 了解 Redux 应用状态管理方案,同时它也是 Flux 架构的具体实现; 了解 JavaScript 打包工具 webpack; 了解 ES6...安装工具和依赖模块 下载微信小程序开发者工具 开发者工具是用 NW.js 模拟的环境,在微信中,则是 JavascriptCore 环境。 不过不用担心, 只是两个不同的 VM,本质是一样的。...NW.js 可能存在一些小 bug,写代码的时候注意一下就好。 用 npm 命令开始一个微信小程序项目 开始安装必要的依赖模块 由于除了小程序运行时需要的模块,还有构建所需要的模块。...接下来,我们安装打包工具 webpack: 我们只需要对代码进行打包,不需要 dev server 和 hot module replace 功能。...若需要打包其他资源,请读者自行研究。 而且,值得注意的是,微信小程序包有 1 MB 的上限。 定义 npm 命令 首先是代码测试命令 test。
领取专属 10元无门槛券
手把手带您无忧上云