libui-node體驗筆記

簡介

libui-node是基於libui庫的node封裝.libui庫是一個簡便的將本地原生的GUI封裝的C語言庫，並支持各平臺（Mac,Linux,windows）。官網提供了第三方封裝文檔，開發者能夠方便的實現本身語言的封裝。目前市面上有基於swift,kotlin,python,php,node，lua.... 各類第三方語言的封裝庫，這裏只介紹node封裝庫的使用方法。

對比electron

與electron比較起來，github上的數據比較起來得可憐的很。 社區也基本沒啥活躍。 我的也比較喜歡electron徹底web化的任性開發。

就目前看起來libui的主打賣點以下：

• 支持各類開發語言
• 原生Ui渲染
• 打包較小（helloworld代碼40M，比electron的100M小很多）

	stars 🌟	forks 🍽	issues ⚠️	updated	created 🐣
libui-node	1391	61	24	Jun 19, 2018	May 21, 2016
electron	61773	8086	1195	Jun 27, 2018	Apr 12, 2013

安裝

環境要求

Windows

• windows-build-tools or Visual Studio 2015 to compile the project.
• Visual C++ Redistributable Package per Visual Studio 2013

本人windows環境測試的時候老是報錯缺乏c++配置文件（C:/microsoft.Cpp.Default.props），拒查說是由於libui和libui-node的編譯庫版本不一致致使，官方在解決。我沒有安裝vs2015或者vs2017，全新虛擬機按照如下方式完成。

• 安裝microsoft .net framework4.5.1
• 安裝Visual C++ Redistributable Package per Visual Studio 2013和 Visual C++ Redistributable Package per Visual Studio 2015
• npm --vcc-build-tools-parameters='[""--allWorkloads""]' install --global --production windows-build-tools
• npm install libui-node

而後就是各類的報錯，必讀不能進入依賴包目錄（cd xxx），缺乏文件(C:/microsoft.Cpp.Default.props),不知道咋回事過了2個小時左右，從新安裝就過了。。。。。。 (我恢復鏡像後連續兩次都是這麼安裝成功的，一臉懵逼，或許等做者升級以後的版本(0_3_0)會好些)

Linux

If they are not provided by default in your distribution:

• build-essential to compile the project.
• GTK+ 3

macOS

• Xcode 8 to compile the project.

node安裝

命令行下運行node命令：

npm install -save libui-node

對應平臺的libui二進制庫會被自動下載安裝，若是報錯多是由於本地的npm庫比較老，能夠更新npm.其餘錯誤能夠看看this node-gyp issue.

運行示例

下載線上的git庫，其中docs爲文檔目錄，examples爲示例目錄，運行示例看是否可正常運行：

#在根目錄下先執行安裝
npm install
#直接運行control gallery示例
npm start
#運行core api示例
npm run start-core
#運行指定的示例文件
node <path to example file>

開發

詳細的文檔查看git源碼目錄下的docs目錄，下面作一個簡單的例子

創建一個工程目錄

mkdir test
cd test
npm install --save libui-node

新建一個index.js

const libui = require('libui-node');

const menu = new libui.UiMenu('File');
menu.appendQuitItem();

const win = libui.UiWindow('test', 400, 300, true);

var widget = new libui.UiLabel();
widget.text = '呵呵呵呵';
win.setChild(widget);

win.onClosing(()=>{
    win.close();
    libui.stopLoop();
});

libui.onShouldQuit(() => {
    win.close();
    libui.stopLoop();
});

win.show();
libui.startLoop();

測試運行

node index.js

打包

這些示例都源碼的方式在node環境下執行，若是想打包的話那麼就須要用到 launchui-packager 一個基於LaunchUI的跨平臺打包器。

安裝

npm install --g launchui-packager

打包命令

第一次執行的時候會下載對應平臺的依賴包。

launchui-packager <name> <version> <entry> [options...]

好比上面作的開發中的示例能夠如此打包：

#在工程目錄下執行
launchui-packager hello 1.0.0 index.js --out output

參數介紹

<name> 應用名稱
<version> 應用版本號
<entry> 應用的啓動腳本，將被拷貝到最終包的 app/main.js

配置介紹 options

--out <path> 生成包的輸出目錄，默認當前目錄
--platform <platform> 目標平臺，支持win32, darwin (OS X) and linux. 默認當前平臺一致（process.platform）
--arch <arch> 包的架構，支持x64 (全平臺支持) and ia32 (win32/linux),默認當前平臺一致（process.arch）
--overwrite 是否覆蓋以前生成的包或目錄，默認不覆蓋
--pack <format> 定義打包的格式，目前只支持zip格式，默認生成應用目錄不打包
--launchui-version <version> 定義下載的launchui版本，默認使用當前系統已有的
--launchui-cache <path> 定義launchui下載路徑，默認~/.launchui
--company <company> 公司名稱，對應Windows下的CompanyName 屬性設置
--copyright <copyright> 應用的版權信息，對應 windows下的LegalCopyright屬性 和 Mac OS X下的 NSHumanReadableCopyright
--identifier <identifier> 應用的bundle identifie，對應Mac OS X下的CFBundleIdentifier
--category <category> 應用的category，對應Mac OS X 下的LSApplicationCategoryType
--icon <path> 應用的圖標路徑，windows下使用.ico，Mac OS X下使用.icns後綴
--license <path> 應用的license文件，將被拷貝到應用的根目錄下
--dir <path> 應用額外須要打包的文件目錄，將做爲子目錄被打包到應用的app目錄下
--files <pattern,...>  定義dir定義的文件目錄中拷貝文件的匹配規則，能夠參考glob文檔，多個規則可使用數組。默認**，表明拷貝dir目錄下的全部文件

輸出

將生成一個名稱爲 <name>-v<version>-<platform>-<arch> 目錄，好比：MyApp-v1.0.0-win32-ia32

api方式

除了使用上面命令行的方式也可使用api的方式進行打包，好比再用自動化工具的時候，跟上面的參數大同小異：

const packager = require( 'launchui-packager' );
packager( {
  name: 'MyApp',
  version: '1.0.0',
  entry: './dist/main.js',
  out: './packages'
  .....
}, function ( err, outPath ) {
  // outPath will be the path of the created package directory or file
} );