介绍一个将前端开发的Web页面转成电脑客户端软件的方案,且不需要修改前端代码。
或者想通过前端技术来编写PC客户端软件。
安装和示例
使用到的工具:localize-webui
# 直接从npm源安装localize-webui包
npm install localize-webui
# 跑一遍包里提供的例子
npx localize-webui
自己项目中使用
安装完localize-webui后,从node_modules/localize-webui/local.config.json拷贝一份配置到自己的项目中。
按需修改其中的配置项:
{
"project": { // 项目配置
"entry": "/...项目路径.../index.html", // 改成你前端页面的html
"icon": "/...项目路径.../favicon.png" // 客户端软件的icon
},
"server": { // 服务配置
"host": "http://127.0.0.1:8000", // 如果有跟HTTP服务交互的需求
"prefix": "/api" // HTTP接口的前缀
},
"app": { // 客户端窗口配置
"window": { // 窗口大小
"width": 800,
"height": 600
},
"maximize": false, // 是否在打开时最大化窗口
"openDevTools": false // 是否需要打开devtools工具
}
}
配置基本跟electron相同,只是不需要自己编写electron的代码了。
修改完配置后运行
npx localize-webui --config=./local.config.json
可以使用vue或react框架开发页面,编译得到页面代码,再使用localize-webui将页面转成客户端软件。
温馨提示
目前,localize-webui该工具更新到1.0.3版本,可能存在一些问题。不过该项目是github上的开源软件,发现问题可以在github提issue,作者会及时更新。觉得不错的话,可以给作者点个star鼓励下。
Github地址