基于NW实现的前端桌面应用

本文介绍了如何使用NW.js快速开发桌面应用。NW.js基于Chromium和Node.js,允许开发者利用HTML+CSS构建UI,JavaScript实现功能,直接调用Node.js API。文章详细讲解了从开始使用、应用配置、开发调试到软件打包的全过程,并提供了Windows和Mac系统的打包方法。此外,还展示了作者使用NW.js开发的一个示例应用。
摘要由CSDN通过智能技术生成

众所周知前端大多是基于命令行的cli工具,比如常见的脚手架工具,其实使用JS也可以编写很多具有UI界面的应用软件。

这里我要介绍的是nwjs,为什么介绍他,因为他用起来真的很简单,可以让你快速入门,火速开发出属于自己的桌面应用。

nwjs 是基于Chromium和Node.js运行的, 我们可以通过html+css来编写UI页面,使用js来实现功能。可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和Node.js的跨平台,那么你的应用也是可以跨平台的。

现在已经有很多知名的应用是基于NW.js实现,

这是官方统计的一些列表:https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js

前端领域比较熟悉的微信开发者工具就是基于nwjs开发的。

NW文档中心: https://nwjs.org.cn/

开始使用

你可以从往上直接下载nw的各个版本https://nwjs.org.cn/download.html也可以使用npm安装, 我这里建议直接从往上下载,方便后面操作。

将下载好的压缩包解压,你可以将解压后的文件夹修改一个名字,也可以新建一个文件夹将解压后的文件copy进去。其实主要有用的文件就是nw执行程序,只要这个就可以了。

然后在nw执行程序的同级目录新建一个package.json文件。在里面设置应用的名称和启动执行的html页面。然后我们在文件夹中新建一个index.html

package.json中写上应用名称和启动页面。

{
   
  "name": "我的应用", // 名称
  "main": "index.html", // 启动页面
}

在html文件中随便写点什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值