如何把一个web网站做成一个window应用程序
文章结构
- 小扯一下
- 进入正题
- 技术结构：
- dome演示
小扯一下
这个我在上家公司上班时，当时公司采用的技术结构，希望对有需要朋友有帮助。需求是客户需要一个窗口售票软件。之前为哪家客户提供软件的公司由于合同到期，不再提供服务。由于提供服务的公司可能由于资金断裂吧，快玩不下去了。就找到我们公司。让我们给他们提供技术支持以及开发新需求、升级系统等服务。但问题在于哪款软件是用C#开发的。而我们公司是开发微信公众号的，除了项目经理会C#没有其他C#程序员。而且公司也看中了这个商机，想要在上面做长远发展。开会讨论后放弃C#，并且由项目经理提供另一个框架。替代之前C#窗口程序。
进入正题
技术结构：
java + node-webkit（下文简称NW） + C#插件 + HTML5
技术介绍：
- Java就不说了，一句话。只提供接口，不提供页面，并采用Netty。
- 把java开发的web应用打包成桌面应用程序关键在于这个NW。NW是一个Chromium和node.js上的结合体，通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用，而且还可以跨平台的哦。很显然比起传统的桌面应用，在某些特定领域用html5+css3+js开发的web应用更加简单和高效，而且还可以使用node.js的功能，所以NW还是很有用处的。想要获取相关资料可以去官网NW
- 为什么还有C#插件，不是说放弃了吗？这是因为有硬件设备需要对接（打印机，闸机）。所以需要通过C#对接设备，NW调用C#。
- HTML5提供页面，向java要数据。
总结一下就是Java只负责处理业务和提供数据，NW作为桌面应用外壳。C#对接设备供NW调用。HTML5负责界面。
dome演示
由于java是独立的，所以演示就不包含Java部分了。
准备工作：
- 下载NW的运行环境，可在官网下载NW环境（建议用ie或者Microsoft Edge浏览器，谷歌会出现访问不了）。我这里采用的是v0.30.0版本。需要注意的是，开发下载带sdk的版本，正式下载不带sdk版本。（不少朋友说官网下载不了，我在下面的演示项目《NW-demo》里附带了演示对应版本的环境。），在C盘的根目录建个nwjs文件夹，并把环境解压到里面即可。
原因在于sdk版本按F12是可以调试的，每个浏览器都带的工具。就这个调试界面：
- 下载一个7-zip解压工具。
- 下载图标替换工具Resource Hacker。
OK准备完了，下载压缩工具和图标替换工具是干嘛的呢，你看了NW之后就会知道，所有的页面都要放在app.zip里，NW是通过对编译打包好的app.zip来生成.exe文件的。所以要用来开发一个打包工具。
- 我们要建一个app文件夹并创建下列文件：
- 具体文件内容，我已经将这个demo提交到码云上面了NW-demo，html相关文件都放在page里面，需要修改的是package.json文件：
{
"main": "page/index.html", //这里配置你的欢迎页面。
"name": "nw-demo", //项目名称
"version": "0.1.0", //你的项目版本号
"description": "demo", //项目描述
"keywords": [
"demo",
"node-webkit"
],
"window": {
"title": "node-webkit demo", //系统内显示
"icon": "tbd.png", //窗体标
"toolbar": false,
"frame": false,
"fullscreen": false,
"width": 1200, //窗口宽度
"height": 700, //窗口高度
"min_width": 1200, //最小宽度
"min_height": 700 //最小高度
},
"webkit": {
"plugin": true,
"page-cache": false
},
"dependencies": {
"nsync": "0.0.3"
}
}
- 更详细配置介绍可以去官网查询，我这里配置这些就够了。然后我们随便写一个页面。我这里找了一个小工具页面，把它放在page下面。代码如下：
<html>
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js">script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js">script>
head>
<body>
<div id="app" style="padding-right: 25px;">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="集合A">
<el-input type="textarea" v-model="form.A" :rows="10">el-input>
<el-collapse>
<el-collapse-item :title="ACount">
<div>{{ACollect}}div>
el-collapse-item>
el-collapse>
el-form-item>
<el-form-item label="集合B">
<el-input type="textarea" v-model="form.B" :rows="10">el-input>
<el-collapse>
<el-collapse-item :title="BCount">
<div>{{BCollect}}div>
el-collapse-item>
el-collapse>
el-form-item>
<el-form-item label="计算方式">
<el-radio-group v-model="form.type" style="margin-top: 12px;">
<el-tooltip content="两个集合中都含有的元素" placement="bottom">
<el-radio label="jj">交集[*]el-radio>
el-tooltip>
<el-tooltip content="两个集合并在一起并去除其中重复元素的集合" placement="bottom">
<el-radio label="bj">并集[+]el-radio>
el-tooltip>
<el-tooltip content="第一个集合减去第二个集合所包含的元素" placement="bottom">
<el-radio label="cj">差集[-]el-radio>
el-tooltip>
el-radio-group>
el-form-item>
<el-form-item label="计算结果">
<el-collapse>
<el-collapse-item :title="resultText">
<div>{{result}}div>
el-collapse-item>
el-collapse>
el-form-item>
<el-form-item>
<el-button type="primary" @click="cacl">计算el-button>
<el-button @click="reset">重置el-button>
el-form-item>
el-form>
div>
<script>
window.app = new Vue({
el: '#app',
data: function() {
return {
form: {
A: '',
B: '',
type: 'jj'
},
result: [],
resultText: '点击下方计算按钮'
}
},
computed: {
ACount: function(){
var self = this;
var tmp = transform(self.form.A);
return '合计：' + tmp.length + '个';
},
ACollect: function(){
return transform(this.form.A);
},
BCount: function(){
var self = this;
var tmp = transform(self.form.B);
return '合计：' + tmp.length + '个';
},
BCollect: function(){
return transform(this.form.B);
}
},
methods: {
cacl: function(){
var self = this;
var A = transform(self.form.A);
var B = transform(self.form.B);
if(self.form.type === 'jj'){
// 交集[*]
self.result = _.intersection(A,B);
}else if(self.form.type === 'bj'){
// 并集[+]
self.result = _.uniq(_.union(A,B));
}else if(self.form.type === 'cj'){
// 差集[-]
self.result = _.difference(A,B);
}
self.resultText = self.result.length + '个';
},
reset: function(){
this.form.A = '';
this.form.B = '';
self.resultText = '点击下方计算按钮'
}
},
created: function () {
}
});
// 行列转换，去空格，去重复
function transform(arr){
var tmp = [];
try{
tmp = JSON.parse(arr);
}catch(e){
tmp = arr.split('\n');
}
tmp = _.uniq(tmp);
tmp = _.remove(tmp, function(item){return (item+"").trim() != '';})
return tmp;
}
script>
body>
html>
- 到这里几乎就可以，但是我们不是说要开发一个打包工具嘛，这是为方便开发时不用每次都去手动打包，还有替换loge。直接贴代码
:: 设定命令不显示，当需要显示时，可以将下行命令注释
::@echo off
:: 获取当前路径
set NOWPATH=%~dp0
:: APP的开发的路径
set SRC=app/*.*
:: 打包的EXE的名称
set TAG=Client
:: EXE名称说明
set EXE=%TAG%.exe
:: 压缩后的ZIP文件
set ZIP=%NOWPATH%%TAG%.zip
:: 重要: 设置7zip的压缩目录
set ZIPPATH="%NOWPATH%\7-Zip\"
:: 重要： 这里改成你的运行环境目录，需要注意的时调试时的运行环境带了JDK，非调试是没有JDK的
set TOPATH=C:\nwjs\nwjs-sdk-v0.30.0-win-x64
:: 重要: 这里是你的图标替换工具目录
set ICONPATH="%NOWPATH%\Resource Hacker\ResourceHacker.exe"
set ICON=app/icon.ico
:: 显示当前路径
echo 当前路径:%NOWPATH%
:: 显示开始压缩
echo 开始压缩文件
:: 删除已经压缩过的文件
del /F /S /Q %ZIP%
:: 开始压缩
%ZIPPATH%7z.exe a -tzip %ZIP% %NOWPATH%%SRC% -r
:: 显示开始压缩
echo 正在打包Exe
:: 进入运行环境目录
cd %TOPATH%
:: 重要：当你的目录和当前目录不在同一个盘时，需要运行下面的盘符命令，否则不需要
C:
:: 关闭已经打开的EXE
taskkill /f /im %EXE%
:: 删除历史生成的EXE，需要源程序已经关闭
del /F /S /Q %EXE%.temp
:: 打包生成EXE
copy /b nw.exe+%ZIP% %EXE%.temp
:: 删除中间生成的ZIP包
del /F /S /Q %ZIP%
:: 显示开始压缩
echo 正在替换图标
:: 等待Exe被完全关闭
cscript %NOWPATH%wait.vbs
:: 删除历史生成的EXE，需要源程序已经关闭
del /F /S /Q %EXE%
:: 替换图标
%ICONPATH% -open %EXE%.temp -save %EXE% -action addoverwrite -res %NOWPATH%%ICON% -mask ICONGROUP,IDR_MAINFRAME,
:: 删除历史生成的EXE，需要源程序已经关闭
del /F /S /Q %EXE%.temp
:: 创建文件夹
md %TOPATH%\Config
:: 复制扩展文件到指定目录
xcopy %NOWPATH%Config %TOPATH%\Config /e /s /y
echo 开始创建桌面快捷方式
::设置程序或文件的完整路径（必选）
set Program=%TOPATH%\%EXE%
::设置快捷方式名称（必选）
set LnkName=%TAG%
::设置程序的工作路径，一般为程序主目录，此项若留空，脚本将自行分析路径
set WorkDir=%TOPATH%
::设置快捷方式显示的说明（可选）
set Desc=
if not defined WorkDir call:GetWorkDir "%Program%"
(echo Set WshShell=CreateObject("WScript.Shell"^)
echo strDesKtop=WshShell.SpecialFolders("DesKtop"^)
echo Set oShellLink=WshShell.CreateShortcut(strDesKtop^&"\%LnkName%.lnk"^)
echo oShellLink.TargetPath="%Program%"
echo oShellLink.WorkingDirectory="%WorkDir%"
echo oShellLink.WindowStyle=3
echo oShellLink.Description="%Desc%"
echo oShellLink.Save
)>makelnk.vbs
echo 桌面快捷方式创建成功！
makelnk.vbs
del /f /q makelnk.vbs
:: 执行EXE,该EXE是发布之后的EXE文件，发布时仅仅需要EXE文件和 node-webkit 的运行环境即可
::%EXE%
::出错时取消下面注释，可以看到错误的内容
::pause
- 把这个bat文件放在app外面，双击运行就开始打包cmd界面，技术后桌面就会出现项目图标：
双击运行它就进入我们写的页面了：
到这里就结束了，演示的代码：ttps://gitee.com/LearnToStrong_admin/NW-demo/，如有疑问可以留言，或者qq：1146527359联系我。尽我所能帮助你。
文章写得差，还请谅解。