TangC's 编程世界

如果将一个网站直接打包成一个桌面应用，有很多应用解决方案。比如：electron nwjs(node-webkit) 包括c# delphi等嵌入一个web插件。

但是我们知道要是考虑到h5和css3的支持，还是需要些友好的浏览器内核。而 electron和nwjs都是基于chormium的。

比如我们要将一个SAAS系统打包成一个桌面端软件。系统入口：http://bech.cc/saas/pms

这里介绍nwjs的解决方案。虽然很多人都说electron好, 但是我看到目前国内CocosCreator 、微信开发者工具都是用的nwjs，还有其它很多的软件用它做代理，比如一些数字货币交易所的桌面端软件(win\mac\linux)。

1. 下载nwjs

2. 新建项目文件夹 saas ，在根目录下创建 package.json{
"name": "saastest",
"version": "0.1.0",
"description": "BechTech",
"main": "http://bech.cc/saas/pms/",
"window": {
"width": 1280,
"height": 800,
"position" : "center",
"icon": "./icon.png"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dist": "build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
"start": "run --x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
},
"build": {
"nwVersion": "0.46.3",
"win":{
"productName": "BechTech",
"copyright": "Copyright © 2009-2020 BechTech",
"icon": "./favicon.ico"
}
},
"dependencies": {},
"devDependencies": {
"nwjs-builder-phoenix": "^1.15.0"
}
}

3. 将nw.exe的目录放到环境PATH下。切换到目录下

nw saas  //启动查看本地窗口

这里启动后就相当于封装完了软件

4. 打包与发布

这里用官方推荐的 nwjs-builder-phoenix (推荐) 具体方法去git上查看

打包执行命令 npm run dist

后续会生成 dist\saas-0.1.0-win-x64 文件夹

这里要多重复实验才能成功，如果你英文阅读文档功底可以一次就够了。

---

我们再看另外一种情况，如果你的系统必须局域网内或者vpc访问

其实，这种情况我们经常会碰到，比如为了数据安全 或者考虑到无网环境运行。总之，你需要一个本地服务器。

我们一般的解决方案是配置一个本地的php开发环境。如果集成的会更快如 appserv xmpp phpstudy等等。

但是我们更希望要一个完全的可发布的一体化解决交付方式。

这里我们可以利用php5.5的命令快速实现一个解决方案。然后再用nwjs打包。每一个项目都是一个完美的桌面端软件且运行在本地的localhost.

下载php5.5 win-x86

1. 复制 php.exe php.ini-production ext\ extras\

2. 新建一个www文件夹。这里放的是网站程序 路由入口 index.php( 支持大部分框架 如 TP3)

3. 回到 nwjs 项目根目录下 写一个批处理程序 runserv.bat

@echo off
path = %path%;.\php\;
php.exe -S localhost:8080 -t php\www

4. 写一个main.js 用nodejs 的child_process模块执行批处理脚本

5. package.json 的main 加载 localhost:8080

6. 用nwjs打包

这样一个基于php本地架构的服务方案就完成了。