随着IT技术发展,BS架构应用已经基本取代传统CS架构,成为系统建设的主流选择。但是一些特定场合中,用户还是对传统的桌面客户端情有独钟,面对客户提出的实现客户端使用系统的需求,经过多番调研,我选择了nw.js进行系统封装,可以快速方便地“造出”一个PC客户端。

一、下载nw.js

直接前往官网下载即可 https://nwjs.io/downloads/

javascript客户端 js写windows客户端_客户端

实现客户端封装选择NORMAL即可,操作系统和版本按自己实际情况进行选择。

二、封装最简单的客户端

nw.js下载完成后,在任意位置新建文件夹,例如nwtest,然后在文件夹中新建两个文件:index.html和package.json。

index.html文件内容为:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
        // 以下方式直接跳转
        window.location.href='https://www.baidu.com/';
</script>
</body>
</html>

package.json文件内容为:

{
    "main": "index.html",
    "name": "测试客户端"
}

其中链接、name等可根据实际情况修改。

编辑完成后,将nwtest 文件夹整体拖动到nw.js文件夹中的nw.exe上,即可看到客户端打开的效果。

测试完成后,将nwtest下的文件压缩成一个zip,例如nwtest.zip,再修改后缀名nw,改成nwtext.nw,复制到nw.js文件夹下,然后在nw.js文件夹执行命令行:

copy /b nw.exe+nwtest.nw test.exe

即可在同一个路径下得到一个test.exe,就是我们最终得到的客户端文件,一个最简易的封装工作就完成了。

三、修改图标

客户端封装完成后,一个最常见的需求便是修改客户端的图标,我们只需将图标文件(png格式)加到nwtest文件夹下,然后修改package.json文件,在icon字段配置图标文件名,再重新打包即可:

{
    "main": "index.html",
    "name": "智能工作台",
    "description": "智能工作台",
    "window":{
        "title": "智能工作台",
		"icon":"main_tab_info_pressed.png"
    }
}

值得一提的是,这个配置只能修改客户端打开时标题栏和电脑任务栏中显示的icon,exe文件本身的图标修改还要借助resource Hacker之类工具。具体方法可参考:https://jingyan.baidu.com/article/e75057f203892febc91a8916.html

四、进阶功能

除了上边所述的一些简单配置,nw.js还提供了非常多的功能,我们可以在package.json文件中加入非常丰富的配置项,实现客户端的定制化展现。具体的功能和进阶描述,可以参考官方github中的文档。https://github.com/nwjs/nw.js/wiki