谈到使用HTML/CSS/JS开发跨平台的桌面应用,不得不提起Electron, 但是由于Electron内置了Node.js和Chromium,所以Electron开发的程序即使只有一个很简单的页面,体积也非常大,普遍100M以上。
前段时间偶然发现了一个跨平台的webview库,觉得可以做些文章。就使用这个webview库的golang的Binding API,在JS中注入一个Bridge,提供了一些方法。当然和Electron的完整性不能相提并论,不过开发一些内部使用的简单桌面APP是可以胜任的。不过打包之后大小基本和静态资源大小持平,以示例Demo为例,打包之后只有十几M的大小。
项目目录及文件:
- main.go // 主文件
- src
- config.json // 项目配置文件
- index.html // 入口HTML
- js/css/img // 相关静态资源
- asset
- asset.go // go-bindata之后生成的静态资源依赖
复制代码
config.json
配置
{
"name": "Light", // App名称
"width": 1080, // 窗口宽度
"height": 740, // 窗口高度
"title": "Test App", // 窗口标题
"resizeable": true, // 是否可缩放
"debug": true, // debug模式
"icon": "Light.icns", // App图标路径
"output_path": "./build" // 输出路径
"buildTarget": [
{
"os": "darwin", // 打包平台
"arch": "amd64" // 平台架构
},
{
"os": "windows", // 打包平台
"arch": "amd64" // 平台架构
}
]
}
复制代码
Bridge接口
-
属性
data.os
: 系统平台,Mac:darwin
, Windows:windows
, Linux:linux
data.arch
: 系统架构data.username
: 用户登录名data.storagePath
:系统分配的程序存储路径data.homePath
: home路径data.tempPath
: 临时路径data.currentPath
: 程序当前执行路径 -
方法
没有返回值
Bridge.init()
: 初始化Bridge,调用这个方法之后,Bridge的属性生效。Bridge.exit()
: 退出程序Bridge.message(title, content)
: 消息弹窗Bridge.info(title, content)
: 信息弹窗Bridge.warn(title, content)
: 警告弹窗Bridge.error(title, content)
: 错误弹窗Bridge.setEnv(key, value)
: 设置环境变量Bridge.setColor(r, g, b, a)
: 设置标题栏颜色Bridge.setFullScreen(bool)
: 设置是否全屏有返回值
Bridge.getEnv(key)
: 获取环境变量值 接收返回值:eventListener.on('getEnv', (value)=>{})
Bridge.makeDir(path)
: 创建文件夹 接收返回值:eventListener.on('makeDir', (err)=>{})
Bridge.remove(path)
: 删除文件 接收返回值:eventListener.on('remove', (err)=>{})
Bridge.removeAll(path)
: 删除文件夹 接收返回值:eventListener.on('removeAll', (err)=>{})
Bridge.renameFile(oldpath, newpath)
: 重命名文件 接收返回值:eventListener.on('renameFile', (err)=>{})
Bridge.openFile(dialogTitle)
: 打开文件 接收返回值:eventListener.on('openFile', (jsonString)=>{})
Bridge.openDir(dialogTitle)
: 打开文件夹 接收返回值:eventListener.on('openDir', (jsonString)=>{})
Bridge.readFile(path)
: 读取文件 接收返回值:eventListener.on('readFile', (fileContent)=>{})
Bridge.writeFile(content)
: 创建文件 接收返回值:eventListener.on('writeFile', (err)=>{})
JS中,通过eventListener.on(方法名, (返回值)=>{})
接受Bridge有返回值方法的返回值。
打包
1、 go-bindata -o=asset/asset.go -pkg=asset src/...
2、 node build.js