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

如果安装一直没进展，可以加上版本号，目前4.0.0 貌似很好装：... windows-build-tools@4.0.0

然后就是各种的报错，必读不能进入依赖包目录（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
} );