请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
暖男先生 发表于 2020-12-31 18:11:56 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
众所周知前端大多是基于下令行的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中写上应用名称和启动页面。
  1. {  "name": "我的应用", // 名称  "main": "index.html", // 启动页面}
复制代码
在html文件中随便写点什么。
  1.             我的应用    我的应用步伐
复制代码
双击nwjs执行这个步伐,页面长成这么个样子。

应用设置

接着我们先容一下package.json中都能设置哪些参数
  1. {  "name": "应用的名称", // 应用的名称  "main": "./index.html", // 指定应用的主页面  "build": "1445048139741", // 这是为了给更新时判断版本用的时间戳  "version": "0.0.1",// 当前的版本号  "homepage": "一般是官网地点之类的",  "description": "应用的形貌", // 形貌  "window": {    "title": "应用打开时候显示的名称", // 如果 index.html没有title,则会显示这里的值    "icon": "assest/img/logo.png", // icon    "position": "center", // 打开应用时在欣赏器屏幕中的位置    "width": 1280, // 应用的宽度    "height": 680, // 应用的高度    "toolbar": true, // 是否隐藏窗口的欣赏器工具栏,nw老版本另有用,新版本已经无效了    "frame": true, // 是否显示最外层的框架,设为false之后 窗口的最小化、最大化、关闭 就没有了    "resizable": true, // 可以通过拖拽变动应用界面巨细    "min_width": 1028 // 最小宽度  },  "node-main": "./node-main.js",// 启动时执行的js,查抄更新之类的。}
复制代码
实在这里的package.json就是我们日常开发项目中的项目管理文件,我们可以通过npm大概yarn的方式安装第三方的依赖包,然后通过require的方式导入进来,这里也是可以使用的。
比如我们通过npm安装一个marked模块。
  1. npm install marked --save-dev
复制代码
  1. {  "name": "我的应用",  "main": "index.html",  "devDependencies": {    "marked": "^1.2.5"  }}
复制代码
然后在html中的script中通过require加载这个模块,而且使用这个模块在页面转义一句markedown
  1.             我的应用   
  2.    
复制代码
效果如下:

开发调试

新版的nw是没有地点栏的,同时也没有控制台,这在开发过程中会产生很大的未便,不过这也很好办理,可以使用腾讯的vconsole来调试代码。
引入vconsole.js
  1.             我的应用        
复制代码

软件打包

如果是mac系统,打包就比力简单了,将package,html 等资源所在的文件夹 压缩成zip,注意nwjs执行步伐不要压缩否则包体积太大,然后修改文件名为app.nw,注意这里的后缀名改为nw。
然后在nwjs文件上右键显示包内容-> Contents-> Resources, 将上面的app.nw文件放进来,同时这个文件夹里面有一个app.icns就是我们软件的显示图标,可以自己制作一个替换掉。这样我们的软件就只做完了,可以发给其他人使用了。
windows系统打包方式相对来说麻烦一些,首先也是将package,html 等资源所在的文件夹 压缩成zip,修改后缀名为app.nw,然后需要将nw.exe和app.nw归并成一个文件夹。可以使用下面下令操作。
  1. copy /b nw.exe+app.nw app.exe
复制代码
然后可以下载Enigma Virtual Box将文件打成一个软件包。更换软件展示icon可以使用借助zip的本领。
步伐 -> 添加到压缩文件 -> zip, 存储(方式),创建自解压 -> 高级 -> 自解压选项 ->
设置 -> 提取后运行(添加文件名.exe) -> 模式(解压到暂时文件夹, 全部隐藏) ->
更新(覆盖所有文件) -> 文本和图标(从文件加载自解压文件图标) -> 确定。完成
至此我们就可以去开发我们的桌面工具了,我开发了下面这样一个工具。

好吧,貌似并不是一个工具,算了,管他呢,和队友联机玩魂斗罗去了…


来源:https://blog.csdn.net/xuzhijia1991/article/details/111959273
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )