Skip to content

使用HTML/CSS/JS开发轻量级跨平台桌面APP(Uses WebKit (Gtk/Cocoa) and MSHTML (Windows))

Notifications You must be signed in to change notification settings

isNeilLin/LightApp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Light-App

使用HTML,CSS,JS开发轻量级跨平台桌面APP开发模式(基于webview)。

谈到使用HTML/CSS/JS开发跨平台的桌面应用,不得不提起Electron, 但是由于Electron内置了Node.js和Chromium,所以Electron开发的程序即使只有一个很简单的页面,体积也非常大,普遍100M以上。

前段时间偶然发现了一个跨平台的webview库,觉得可以做些文章。就使用这个webview库的golang的Binding API,在JS中注入一个Bridge,提供了一些方法。当然和Electron的完整性不能相提并论,不过开发一些内部使用的简单桌面APP是可以胜任的。不过打包之后大小基本和静态资源大小持平,以示例Demo为例,打包之后只有十几M的大小。

环境配置

由于使用了Go语言的包,所以需要安装Go环境。Go安装以及GOPATH设置

项目需要在GOPATH对应的src路径下(例如:GOPATH为:/Users/username/Documents/go, 则项目对应路径应为:/Users/username/Documents/go/src/light-app)

安装GO依赖: go get

跨平台打包需要安装Docker。docker安装

起步

项目目录及文件:

- 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"       // 平台架构
    }
  ]
}

JS中可通过window.Config.data访问config.json中的属性

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

About

使用HTML/CSS/JS开发轻量级跨平台桌面APP(Uses WebKit (Gtk/Cocoa) and MSHTML (Windows))

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published