使用HTML/CSS/JS開發輕量級跨平臺桌面APP

談到使用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有返回值方法的返回值。

打包

一、 go-bindata -o=asset/asset.go -pkg=asset src/...

二、 node build.js